Design System Preview
lorem DASSAI

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

lorem ipsum dolor DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
Brand Primary
#27174b
CTA / lorem ipsum dolor
Brand Secondary
#a5afd3
lorem ipsum / lorem
Text
Text Primary
#000000
lorem ipsum dolor
Text Secondary
#222222
lorem ipsum dolor / lorem
Text Muted
#666666
lorem ipsum dolor / lorem
Surface & Border
Background Primary
#ffffff
lorem ipsum
Background Secondary
#f5f5f0
lorem ipsum dolor(lorem ipsum dolor sit)
Border Default
#e0e0e0
lorem ipsum dolor
Border Focus
#27174b
lorem ipsum dolor
Semantic
Danger
#b22323
lorem / lorem
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor — H1 Title
Noto Serif JP / 32px / 700 / line-height: 1.0lorem ipsum dolor
lorem lorem lorem lorem lorem — H2 Section
Noto Serif JP / 27px / 400 / line-height: 1.0 / letter-spacing: 0.2em — lorem ipsum dolorlorem ipsum dolor
lorem ipsum lorem ipsum dolor — H2 Lineup
Noto Serif JP / 32px / 400 / line-height: 1.8 / letter-spacing: 0.03emlorem ipsum dolor
lorem“lorem”lorem ipsum — H3 Subheading
Noto Sans JP / 16px / 700 / line-height: 1.6 / color: #222lorem ipsum
lorem ipsum dolor — lorem ipsum dolor sit, lorem ipsum dolor sit amet. line-height: 2.4 lorem letter-spacing: 0.1em lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing elit sed. ABCabc 123
Noto Serif JP / 16px / 400 / line-height: 2.4 / letter-spacing: 0.1em — palt: loremlorem
UI lorem ipsum — lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet.
Noto Sans JP / 16px / 400 / line-height: 1.5UI lorem
lorem ipsum dolor / lorem ipsum dolor — Nav / Small (14px)
Noto Sans JP / 14px / 400 / line-height: 1.5lorem / lorem
03 / Article — lorem ipsum dolor sit

lorem ipsum dolor sit amet

lorem ipsum dolor

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

lorem ipsum dolor

lorem“lorem ipsum, lorem ipsum dolor sit, lorem ipsum dolor”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

lorem ipsum dolor sit amet“lorem ipsum dolor”lorem, lorem ipsum dolor sit amet consectetur adipiscing elit sed. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur.

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

04 / Buttons

lorem ipsum dolor sit

lorem ipsum
Primary CTA
lorem ipsum
Outline
lorem ipsum
Small
lorem ipsum
Disabled
radius: 0px — lorem ipsum dolor sit amet consectetur
Square CTA(lorem ipsum)
05 / Cards

lorem ipsum dolor sit

lorem ipsum lorem ipsum dolor

lorem ipsum 23%. lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum

lorem ipsum lorem ipsum dolor

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

lorem ipsum

lorem ipsum 45

lorem ipsum 45%. lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur.

lorem ipsum
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #e0e0e0, radius: 0px
lorem ipsum — border: #27174b (brand-primary)
lorem ipsum dolor sit amet consectetur adipiscing
lorem — border: #b22323 (danger)
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem — lorem ipsum dolor
Level 1
0 1px 3px rgba(0,0,0,0.1) — lorem / lorem ipsum
Level 2
0 4px 12px rgba(0,0,0,0.1) — lorem ipsum dolor / lorem ipsum
Focus Ring
#27174b (brand-primary)
08 / Layout

lorem ipsum dolor

Max Content 940px
Article Body 620px
Form Container 400px