Brand Design System

A complete design system built from Figma tokens. Typography, colors, buttons, cards, and shadows — all synced from your design file.

Typography

Heading 1 — Inter Bold 48/56

Heading 2 — Inter Semi Bold 36/44

Heading 3 — Inter Semi Bold 28/36

Heading 4 — Inter Medium 24/32

Heading 5 — Inter Medium 20/28

Heading 6 — Inter Medium 18/24

Body Large (18/28) — Used for introductions and lead paragraphs that need extra emphasis.

Body (16/24) — The default text for all paragraphs and content blocks on the site.

Body Small (14/20) — Secondary content, captions, and supporting text.

This is a link — Links use the primary brand color with underline.

Colors

Primary

#9BF8BD

Secondary

#5B9863

Accent

#E85D75

Success

#22C55E

Warning

#F59E0B

Error

#EF4444

Info

#3B82F6

Surface

#FFFFFF

Surface Alt

#F5F5F5

Border

#E0E0E0

Text Muted

#666666

Text Light

#999999

Buttons

Primary

Secondary (Outline)

Ghost

Cards

Default Card

Card content showing brand typography and spacing applied to a real component.

Elevated Card

Card content showing brand typography and spacing applied to a real component.

Outlined Card

Card content showing brand typography and spacing applied to a real component.

Shadows

Small

0 1px 3px

Medium

0 4px 12px

Large

0 8px 24px

XL

0 16px 48px