Design System Preview
lorem ipsum dolor — lorem ipsum

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem, lorem ipsum, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. computed style lorem ipsum dolor.

lorem ipsum dolor DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
Brand Orange
#e95513
lorem ipsum dolor / lorem / CTA
Deep Red
#990d0d
lorem ipsum dolor / lorem ipsum
Text
Text Primary
#333333
lorem ipsum dolor(lorem ipsum dolor)
Text Secondary
#666666
lorem ipsum / lorem ipsum dolor
Text Muted
#999999
lorem / lorem ipsum dolor
Text Date
#aaaaaa
lorem ipsum dolor / lorem
Background & Surface
Page Background
#fafafa
lorem ipsum(lorem ipsum dolor)
Surface
#ffffff
lorem / lorem ipsum
Warm Beige
#efe8e4
lorem ipsum dolor(lorem)
Light Blue
#e4edfc
lorem ipsum dolor(lorem)
Light Green
#d2eae1
lorem ipsum dolor(lorem ipsum)
Border
#e0e0e0
lorem ipsum / lorem ipsum
02 / Typography — lorem

lorem ipsum dolor sit

lorem ipsum dolor — Logo (32px)
32px / 700 / line-height: 1.5 / letter-spacing: 0.8px / color: #e95513lorem
lorem ipsum dolor — Heading 1 (h1)
32px / 700 / line-height: 1.5 / letter-spacing: 0.8px / palt: loremlorem
lorem ipsum dolor — Heading 2 (h2)
24px / 700 / line-height: 1.5 / letter-spacing: 0.8px / palt: loremlorem ipsum
lorem ipsum dolor — Body Bold (16px)
16px / 700 / line-height: 1.5 / letter-spacing: 0.8pxlorem ipsum
lorem ipsum dolor — lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing elit. letter-spacing: 0.8px lorem ipsum dolor sit amet consectetur adipiscing. ABCabc 123
16px / 400 / line-height: 1.5 / letter-spacing: 0.8pxlorem
lorem / lorem ipsum — Small Bold (14px)
14px / 700 / line-height: 1.5 / letter-spacing: 0.8pxlorem
lorem ipsum dolor sit amet — Nav Sub (13px)
13px / 700 / line-height: 1.5 / letter-spacing: 0.8px / color: #666lorem ipsum
lorem ipsum dolor > lorem ipsum > lorem — Breadcrumb (13px)
13px / 400 / line-height: 1.5 / letter-spacing: 0.8px / color: #e95513lorem ipsum
lorem ipsum dolor — Caption (13px)
13px / 700 / line-height: 2.46 / letter-spacing: 0.8px / color: #999lorem ipsum dolor
04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Primary (pill)
lorem
CTA White
lorem ipsum dolor sit
Outline (pill)
lorem ipsum dolor
Ghost
05 / Cards — lorem ipsum

lorem ipsum dolor sit

2026.05.22

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur.

lorem ipsum →
2026.05.15

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur.

lorem ipsum →
2026.05.10

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur.

lorem ipsum →
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #e0e0e0, radius: 0
lorem ipsum — border: #e95513 (Brand Orange)
lorem ipsum dolor sit amet consectetur adipiscing
lorem — border: #cc0000
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor
--elevation-1
lorem, lorem ipsum dolor sit
--elevation-2
lorem, lorem ipsum dolor
--elevation-3
lorem ipsum, lorem ipsum dolor
08 / Layout

lorem ipsum / lorem ipsum dolor

Spacing Scale
4px
8px
16px
24px
32px
48px
64px
Content Widths
Container 1200px
Main Content 920px
Sidebar 280px
Section Backgrounds
Warm Beige
#efe8e4
Light Blue
#e4edfc
Light Green
#d2eae1