Style Guide

Your Business Name ยท Design System Reference

Colors

Primary --sky #0ea5e9
Primary Dark --deep #0369a1
Primary Darker --deeper #0c4a6e
Primary Light --water #bae6fd
Accent --sun #f59e0b
Accent Warm --sun-warm #fbbf24
Secondary --sand #c4a882
Secondary Light --sand-light #e8d5b7
Secondary Dark --sand-dark #8a6e4a
Background --dark #0b1220

Typography

Heading ยท Playfair Display

The quick brown fox jumps over the lazy dog

Hero Heading Section Title Card Title
Body ยท DM Sans

The quick brown fox jumps over the lazy dog

Light 300 โ€” Body copy and descriptions Medium 500 โ€” Labels and pills Semibold 600 โ€” Card headings and emphasis Bold 700 โ€” Buttons and CTAs

Buttons

Components

Section Eyebrow

Eyebrow Text

Section Title

Section title goes here.

Section Subtitle

A supporting description that provides more context about the section. Keeps things readable and concise.

Offer Badge
Now Accepting New Clients
Availability Badge
Premium Service
Location Pill
City One City Two City Three
Trust Line
No contracts ยท No hidden fees ยท Free quote
Include Card
๐Ÿ”ง

Card Title

Description of what this service includes and why it matters to the customer.

Review Card
โ˜…โ˜…โ˜…โ˜…โ˜…

Sample review text that a customer might leave about your service.

AB
Alex B.
Google Review
Area Tile
๐ŸŒ…
City Name
Now accepting clients

Spacing & Layout

--radius 16px โ€” Default border radius
Section padding 80px 32px (desktop) ยท 60px 20px (mobile)
Max content width 1100px
Card radius 20pxโ€“24px
Pill radius 50px (fully rounded)

Breakpoints

900px Tablet โ€” grids collapse to single column, text centers
600px Mobile โ€” sticky bar becomes static, mobile call bar activates, single-column grids