The Playground

A live showroom of what we build.

Ten sections. Every element real. Hover it, click it, open it, play it — then point at what you want for your site.

01. Aesthetic Themes

Six themes to choose from.

Every site begins with one of these six looks. It's a starting point, not a template — we adjust the colors, fonts, and feel to match your business.

Pick the one that feels right. 0 / 1 selected

Airy brand
Clear and
optimistic.

Bright & Airy

High-key whites, soft shadows, generous space.

Heirloom brand
Crafted, warm,
remembered.

Heritage Warm

Creams, tans, traditional serifs. Hand-crafted.

Executive
Serious.
Precise.

Executive Grid

Structured lines, bold sans-serif, navy or charcoal.

Independent
Handmade.
Honest.

Modern Artisan

Earth tones, broken grids, tactile textures.

Boutique
Less.
Beautifully so.

High-End Minimalist

Whitespace, thin lines, photography leading.

Editorial
Quiet power.
After hours.

Midnight / Editorial

Deep navies or charcoals, high-contrast text.

02. Color System

Five roles. Infinite palettes.

A JAW Co. site never uses a single color everywhere. Every palette fills five distinct roles — so your brand feels intentional, not just "pretty." The five cards below are this very site's palette in those roles — a live example of the system at work.

01 Primary

Identity

Orchard Green #5C6B3D. Links, hovers, eyebrows — the always-on brand voice.

02 Secondary

Stability

Barn Charcoal #2E2A26. Body text, primary CTAs, nav — the structural ink.

03 Accent 1

Harmony

Soft Sage #9BA886. Quiet backgrounds, taglines, softer accents.

04 Accent 2

Pop

June Yellow #D4C95E. Signature accent. Used rarely, deliberately.

05 Neutrals

Canvas

White #FFFFFF + Harvest Cream #F5EFE0. White leads; cream warms.

How industries tend to lean.

Not rules — just patterns. Advisory brands often reach for navy, wellness for sage, hospitality for terracotta. These six are a starting point to tune from, not a template to stay in. Your palette might borrow from any of them, all of them, or none.

Financial & Advisory

Navy, soft blue, gold, cream, white. Serious and trustworthy.

Wellness

Sage, warm taupe, coral accent, cream, white. Restorative.

Legal & Professional

Charcoal, burgundy, muted gold, cream, white. Established.

Hospitality

Terracotta, olive, cream, warm ink, white. Inviting.

Creative & Agency

Black, single bright pop, soft grays, off-white, white. Bold.

Faith & Ministry

Warm navy, soft gold, warm stone, cream, white. Reverent.

Where are you starting from?

Tell us what you’ve already got.

Wherever you’re starting is the right place. We build from a full brand, from just a logo, from just a color palette, or from scratch. Pick whichever describes you — there’s no wrong answer.

03. Typography Pairings

Six proven pairings, live on the page.

Each card renders its pairing in place — headline, subhead, body, and the weight variations we use within it.

Pick one pairing. 0 / 1 selected

01 · JAW Co. current
Georgia + Inter
Studio

Built with care.

Small studio posture.

Warm serif, sharp sans. What JAW Co. uses across its own site.

Georgia 400/ItalicInter 400/500/600
02 · Editorial luxury
Playfair Display + Inter
Editorial

Elegant confidence.

Premium without posturing.

High-contrast serif up top, crisp modern body.

Playfair 400/700Inter 400/500
03 · Heirloom
Cormorant + Inter
Legacy

Reverent and warm.

A serif with memory.

Gentle old-world feel, modern legibility. Used on Living Legacy.

Cormorant 400/500/600Inter 400/500
04 · Advisory
DM Sans + Georgia
Advisory

Grounded authority.

Sharp sans, warm serif.

Quiet confidence. Used on The Sounding Board.

DM Sans 400/500/700Georgia Italic
05 · Friendly modern
Montserrat + Lora
Wellness

Open and approachable.

A welcoming register.

Confident without being cold. Lora adds warmth through its book-like body.

Montserrat 300/400/700Lora 400/500
06 · Editorial warmth
Playfair Display + Lora
Publication

Rich and considered.

A magazine voice.

Bold serif display with a softer serif body. For brands with a point of view.

Playfair 400/700Lora 400/Italic
04. Hero Treatments

Four ways to open a page.

Each card below is a real hero from a live client site. Pattern first, client second.

Pick one hero treatment. 0 / 1 selected

01 · Full-bleed editorial
The Sounding Board
Boardroom-at-dawn, sage palette, editorial type.
02 · Dark hero & stats
4EMC DJ Services
Big italic headline, periwinkle detail.
03 · Split canvas
Patio Shades DFW
Product left, story right. Mango accent.
04 · Typography-first
Builder. Better. Best.
Deep navy with a quiet three-grade promise.
05. Navigation Bars

Eight nav patterns — four desktop, four mobile.

Every nav demonstrated here is fully interactive. Hover, click the hamburger, try the dropdown.

Pick one desktop + one mobile. 0 / 2 selected

Desktop 01 — Left logo, right links + CTA The JAW Co. default · solid charcoal pill
Desktop 02 — Centered logo, split links Editorial posture · text-link CTA
Desktop 03 — With dropdown sub-menu Click "What We Build" to open · ghost outline CTA
The StarterThe EssentialThe ShowcaseCare Plans
Desktop 04 — Minimal, logo + single CTA For single-page or boutique sites · signature yellow pill
Mobile 01 — Hamburger, slide-down panel Click the hamburger
Mobile 02 — Hamburger left, logo center, CTA right Balanced tri-column
Mobile 03 — Top logo + bottom tab bar App-style navigation
Home
Work
Studio
Contact
Mobile 04 — Condensed, no hamburger For 3-4 link sites
06. Section Patterns

Nine ways a section can compose itself.

The structural library. Each of these is a building block we use to arrange your content.

Pick any that speak to you. 0 picked selected

01.

Split Canvas

Two halves, balanced. Image left, text right (or vice versa).

02.

Stacked Alternation

Rows that alternate side to side down the page.

03.

Three-Column Grid

Classic triptych for services, features, or principles.

"A full-bleed quote."
04.

Full-Bleed Quote

A dark band carrying one italic pull quote across the page.

7
29
100%
3 wk
05.

Stats Strip

Four numbers, one line each, proof in under a second.

06.

Image Mosaic

Mixed-weight photo grid. One hero, three supporting shots.

07.

Sticky Side-by-Side

Left column pins while right content scrolls past.

How long…?
Do you host?
What about care?
Can I add pages?
08.

Accordion Stack

FAQ-style expandable rows. Compact and scannable.

09.

Dual-Theme Panel

Two visual registers side-by-side. One component, two worlds.

07. Carousels

Six carousels, six arrow styles.

Every JAW Co. carousel has a fixed content-area height so the section never jumps. Each mini-carousel demonstrates a different motion AND a different arrow control style.

Pick up to two. 0 / 2 selected

Cross-fade · circle outline arrows
Editorial pacing.

"Warmly and clearly."

"Small. Sharp. Built with care."

"Proof we use what we sell."

Horizontal Slide · filled square arrows
Classic, clean.
01

Discovery

One call. Your business, your voice, your audience.

02

Design & Build

We design in a real link. You respond in real time.

03

Launch

Domain, SSL, analytics, sitemaps — all handled.

Ken Burns · arrow-only (no container)
Cinematic pan.
"They built us the first site that felt like our backyard."
"Boardroom-at-dawn. Exactly right."
"Navy and quiet confidence."
Testimonial Fade · text prev/next
Voices, one at a time.
"They took the time to understand what we do."
— Advisory client · Placeholder
"Launched in under three weeks. Zero surprises."
— Service business · Placeholder
"Warm and clear. People comment on it constantly."
— Boutique client · Placeholder
Centered Peek · large prominent arrows
3-up coverflow, previous + next visible.
"A warm studio."
"Small. Sharp."
"Built with care."
"Warmly and clearly."
"Proof we use what we sell."
Card Stack · numbered pagination
Cards peek behind the front.
"Stage I. Discovery."
"Stage II. Design & Build."
"Stage III. Launch."
01 / 03
08. Scroll Effects

Six motions, on demand.

Click Play it on any card to see the effect run. Each one is a scroll-triggered animation used on real client sites.

Pick up to three. 0 / 3 selected

01 · Fade-up

Staggered fade-up.

The universal "something just arrived" feel.

02 · Stagger

Four elements, in sequence.

For rows of stats, features, or icons.

03 · Slide

From either side, meeting.

Great for split-canvas sections.

04 · Parallax

Layers moving at different rates.

Subtle depth. Hero sections with layered content.

05 · Sticky Pin

Pinned label, scrolling content.

For process timelines or step-by-step explainers.

Pinned
06 · Dwell Bloom

Desaturated to color.

A single focus point blooms into brand color.

09. Hover Card Lab

Six ways a card can feel alive.

Hover any card. Each one demonstrates a different interaction style.

Pick at least one, up to all six. 0 / 6 selected

01 · Top Accent Rail

A quiet rail on hover.

Our most common pattern. Used on TSB, BBB, and the JAW Co. Portfolio.

02 · Border Reveal

The full border lights up.

A touch warmer, for cards where the outline is the main visual element.

03 · Lift & Shadow

Classic lift and deeper shadow.

The universal signal that a card is interactive.

04 · Color Flood

Full flood to brand color.

For cards that need to feel like a real call to action.

05 · Underline Grow

A growing underline.

Editorial, quiet. Used on Living Legacy's heritage sections.

06 · Reveal Extra

A line appears on hover.

Good for cards that want to suggest more without crowding the default state.

→ Read more ·
10. Image Framing

Six ways to present an image.

The frame around a photo does more work than you'd think. Six styles — pick what fits your brand and your subject matter.

Pick up to three. 0 / 3 selected

Before exampleBefore
01 · Overlay Pill Label

Subtle label, photo-forward.

For before/after or pattern callouts. Pill floats over the photo with backdrop blur.

Small-business owner
Working outside
02 · Top Accent Rail Card

Team-member card with brand rail.

White card, top accent in brand color, centered photo and caption.

A warm studio.
Quiet tools, intentional work.
03 · Corner Bracket Accent

An editorial corner detail.

Cream ground, green L-bracket, soft shadow. For founder sections.

"At the wheel."
04 · Polaroid

Hand-held, slightly tilted.

A warm personal treatment. For lifestyle and human-touch brands.

Team Member
Role · City
05 · Circular Crop

Headshot, classic.

Circular crop, soft shadow. Team directories, testimonial portraits.

"Quiet corners."
A small interior study.
06 · Full-Bleed + Caption

Photo fills, caption floats.

Full-width image with a bottom-gradient caption. Editorial hero sections.

Your picks

Ready to start your project?

Here’s what you selected as you scrolled. Add a few details on the right and we’ll take it from here.

Your selections

Scroll back up and tap Select on the pieces that speak to you. Your picks will show up here.

We review every submission personally. You’ll hear back within 48 hours — often same day.

✓

Got it. Thank you.

We’ll be in touch.