Design system
Every colour, text style and component in this template, with a note on when to use each. Change a style here and it changes on every page.
Colors
Fifteen colour styles. Every one has a light and a dark value, so the theme toggle works without extra work. Use the styles, never a raw colour.
Color/Background
Page background on every page.
Color/Surface Muted
Section bands, FAQ rows, cards that sit on the background.
Color/Surface
Cards and panels on a muted band, nav menus, inputs.
Color/Border
Card outlines and section dividers.
Color/Border Strong
Dividers inside cards, fact rows, dots.
Color/Text Primary
Headings, labels, primary button fill.
Color/Text Body
Paragraphs and leads.
Color/Text Muted
Meta, captions, secondary labels.
Color/Accent
Hover state of primary buttons and links only.
Color/Accent Soft
Quiet tags behind accent text. Use rarely.
Color/Text On Primary
Text on a Text Primary fill (primary buttons).
Color/Surface Dark
The announcement bar and fixed dark panels.
Color/Text On Image
Text and icons over photos or Surface Dark.
Color/Glass
Frosted frame around product screens.
Color/Success
Status icons and positive numbers.
Typography
Geist Serif for display and headings, Satoshi for everything else. Pick the style by role, never set a font size by hand.
Text/Display
Hero heading, once per site.
Senior product design
Text/H1
Page title (h1) on inner pages.
Six services, one senior team
Text/H2
Section titles.
Kickoff to launch in 8 to 16 weeks
Text/H3 Serif
Split titles in case studies and service pages.
Text/Large
Panel and form titles.
Text/H3
Card titles.
Text/H4
Small titles inside cards.
Text/Quote
Testimonial quotes.
Text/Stat
Big numbers (they count up when named Stat Value).
Text/Price
Plan prices.
Text/Lead
The paragraph under a page or section title.
Text/Body
Paragraphs.
Text/Small
Card text, meta and fact rows.
Text/Label
Names, list items, link labels.
Text/Caption
Tags, notes, footnotes.
Text/Button
Button labels (inside the Button component).
Text/Nav
Navigation links.
Components
Reuse these instead of building new ones. Each card shows every variant; set the variant in the right panel.
Button
Primary for the main action, Secondary next to it, Light on dark or photo backgrounds.
Text Link
Inline links like “View all work”. Light on dark backgrounds.
Default
Light
FAQ Item
One question per item. Bound to the Questions collection on every page.
Closed
How soon can you start?
Open
How soon can you start?
Usually within three weeks of signing.
Submit Button
Form submit button with its four states.
Default
Pending
Success
Error
Announcement
The bar above the nav. Change the text or close it.
Plans
Pricing cards with the monthly / quarterly switch.
Monthly
Quarterly
Work Tabs
Auto-sliding case studies, pauses on hover.
Halyard
Review Carousel
Reviews from the Reviews collection, centre card large.
Example sections
Sections built only from the styles and components above: a FAQ block and the closing CTA card that ends every page.
Questions about our services
Which tools do you use?
Do you build the product too?
Can we hire you for research only?
Ready to start your project?
Tell us about your product and your goals. We’ll get back to you within one working day.
Use this free template ↗