Design System v1.0

[Your Brand]

A single source of truth for how the brand looks, sounds, and behaves across every surface.

01 — Foundation

Color Palette

Use primary for CTAs and accents. Use neutrals for surfaces, dividers, and supporting text.

Primary
#2C5F2D
Primary Dark
#1F4520
Primary Light
#97BC62
Accent
#C9A55C
Dark
#0F1419
Ink
#1A1A1A
Ink Muted
#5C5C5C
Neutral
#E5E2DC
Background
#FAFAF7
Success
#4A7C59
Warning
#D4882A
Error
#C04A3C
02 — Foundation

Typography

Heading face: Fraunces. Body face: Inter. Keep line lengths under 75 characters.

H1 / Display — Fraunces 64
The headline that opens the page.
H2 — Fraunces 48
A section-opening statement.
H3 — Fraunces 32
A supporting subsection title.
H4 — Fraunces 24
Card or component heading.
Body Large — Inter 18
Used for hero subheads and lead paragraphs. Keep tone confident and direct.
Body — Inter 16
The default text size. Most paragraphs, list items, card descriptions, and form labels live here.
Small — Inter 13
Captions, helper text, footnotes, metadata.
Mono — SF Mono 14
code_snippets, hex_values, api_keys
03 — Components

Buttons

Primary for one action per view. Secondary for alternatives. Ghost for low-priority.

04 — Components

Cards

Use for feature blocks, pricing tiers, content modules.

1

Discover

Surface insight before competitors do. Identify the buyers ready to move, not just the ones on a list.

2

Engage

Reach prospects with the right message at the moment intent peaks. No more generic outreach.

3

Convert

Move qualified opportunities through pipeline with systems that compound instead of breaking down.

05 — Components

Badges & Status

Inline status indicators for tables, lists, and inline labels.

Active Pending Failed In Review Draft
06 — Components

Forms

Single column. Labels above inputs. Clear focus states.

We'll never share this with anyone.
07 — Patterns

Navigation

Top nav for marketing sites. Keep to five items + CTA.

Product Solutions Pricing Resources About
08 — Composition

Page Preview

Components composed into a real homepage section.

The category-defining headline.

One sentence that explains who you serve, what you do, and the outcome they get. Nothing else.

$100M+
Revenue Impact
40%
Time Saved
500+
Companies Served
18mo
Avg. Payback
"We rebuilt our entire GTM around this system. Pipeline coverage tripled in two quarters."
— Customer Name, Title at Company

Make it yours.

Edit the CSS variables, swap the fonts, replace the copy. The structure stays the same.

Design System Template · Built for Pavilion class by Scott Wueschinski · GTMify.io