DESIGN SYSTEM PREVIEW

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 sit DESIGN.md lorem
01 / Colors

COLORS

lorem ipsum dolor
BRAND
Brand Crimson
#b70031
lorem / CTA / lorem
Accent Teal
#44c1bb
lorem ipsum dolor
Accent Red
#ee4540
lorem ipsum dolor
Accent Purple
#5e2c47
lorem ipsum dolor
TEXT
Text Primary
#0e1618
lorem(lorem near-black)
Text Secondary
rgba(14,22,24,0.6)
lorem ipsum dolor
Black
#000000
lorem UI lorem
White
#ffffff
CTA lorem / lorem
TAG / BADGE
Tag Blue
#355e7e
lorem ipsum dolor sit
SURFACE & BORDER
Background
#ffffff
lorem ipsum
Surface
#f6f7f9
lorem ipsum dolor
Border
#cccccc
lorem ipsum dolor
Border Footer
#b6b9b9
lorem ipsum dolor
02 / Typography

TYPOGRAPHY

lorem ipsum dolor sit — lorem
SECTION HEADING
Barlow 36px / 300 / line-height: 1.0 / letter-spacing: 4pxlorem ipsum dolor(lorem)
PRODUCTS
Barlow 32px / 300 / line-height: 1.0 / letter-spacing: 4pxlorem ipsum dolor(lorem)
“lorem”lorem ipsum dolor sit amet consectetur
30px / 400 / line-height: 1.66 / letter-spacing: 4pxlorem ipsum dolor(lorem)
lorem ipsum — Page Title (sub)
18px / 400 / line-height: 1.68 / letter-spacing: 1pxlorem ipsum dolor
ABOUT US lorem ipsum — H3 Corporate
16px / 700 / line-height: 1.68 / letter-spacing: 1pxlorem ipsum dolor sit
lorem ipsum dolor sit amet consectetur“lorem ipsum”lorem ipsum — H3 Article
14px / 500 / line-height: 1.68 / letter-spacing: 1pxlorem ipsum dolor sit
lorem ipsum dolor — lorem ipsum dolor 1913 lorem ipsum dolor, MONO lorem ipsum dolor sit amet consectetur adipiscing elit. lorem, lorem, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. YakuHanJP lorem ipsum dolor“lorem”lorem, lorem ipsum dolor sit amet consectetur.
14px / 400 / line-height: 1.68 / letter-spacing: 1pxlorem
lorem ipsum dolor — Nav Link (12px)
12px / 600 / line-height: 1.68 / letter-spacing: 1pxlorem ipsum dolor
lorem ipsum dolor —lorem ipsum — Breadcrumb (11px)
11px / 400 (current: 700) / line-height: 1.68 / letter-spacing: 1pxlorem ipsum dolor
lorem ipsum dolor
10px / 600 / line-height: 1.0 / letter-spacing: normallorem ipsum
03 / Product

PRODUCT

lorem ipsum dolor sit amet
BRAND

lorem ipsum dolor 1913 lorem ipsum dolor, lorem, lorem, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. MONO lorem ipsum dolor sit amet, ABT lorem ipsum dolor sit, PiT lorem ipsum, lorem ipsum dolor sit amet consectetur adipiscing.

MONO lorem ipsum

1969 lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing. lorem / lorem / lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit.

ABT lorem ipsum dolor sit

lorem ipsum dolor sit amet consectetur 2 lorem ipsum dolor sit amet consectetur. lorem ipsum, lorem ipsum, lorem ipsum dolor sit, lorem ipsum dolor. lorem 108 lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.

04 / Buttons

BUTTONS

lorem ipsum dolor sit
lorem ipsum dolor sit
Primary CTA
radius: 24px
lorem ipsum dolor
Ghost (footer)
radius: 16px
lorem ipsum dolor
Ghost Small
radius: 16px / 10px
lorem ipsum dolor
Tag Badge
radius: 4px / 10px
05 / Cards

CARDS

lorem ipsum dolor sit
lorem ipsum dolor
2026.06.15

lorem ipsum dolor sit amet consectetur“lorem ipsum”lorem“lorem ipsum dolor sit”lorem

lorem ipsum dolor →
lorem ipsum dolor
2026.06.01

MONO lorem ipsum dolor 55 lorem ipsum dolor sit amet 3 lorem ipsum

lorem ipsum dolor →
lorem ipsum
2026.05.20

ABT lorem ipsum dolor sit amet 12 lorem ipsum, lorem 108 lorem ipsum

lorem ipsum dolor →
06 / Forms

FORMS

lorem ipsum dolor(lorem ipsum)
lorem ipsum — border: #cccccc, radius: 4px
lorem ipsum — border: #b70031 (Brand Crimson)
lorem ipsum dolor sit amet consectetur adipiscing
lorem — border: #cc0000
07 / Elevation

ELEVATION

Depth & Elevation
Level 0: Flat
lorem(lorem ipsum)
Header
rgba(128,130,131,0.2) 0 5px 10px
Elevation 1
lorem ipsum(lorem)
Elevation 2
lorem ipsum dolor(lorem)
Elevation 3
lorem ipsum(lorem)
Focus Ring
#b70031 (Brand Crimson)
08 / Layout

LAYOUT

lorem ipsum dolor sit
4px
8px
16px
24px
48px
80px
lorem ipsum dolor
Main Container 1200px
Content Area 940px
Article 620px