Design System Preview
KAI (lorem) — 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 font-weight: 300 lorem ipsum dolor sit.

01 / Colors

lorem ipsum dolor

Brand
KAI Blue
#094da4
lorem ipsum dolor / lorem
KAI Blue Dark
#073d83
lorem / lorem ipsum
Text
Text Primary
#242424
lorem ipsum dolor
Text Nav
#333333
lorem ipsum dolor
Text Muted
#5f5f5f
lorem ipsum dolor / lorem ipsum dolor
Text on Dark
#ffffff
lorem ipsum dolor sit
Surface & Border
Background
#ffffff
lorem ipsum
Surface Gray
#f7f7f7
lorem ipsum dolor
Surface Footer
#f6f6f6
lorem ipsum dolor
Border Default
#cccccc
lorem ipsum / lorem ipsum
Semantic
Danger
#c0392b
lorem / lorem
Success
#27ae60
lorem / lorem
Warning
#e67e22
lorem / lorem
02 / Typography

lorem ipsum dolor sit

KAI lorem
28px / 300 (Light) / line-height: 1.0 / palt: loremlorem (h1)
lorem ipsum dolor — Section Title (h2)
20px / 700 / line-height: 1.7 / letter-spacing: 0.05em / palt: loremlorem ipsum dolor
lorem ipsum dolor sit — Nav Item (h3)
14px / 400 / line-height: 1.71 / palt: loremlorem ipsum dolor
lorem ipsum dolor — font-weight: 300 lorem ipsum dolor. KAI lorem ipsum Light lorem ipsum dolor sit, lorem ipsum dolor sit“lorem ipsum dolor sit”lorem ipsum dolor. letter-spacing: 0.05em lorem ipsum dolor sit amet consectetur.
14px / 300 (Light) / line-height: 1.75 / letter-spacing: 0.05em / palt: loremlorem
lorem ipsum dolor sit amet — Nav Link (13px / 500)
13px / 500 / line-height: 1.54 / letter-spacing: 0.05emlorem ipsum dolor
lorem ipsum dolor sit — Footer Button (16px / 600)
16px / 600 / line-height: 1.75 / color: KAI Bluelorem ipsum
lorem ipsum dolor — Footer Link (12px / 600)
12px / 600 / line-height: 1.75lorem ipsum
lorem ipsum dolor / lorem ipsum dolor — Caption (11px / 300)
11px / 300 / line-height: 1.5
03 / Article — lorem ipsum dolor

lorem ipsum dolor sit amet

lorem ipsum dolor, lorem ipsum

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

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet consectetur, lorem ipsum, lorem ipsum dolor sit amet consectetur. “lorem”lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor. ABC abc 123 lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor, lorem ipsum, lorem ipsum dolor sit, lorem ipsum dolor. “lorem”lorem ipsum dolor, lorem ipsum dolor sit.

04 / Buttons

lorem ipsum dolor sit

lorem ipsum
Nav Link (lorem ipsum)
lorem ipsum dolor
Footer Action
lorem ipsum
Outline
lorem ipsum dolor
Blue CTA
lorem ipsum →
Text Link
05 / Cards

lorem ipsum dolor sit

lorem ipsum

lorem lorem ipsum lorem ipsum

33 lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur, KAI lorem ipsum dolor sit.

lorem ipsum →
lorem ipsum

AUGER lorem ipsum

lorem ipsum dolor sit amet consectetur 5 lorem ipsum. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.

lorem ipsum →
lorem ipsum

SELECT100 lorem ipsum

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

lorem ipsum →
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #cccccc, radius: 0px, weight: 300
lorem ipsum — border: #094da4 (KAI Blue)
lorem ipsum dolor sit amet consectetur
lorem — border: #c0392b (Danger)
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor(lorem)
Level 1
0 2px 4px rgba(0,0,0,0.08)
Level 2
0 4px 12px rgba(0,0,0,0.12)
Level 3
0 8px 24px rgba(0,0,0,0.15)
Focus Ring
#094da4 (KAI Blue)
08 / Layout

lorem ipsum dolor sit amet consectetur

Spacing Scale
8px
16px
24px
32px
64px
100px
Content Widths
Page Max Width 1200px
Content Area 940px
Article Body 620px