Design System Preview
KIRIN

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

lorem ipsum dolor

Brand
KIRIN Red
#f00000
lorem ipsum dolor / CTA
KIRIN Red Deep
#e6001e
lorem ipsum / lorem ipsum dolor
Text
Text Primary
#333333
lorem ipsum dolor
Text Dark
#222222
lorem / lorem
Text White
#ffffff
lorem ipsum dolor
Link
Link Blue
#367eb3
lorem ipsum dolor / lorem
Surface & Background
Background
#ffffff
lorem ipsum
Background Warm
#faf9f5
lorem ipsum dolor(lorem ipsum)
Background Gray
#f9f9f9
lorem ipsum
Border
#d3d3d4
lorem ipsum / lorem ipsum
Footer Background
#e6001e
lorem ipsum dolor
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor — H1 (38px)
38px / 400 / line-height: 1.5 / color: #f00000 (KIRIN Red)lorem ipsum dolor
lorem ipsum dolor — H2 Main (44px)
44px / 700 / line-height: 1.25 (55px)lorem ipsum dolor
lorem ipsum dolor — H2 Secondary (32px)
32px / 700 / line-height: 1.25 (40px)lorem ipsum
lorem ipsum dolor — H2 Announcement (18px)
18px / 700 / line-height: 1.5 / color: #f00000lorem ipsum
lorem ipsum — Heading 3 (24px)
24px / 700 / line-height: 1.25 (30px)
lorem ipsum dolor — Nav (16px / 700)
16px / 700 / line-height: 1.75 / color: #222222lorem ipsum dolor
lorem ipsum dolor — Body (16px). Roboto lorem Noto Sans JP lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. letter-spacing lorem normal, palt lorem ipsum dolor sit. ABCabc 123
16px / 400 / line-height: 1.5 (24px) / letter-spacing: normal / palt: lorem
lorem ipsum dolor — Caption (14px). lorem ipsum dolor sit amet consectetur.
14px / 400 / line-height: 1.5
lorem ipsum — Small / Caution (12px)
12px / 400 / color: #f00000lorem ipsum dolor
03 / Product

lorem ipsum dolor

B
lorem ipsum dolor sit amet
lorem 100%lorem ipsum dolor
T
lorem ipsum lorem ipsum dolor
lorem ipsum dolor
W
lorem lorem
lorem ipsum dolor sit amet
D
lorem iMUSE
lorem ipsum dolor sit

* lorem 20 lorem ipsum dolor. lorem ipsum dolor sit amet consectetur.

04 / Buttons

lorem ipsum dolor sit

lorem ipsum
Primary CTA
radius: 96px (pill)
lorem ipsum
Secondary
radius: 92px (pill)
lorem ipsum dolor
Header Pill
radius: 1440px
↑
Page Top
radius: 50% (circle)

Pill Button Spec

Primary: bg #f00000 / text #ffffff / border-radius 96px / padding 10px 20px
Secondary: bg #ffffff / text #f00000 / border 1px solid #f00000 / border-radius 92px

05 / Cards

lorem ipsum dolor sit

lorem

lorem ipsum dolor sit

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

lorem ipsum →
CSV lorem

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet consectetur adipiscing CSV lorem. lorem, lorem ipsum dolor, lorem 3 lorem ipsum dolor sit amet.

lorem ipsum →
lorem

lorem ipsum dolor

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

lorem ipsum →
06 / Forms

lorem ipsum dolor

lorem ipsum --- border: 1px solid #d3d3d4, radius: 0px
lorem ipsum --- border: 2px solid #f00000 (KIRIN Red)
lorem ipsum dolor sit amet consectetur adipiscing
lorem --- border-color: #cc0000
lorem ipsum --- border: 1px solid #d3d3d4, radius: 0px
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem / lorem ipsum dolor
Elevation 1
0px 1px 3px rgba(0,0,0,0.12)
Elevation 2
0px 2px 6px rgba(0,0,0,0.14)
Elevation 4
0px 4px 12px rgba(0,0,0,0.16)
Focus Ring
2px solid #f00000
08 / Layout

lorem ipsum

Header Padding

Header Horizontal Padding 48px

Section Backgrounds

#ffffff
Default
#faf9f5
Warm Cream
#e6001e
Footer

Border Radius

96px (Primary CTA)
1440px (Header Pill)
50% (Page Top)
0px (Cards / Forms)