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

Primary CTA
Call (555) 000-0000 Tap to call · free quote
Primary Large Call (555) 000-0000
Header CTA Call to Schedule
Card CTA Schedule Your First Visit

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