Style guide
The design system behind this site
Every colour, size and motion below is read live from the CSS of this very website. Nothing here is a screenshot, so it can never go out of date. This is the level of system we build for your brand.
Colour
Gold on deep plum
Tap any swatch to copy its hex. The hex is worked out from the live custom property, so if the CSS changes this page changes too.
Type
A serif that sells, a sans that reads
Display headings use Cormorant Garamond. Everything else uses Inter. Sizes scale with the screen, so the numbers below are what you see on your device right now.
Space, radii and shadows
Generous space, soft corners
Measured from real components (section, grid, card, panel, button, field), not typed in by hand.
Corner radii
Shadows and glow
Buttons
Every button, every state
Pill-shaped, at least 54px tall, with a visible keyboard focus ring. The Hover and Focus columns are pinned so you can compare them; hover or tab to any live one to feel it.
Cards and tags
Cards that frame the offer
The same card and tag styles used on the Packages and Services pages.
From
Website
$1,250 starting price
- Custom design, phone first
- 2 rounds of changes
- Files are yours
Plain card
A title, a sentence and room to breathe. Borders use the line colour; the fill is a faint gradient.
Text linkQuote
A short sentence a customer might say, set in the display serif.
Name, business
Sample card text is placeholder copy for the style guide, not a real price list or review. See real packages and prices.
Forms
Fields people finish
Large tap targets, clear labels, visible focus and plain-language messages. These fields are display-only; nothing is sent.
Chips
Logo
Z, an arc, A
The mark joins Z and A with one gold arc, a connection. It scales from the nav bar down to a browser tab.
Nav lockup · mark + wordmark
Full logo + slogan
App icon · favicon
Motion
Smooth, never in the way
One easing curve runs the whole site. It starts quickly and settles softly. Linear is shown last, so you can feel the difference.
Icons
One line style, everywhere
0 icons, collected live from this page's own menus. 24px grid, 1.6px round strokes, gold.
Your turn
Want a system like this for your brand?
We design the colours, type, logo and components once, then build every page from them, so your site stays consistent as it grows.