Design System Preview: DAIKIN

01 / Colors

lorem ipsum dolor

Brand

Brand Navy

#003568

lorem ipsum dolor sit / lorem ipsum

Brand Gold

#fdc64f

lorem ipsum / lorem ipsum

CTA / Accent

Action Blue

#168bb6

CTA lorem / lorem ipsum dolor

Link Blue

#0099cc

lorem ipsum dolor / h3 lorem

Navy Dark

#27455c

lorem ipsum dolor

Blue Light

#cddcf2

lorem ipsum dolor

Filter Blue

#3860be

lorem ipsum dolor sit

Neutral

Black

#000000

lorem / lorem ipsum dolor

Dark Gray

#333333

lorem ipsum dolor

Mid Gray

#696969

lorem ipsum dolor / lorem

Link Gray

#666666

lorem ipsum dolor / lorem ipsum

Light Gray

#737373

lorem ipsum dolor

Surface & Border

White

#ffffff

lorem ipsum

Surface

#f3f3f3

lorem ipsum dolor

Light Surface

#f5f7fa

lorem ipsum

Border

#e8e8e8

lorem ipsum

02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor sit — Hero H1

38px / 400 / line-height: 1.6 / letter-spacing: normal / palt: loremlorem ipsum

lorem ipsum dolor sit, lorem ipsum. — Section H2

32px / 400 / line-height: 1.3 / letter-spacing: normallorem ipsum dolor

lorem ipsum — Sub H2

28px / 700 / line-height: 1.0 / letter-spacing: normallorem ipsum

lorem ipsum dolor / lorem ipsum — Top H2

26px / 400 / line-height: 1.6 / letter-spacing: normallorem ipsum dolor

lorem ipsum dolor / lorem ipsum dolor — H3

22px / 700 / line-height: 1.6 / letter-spacing: normallorem ipsum dolor

lorem ipsum dolor / lorem ipsum — H3 (Sub)

22px / 400 / line-height: 1.6 / letter-spacing: normallorem ipsum

lorem ipsum dolor sit? — H3 (Link)

14px / 700 / line-height: 1.7 / color: #0099cclorem ipsum dolor

lorem ipsum dolor — lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor“lorem ipsum X”lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum dolor sit amet consectetur adipiscing. line-height lorem ipsum 1.6 lorem. letter-spacing lorem palt lorem ipsum dolor sit.

14px / 400 / line-height: 1.6 / letter-spacing: normal / palt: loremlorem

lorem ipsum dolor — Nav Link (12px)

12px / 400 / line-height: 1.67 / color: #666666lorem ipsum dolor

lorem ipsum dolor — Small (12px)

12px / 400 / line-height: 1.6lorem

lorem > lorem ipsum > lorem ipsum — Breadcrumb

14px / 700 / line-height: 1.6 / color: #737373lorem ipsum

04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor

Primary (Action Blue)
#168bb6 / radius: 2px

lorem ipsum

Secondary
border: #168bb6 / radius: 2px

lorem ipsum dolor

Ghost
border: #e8e8e8 / radius: 4px

ENTER

lorem ipsum

lorem ipsum dolor sit amet

05 / Cards

lorem ipsum dolor sit

lorem ipsum dolor

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

lorem ipsum dolor

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

lorem ipsum dolor

lorem ipsum

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

lorem ipsum dolor

06 / Forms

lorem ipsum dolor

lorem

lorem ipsum — border: #e8e8e8, radius: 2px

lorem ipsum dolor

lorem ipsum — border: #168bb6 (Action Blue)

lorem ipsum

lorem ipsum dolor sit amet consectetur

lorem — border: #cc0000 (Danger)

07 / Elevation

Depth & Elevation

Flat

lorem, border: #e8e8e8 lorem ipsum

Color Header

lorem ipsum dolor sit amet(lorem ipsum)

Color Header

lorem ipsum dolor sit amet(lorem ipsum)

Focus Ring

#168bb6 (Action Blue)

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

08 / Layout

lorem ipsum / lorem ipsum dolor

lorem ipsum dolor sit amet

lorem #ffffff
lorem ipsum dolor

Surface #f3f3f3
lorem ipsum dolor

Navy #003568
lorem ipsum dolor

Gold #fdc64f
lorem ipsum dolor

Dark #333333
lorem ipsum

lorem ipsum dolor

Full Width 100%

Main Content 960px

Text Column 620px