Think Bright Sites Sign in Check my site

The library

How we build a site, part by part.

A style sets the look. A header, sections and a footer make the page. Blocks hold your content, and moving parts give a visitor something to do. Everything here is a working part of the Think Bright System, not a mockup.

This is not a menu. You do not pick from it. We design around your business, and these are the parts we reach for. Every business and every word shown is sample content, and the businesses are fictional.

Blocks

Headers, footers and the building blocks underneath, drawn by the engine with sample words.

Headers and footers

Promo/Info Bar

Slim top bar with rotating announcements, phone, address, social links

Headers and footers

Footer: With an email signup

The block at the bottom of every page: link columns, contact details, socials, and the copyright line

Headers and footers

Footer: Call to action above the columns

The block at the bottom of every page: link columns, contact details, socials, and the copyright line

Headers and footers

Footer: Centered, large name and social

The block at the bottom of every page: link columns, contact details, socials, and the copyright line

Headers and footers

Footer: Minimal

The block at the bottom of every page: link columns, contact details, socials, and the copyright line

Headers and footers

Footer: Columns, light

The block at the bottom of every page: link columns, contact details, socials, and the copyright line

Headers and footers

Footer: Columns, dark

The block at the bottom of every page: link columns, contact details, socials, and the copyright line

Headers and footers

Header: Drawer from the right

The bar at the top of every page: logo, menu, and usually a phone number or a call-to-action button. Sometimes a thin utility strip sits above it with hours or socials

Headers and footers

Header: Menu behind a burger · drawer from the left

The bar at the top of every page: logo, menu, and usually a phone number or a call-to-action button. Sometimes a thin utility strip sits above it with hours or socials

Headers and footers

Header: Side rail

The bar at the top of every page: logo, menu, and usually a phone number or a call-to-action button. Sometimes a thin utility strip sits above it with hours or socials

Headers and footers

Header: Over the hero

The bar at the top of every page: logo, menu, and usually a phone number or a call-to-action button. Sometimes a thin utility strip sits above it with hours or socials

Headers and footers

Header: Stacked

The bar at the top of every page: logo, menu, and usually a phone number or a call-to-action button. Sometimes a thin utility strip sits above it with hours or socials

Headers and footers

Header: Split

The bar at the top of every page: logo, menu, and usually a phone number or a call-to-action button. Sometimes a thin utility strip sits above it with hours or socials

Headers and footers

Header: Centered

The bar at the top of every page: logo, menu, and usually a phone number or a call-to-action button. Sometimes a thin utility strip sits above it with hours or socials

Headers and footers

Header: Bar, with a utility strip

The bar at the top of every page: logo, menu, and usually a phone number or a call-to-action button. Sometimes a thin utility strip sits above it with hours or socials

Blocks

Accordion

Stacked collapsible rows with a heading and hidden content, not questions and answers

Blocks

Before & After

Two images of the same subject compared, sometimes with a slider handle dragged between them

Blocks

Booking

A booking calendar or scheduler (Calendly, Acuity, Square and the like), or a card that links to it

Blocks

Comparison

A side-by-side comparison: plans or options in columns with ticks and crosses, or us versus them

Blocks

Contact Cards

How to reach them as separate cards: call, email, visit (the address), opening hours

Blocks

Contact Form

Lead generation or contact form with input fields and submit button

Blocks

Content Split

50/50 or 60/40 layout: image on one side, text+CTA on the other

Blocks

CTA Banner

Full-width call-to-action with heading, description, button

Blocks

Estimate Request

Request a quote or estimate: project type, where, what, photos or plans, when, contact — often beside what happens next

Blocks

FAQ Accordion

Expandable question-and-answer pairs

Blocks

Image Band

One wide photograph across the page with no words on it, used as a divider between rows

Blocks

Image Gallery

Grid or masonry layout of images/photos

Blocks

Map

An embedded map, usually with a pin on their location

Blocks

Email signup section with title, description, input field, submit button

Blocks

Product Grid

Product cards in a grid with image, title, price, add-to-cart

Blocks

Service Area

The towns, cities, counties or neighbourhoods they serve, listed or as chips, often with a heading like "Areas we serve"

Blocks

Service Cards

Cards for the services offered, each led by an icon rather than a photograph

Blocks

Tabs

A row of tab labels; choosing one shows its panel of content below

Blocks

Text Block

Words with no picture: a heading and one or more paragraphs, sometimes a list or a button. An intro, an about, a mission

Blocks

Timeline

Chronological milestones with year, title, description

Sections

The layouts a page is assembled from, each one a working part.

Bands

Brand band

The band in their accent color, heading large.

Bands

Centered card

A centered framed card on the ground with the heading and button.

Bands

Dark band

A full-width dark band: heading, three columns, a button.

Bands

Words left, button right

A slim band: one line of words with the button at the right.

Cards

Alternating rows

One card per line, photo beside the words, sides alternating.

Cards

Bento

One large card and smaller ones around it in a mixed-size grid.

Cards

Even grid

Equal cards with photo, title and words, three across.

Cards

Offset tiles

Tall photo tiles three across, captions with numbers.

Cards

Ruled list

A numbered list with rules, small photo thumbnails, words beside.

Cards

Sideways row

Cards in one row that scrolls sideways, the next one peeking.

Feature splits

Card over the photo

A large photo with the words in a card overlapping its edge.

Feature splits

Half-page photo

The photo bleeds to the page edge on one half, words on the other.

Feature splits

Photo above

A wide photo, the words beneath in a readable column.

Feature splits

Photo beside

Framed photo beside the words, sides alternating down the page.

Feature splits

Words in a frame

The words inside a framed panel on a tint, the photo small beside.

Galleries

Even grid

Square photos in an even grid.

Galleries

Film strip

One row of photos scrolling sideways.

Galleries

Masonry

Columns of photos at their own heights.

Galleries

Mosaic

A mixed grid of their photos.

Galleries

Pinned gallery

The section pins; scrolling down moves the photos sideways.

Headers

Bar

Logo at left, the menu beside it, the phone and button at right.

Home heroes

Asymmetric

Huge headline overlapping an offset photo; the details in a ruled column.

Home heroes

Centered stack

Centered headline and buttons on the ground, a wide photo band beneath.

Home heroes

Editorial cover

An oversized headline across the page like a magazine cover, the photo below with a caption line.

Home heroes

Full-bleed photo

Their photo (or slides) edge to edge, headline bottom-left, details bottom-right.

Home heroes

Split: words and a quick form

Headline, phone and promise at left over their photo; a short request form card at right.

Page heroes

Photo banner

Their photo behind the page title.

Page heroes

Title and photo side by side

Title and deck at left on the ground, the photo framed at right.

Page heroes

Title over a photo strip

The title on the ground, a short wide photo strip beneath.

Page heroes

Type only

A large title and deck on the ground with a rule; no photo.

Reviews

Review cards

Two or three review cards side by side.

Reviews

Review marquee

Review cards drifting past in an endless row; hover pauses.

Reviews

Review wall

A masonry wall of reviews of different lengths.

Reviews

Sliding quotes

One big quote at a time, the next peeking, arrows and a count.

Reviews

Spotlight

One quote set huge, centered, the name small beneath.

Steps

Stacked steps

Each step a row: number, photo, words.

Steps

Steps across

Numbered steps side by side in columns with a connecting rule.

Steps

Timeline

A vertical line with numbered nodes and the words beside.

Styles

Design directions with their own type, color, shape and motion rules.

Editorial

Editorial / Magazine

A serif display face, tall photos and hairline rules, like a feature spread.

Editorial

Literary / Bookish

Serif throughout, centered, narrow measure, thin frames, very airy.

Luxe

Luxe Minimal

Thin serif, wide-tracked caps, black and ivory, outlined gold buttons.

Luxe

Quiet Heritage

Classic serif, small caps, arched photos and double rules. Established since.

Modernist

Bauhaus / Geometric

Circles, squares and primaries arranged like a poster.

Modernist

Minimal

Few elements, lots of air, one accent, big quiet photos.

Modernist

Refined Corporate

Trustworthy and clean: soft cards, one confident color.

Modernist

Swiss / International

Strict grid, one grotesk, black and white with one red. Information first.

Natural / Warm

Organic / Earthy

Rounded serif, blob and arch photos, terracotta and olive, a little grain.

Natural / Warm

Rustic / Craft

Slab type, kraft and wood tones, stitched and stamped details.

Natural / Warm

Scandinavian

Soft sans, oak and sage, daylight photos, nothing extra.

Playful

Bold Sunset

Heavy type, offset shadows, orange into magenta. High energy.

Playful

Friendly Rounded

Rounded sans, big radii, soft colored shadows, pastels.

Playful

Memphis / 80s

Squiggles, dots, clashing primaries, highlighter headlines, tilted buttons.

Raw / Expressive

Neo-Brutalist

Thick outlines, hard offset shadows, saturated blocks. Data that shouts.

Tech / Dark

Focused Dark / SaaS

Near-black ground, one glowing mint accent, crisp grotesk.

Tech / Dark

Glass / Gradient

Frosted panels over soft mesh gradients.

Tech / Dark

Terminal / Mono

Monospace, dashed borders, green on black, a blinking cursor.

Moving parts

Things a visitor scrolls, presses or watches. Stills here; they move on a real page.

Carousels

Cover stories

Magazine-style feature slides — photo, kicker, headline, one line — with the cover lines as tabs; it moves on every seven seconds.

Carousels

Storybook pages

The hero reads as a short book: each page turns over in 3D, by itself or by dots, arrows, swipe and keys.

Controls and scenes

Answer finder

Tap the chip that describes what is going on; its answer opens with a little pop and the right next step (call or book).

Controls and scenes

Body map

A calm back-view figure with a soft dot on each area they treat; tap a dot (or its name) and their answer for that area opens beside it, with the next step.

Controls and scenes

Day and night scene

Drag the sun across the sky above a storybook house (or use the slider or a preset); the sky turns from morning to night, the windows glow, and the message for that time swaps in.

Controls and scenes

Draggable gauge

Drag the gauge (or use the arrow keys); the reading, what it means and the message update as it moves.

Controls and scenes

Drawn plan marks

Pick a plan and hand-drawn rings circle the items it includes; ticks draw in beside the promises as the row arrives.

Controls and scenes

Flip-card configurator

Pick options in a few segmented controls and the plan card updates live; tap the card and it flips over to show what is included.

Controls and scenes

Plan toggle

Flip the switch (monthly / yearly, residential / commercial); the thumb springs across and every price rolls to the other set.

Controls and scenes

System finder

Three to five taps (what are you trying to fix, ducts or not, where the unit could go, what matters most) end on the type of system to ask about, one plain sentence why, and the dealer's booking button and phone. No prices or sizes: the dealer sizes in the home.

Controls and scenes

Vehicle picker

A row of drawn vehicles (car, coupe, SUV, pickup, minivan, van, box truck, semi, motorcycle, RV, bus); pick yours and it drives onto a moving road while their answer opens — which truck they send and the call.

Interactive

Color field

A short statement over a slow, living field of the brand's own colors: soft pools drift and blend under a fine grain. Calm, premium, no clicks needed.

Interactive

Custom cursor

The mouse becomes a small dot with a trailing ring that grows over links and buttons and shows a short word ("View") over marked pictures; touch screens keep their normal behavior.

Interactive

Glow buttons

Hover or tab to a main button: a light traces its edge and a soft glow follows the pointer across it.

Interactive

Living cluster

A calm illustration of the row's items as a cluster of breathing nodes, with drifting particles and a slowly turning ring; hovering an item lights its node.

Interactive

Morph icons

A row of small icon tiles; point at, focus or tap one and its icon morphs into its second state (menu to close, sun to moon, plus to check) beside the tile's title and line.

Interactive

Page curtains

Moving between pages, a curtain in the brand color sweeps across, the next page loads behind it and the curtain lifts.

Interactive

Progress rows

Rows fill to their percentage one after another as they come into view, a glowing dot and label landing at the end; pressing a row opens its detail.

Interactive

Quick-action button

A round button in the corner of every page blooms into call, text, book and directions with a springy stagger.

Interactive

Review wheel

A year dial with every review placed at its month; hover, tap or arrow through the marks to read each quote, and filter by topic.

Interactive

Sent check

Send a form: the button becomes a spinner that closes into a drawn check, and the thank-you line appears beneath.

Interactive

Stat rings

Their figures fill rings (or donuts, pies, dot dials) as the row comes into view, each number counting up in the center.

Interactive

Trade loops

A strip of three or four services, each with a small looping line drawing of the trade (a fan turning, a drip falling, rain on a roof) beside its title and line.

Moving type

Blur text scroller

A list of short lines scrolls past a center line; the line in focus is large and sharp while the others blur and fade.

Moving type

Highlighter

Tap a line and a highlighter sweeps across it; a small chip counts what is marked and clears it.

Moving type

Scramble text

A big short line decodes from shuffling glyphs into its words, then cycles to the next line on a timer or a press.

Moving type

Typewriter headline

The end of the headline types itself out, pauses, and cycles through two to five phrases with a blinking caret.

Particles and weather

Bubble field

Iridescent bubbles drift up behind the headline; the cursor pushes them aside and a click or tap pops one into droplets and a ring.

Particles and weather

Weather layer

Snow, rain, leaves or petals fall over the section; a slider (or the time of day) sets how much, and the message changes with it.

Reveals

Notice stack

Recent reviews, finished jobs and bookings land one by one as a fanned stack of notifications; tap the stack to spread them out.

Reveals

Split-text reveal

A big statement rises in word by word (or letter by letter) out of a blur on scroll, then one phrase in it is marked.

Scroll stories

Steps and figure

A pinned figure beside the steps changes picture (or fills a vessel) as each step reaches the middle of the screen; tabs mark progress and jump to a step.

Story engines

Choose your path

The visitor picks the situation that brought them; the headline speaks to it, the page re-orders so the rows that matter for that situation come first (numbered, with why), the rest dim, and a "Your path · change" pill stays on screen.

Story engines

Story atmosphere

The whole page changes state as the visitor scrolls — down into the deep, from day to night, through the four seasons, from cool to oven-hot or from hot to cool — so the scroll tells what the business does.

Story engines

Story companion

A small character rides the page margin as the visitor scrolls, reacts as each section arrives (a bee visits a flower, a pup hops, a plane loops) and ends beside the call to action, pointing at it.

Story engines

Story engine: assembly

Scrolling builds what the business makes, layer by layer: each layer drops into place on a pinned stage with its numbered label beside it, a counter reads "3 of 6", and the finished object ends with a closing line and a button.

Story engines

Story engine: transform

Scrolling turns the before into the after: the same picture moves through each stage of the work, the stage names mark progress along a track with one line per stage, and a handle on the track can be dragged to scrub back and forth.

Story engines

Story journey

As the visitor scrolls, one line draws through the job — pipe, wire, road or seam — lighting each station of the work on the way and arriving at the finished result and the call to action.

Story engines

Story medium

The seams between the page's sections are made of the trade's material, and play once as each section arrives — water swells and settles, suds wipe and pop, a paint roller rolls the next color in, sawdust settles, frost creeps and melts, heat shimmers, steam rises, a broom sweeps, ink bleeds, confetti bursts.

Story engines

Story reveal

The visitor uncovers the story by hand — wipes fog off a window, scratches a card, peels the old layer, shines a torch through a dark attic, slides an x-ray lens over a wall or brushes soil off roots — and past a threshold it finishes itself, labels what was found and shows their line and button.

Story engines

Story simulation

A small cause-and-effect scene the visitor drives — push the wind up and watch the roof hold, deepen the attic insulation and watch the heat stay in and the bill come down, switch their fixtures on in a dark room, or place sprinkler heads and watch the dry lawn turn green — with the business's numbers and line as the result.

Story engines

The check-in

The page opens on the show's own question in display type with three to five honest answers; the visitor taps one, the opener flips to its inverse, the hosts answer back in one line of their own words, and the one conversation that fits plays from its poster. A "You said … · change" pill stays on screen.

Story engines

Time-lapse story

A pinned stage scrubs through weeks or months as the visitor scrolls or drags the timeline: the drawing (or their own progress photos) builds stage by stage while the date, the stage card and a progress calendar keep pace.

Full sites

Whole sites built on the system, for businesses we made up so we can show everything.

Bar

Tin Lantern Brewing Co.

A fictional bar business, built start to finish on the system.

Daycare

Pecan Porch Early Learning

A fictional daycare business, built start to finish on the system.

Daycare

Pecore Street Children's Studio

A fictional daycare business, built start to finish on the system.

Daycare

Two Bayous Early Learning

A fictional daycare business, built start to finish on the system.

Dental

Blalock Oaks Family Dental

A fictional dental business, built start to finish on the system.

Electrical

Oakbrace Electric Co.

A fictional electrical business, built start to finish on the system.

Florist

Hollyhock & Bayou Flower Co.

A fictional florist business, built start to finish on the system.

General contractor

Hardwick Ash Construction

A fictional general contractor business, built start to finish on the system.

Pest control

Screen Door Pest Co.

A fictional pest control business, built start to finish on the system.

Pool service

Pecan Shade Pool Co.

A fictional pool service business, built start to finish on the system.

Remodeling

Sill & Gable Design

A fictional remodeling business, built start to finish on the system.

Restaurant

Sabine & Salt

A fictional restaurant business, built start to finish on the system.

Roofing

Valdez & Pruitt Roofing

A fictional roofing business, built start to finish on the system.