{Design system}
The sticker sheet.
Every color, type style, button, card and scroll pattern we use, ready to copy into the next page. Confident, editorial, no filler.
{Colors}
One dark base, warm whites, a single red accent.
Dark
rgb(14, 14, 14)
Dark grey
rgb(22, 22, 21)
Light grey
rgb(31, 30, 28)
White
rgb(251, 250, 247)
BG color
rgb(244, 242, 238)
Accent color
rgb(194, 65, 45)
Accent dark
rgb(158, 51, 34)
Accent light
rgb(217, 87, 63)
Dark 60%
body text
Dark 10%
hairlines on light
White 60%
body text on dark
White 10%
hairlines on dark
{Typography}
Clash Grotesk for headlines. Inter Display for reading. Geist Mono for captions.
HEADING 1
Clash Grotesk 600 / 82
Your goals, our priority.
HEADING 2
Clash Grotesk 600 / 60
How we work, in numbers.
HEADING 3
Clash Grotesk 600 / 40
Three steps. No guesswork.
HEADING 4
Clash Grotesk 600 / 24
Editorial-grade design
HEADING 5
Clash Grotesk 600 / 20
Customer-first UX
BODY 1
Inter Display 600 / 24
First impressions, engineered.
BODY 2
Inter Display 500 / 22
Websites and growth systems for premium brands. Built to convert, measured every month.
BODY 3
Inter Display 500 / 20
Sites that feel like a luxury brand, not a directory listing.
BODY 4
Inter Display 500 / 16
Every page is designed around how your clients actually research, compare and decide.
CAPTION TEXT
Geist Mono 600 / 14, uppercase brace labels
{Services}
NUMBER LARGE
Inter Display 600 / 60
100+
NUMBER SMALL
Geist Mono 500 / 12
01 / 03
{Buttons and links}
Rolling-text buttons and links. Primary is dark, secondary is outlined.
{Components}
Cards pull from CMS or take plain text. Swap the variant per breakpoint.
Emma Carter
[CREATIVE DIRECTOR]
{Motion}
Three motions carry the whole site: rise, pin, cover.
Rise on load
Headline and copy slide up 100px and fade in. Spring, 1s, 0.2 bounce, 2s delay.
Image settle
Hero media scales from 1.4 to 1. Tween, ease 0.55/0.01/0.41/1, 1s, 1.6s delay.
Pin and cover
Sticky sections pin at top 0 while the next section, higher z-index, slides over.
Scroll reveal
Diagonal text reveal and scroll-target transforms. Spring 500/40 or 400/60.
Variant on scroll
Cards swap variants as each section enters view. Threshold 1, replay on.
Ticker
Logo strip loops at velocity 50. Hover slows to 100%, not draggable.
PATTERN 01 / {Hero}
Hero + sticky image reveal
Pinned video with a rolling headline. The next section slides up over it. Opens a page.
PATTERN 02 / {Content}
Stacked service cards
Dark cards that swap variants as you scroll. Best for 3 to 5 offers.
{Services}
Everything your brand needs to be seen and chosen.
PATTERN 03 / {Gallery}
Case study grid
CMS-driven two-column grid of case study cards with a short intro.
{projects}
We partner with premium brands, from aesthetic practices to premium brands, to launch websites that look as good as the work behind them.
PATTERN 04 / {Features}
Benefit cards on dark
Headline plus three cards: image, quote, and a big numeral.
CUSTOMER-FIRST UX
Every page is designed around how your clients actually research, compare and decide.
EDITORIAL-GRADE DESIGN
Sites that feel like a luxury brand, not a directory listing.
You work directly with the designer. No account managers, no handoffs.
PATTERN 05 / {Sticky}
Sticky metrics + slide-over
Impact stays pinned with counting metrics while the next section covers it.
{impact}
How we work, in numbers
Fewer meetings, faster launches, and a website edit that's just one phone call away.
{Process}
Three steps. No guesswork.
Audit
We look at your site, your reviews and how fast your inquiries get answered, and show you exactly where clients are slipping away.
01
Build
Brand, website and the systems behind it, designed and launched together.
02
Measure
Every month you get a clear report on inquiries, bookings and reviews, and what we're improving next.
03
PATTERN 06 / {Journal}
Notes from the studio
Blog cards in a row with a header and a link.
PATTERN 07 / {Contact}
CTA section
Full-width form on a texture. Closes the page.
