Design System Preview
meiji — 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 ipsum dolor DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
Meiji Red
#d90000
lorem ipsum dolor / lorem ipsum dolor
CTA Red
#e30200
CTA lorem ipsum
Primary Red
#ff0000
--primary-color(lorem)
Category Accents
Accent Blue
#407bbe
--accent-color1
Accent Orange
#ffa24b
--accent-color2
Accent Green
#00ae83
--accent-color3
Text
Text Primary
#06171f
--text-color1(lorem ipsum dolor)
Text Red
#d90000
--text-color2(lorem ipsum)
Gray 1
#59636b
--gray-accent1(lorem)
Gray 2
#7c8a95
--gray-accent2(lorem)
Surface & Border
BG White
#ffffff
--bg1 lorem ipsum / lorem
BG Light Blue-Gray
#edf3f7
--bg2 lorem ipsum
BG Medium
#dde5eb
--bg3 lorem ipsum
Border
#b7c4ce
--gray-accent3 lorem ipsum
Border Light
#cfdae3
--gray-accent4 lorem ipsum
Footer
Footer Dark
#27455c
lorem ipsum dolor
Footer Darkest
#06171f
lorem ipsum dolor
Green (Sub)
#468254
lorem ipsum dolor sit amet
02 / Typography — lorem

lorem ipsum dolor sit

lorem ipsum — Display (h2)
40px / 700 / line-height: 1.8 / letter-spacing: 0.06emlorem ipsum dolor sit
lorem ipsum dolor sit — Display Light
40px / 300 / line-height: 1.25 / color: --gray-accent1lorem ipsum
lorem ipsum dolor — H3 Pick-up
42px / 200 / line-height: 1.8 / lorem ipsum dolorlorem ipsum
lorem ipsum dolor sit — H2 Sub
24px / 700 / line-height: 1.8 / letter-spacing: 0.04emlorem ipsum
lorem ipsum — H2 Red Heading
16px / 700 / line-height: 1.8 / color: #d90000 (Meiji Red)lorem ipsum dolor
lorem ipsum dolor. lorem, lorem ipsum dolor sit amet consectetur“lorem / lorem”lorem ipsum dolor sit amet consectetur. — P Lead
20px / 400 / line-height: 1.8 / letter-spacing: 0.06emlorem ipsum
lorem ipsum dolor. lorem ipsum dolor line-height 1.8 lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. letter-spacing 0.06em lorem ipsum, lorem ipsum / lorem ipsum dolor sit amet consectetur. — Body
16px / 400 / line-height: 1.8 / letter-spacing: 0.06emlorem
lorem ipsum dolor — Nav (15px / 500)
15px / 500 / line-height: 1.8lorem ipsum dolor
lorem ipsum dolor / lorem — Small (14px)
14px / 400 / line-height: 1.8 / color: --gray-accent1lorem
03 / Article — lorem ipsum dolor

lorem / lorem ipsum dolor sit amet

lorem ipsum dolor sit amet

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

lorem ipsum dolor sit

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

lorem ipsum

lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. lorem ipsum 70% lorem ipsum dolor sit amet, lorem / lorem ipsum dolor / lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor

lorem ipsum dolor sit amet consectetur, 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 consectetur adipiscing, lorem ipsum dolor sit amet.

04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Primary CTA
lorem ipsum
Secondary
lorem ipsum dolor
Accent Blue
Category Badges
lorem
Brand Red
lorem
Accent Blue
lorem ipsum
Accent Orange
lorem
Accent Green
lorem ipsum
Dark Navy
05 / Cards

lorem ipsum dolor sit

lorem

lorem ipsum dolor sit amet

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

lorem ipsum →
lorem

lorem ipsum dolor sit amet

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

lorem ipsum →
lorem

lorem ipsum dolor sit amet R-1

lorem ipsum dolor sit. 1073R-1 lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur.

lorem ipsum →
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #b7c4ce, radius: 4px
lorem ipsum — border: #407bbe (Accent Blue)
lorem ipsum dolor sit amet consectetur
lorem — border: #d90000 (Meiji Red)
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem(lorem ipsum)
Level 1
0 2px 8px rgba(0,0,0,0.06)
Level 2
0 4px 16px rgba(0,0,0,0.08)
Level 3
0 8px 24px rgba(0,0,0,0.12)
Focus Ring
#407bbe (Accent Blue)
08 / Layout

lorem ipsum dolor & lorem ipsum dolor

Spacing Scale
4px
8px
16px
24px
48px
80px
Border Radius
2px
4px
8px
12px
Content Width
Max Container 1200px
Content Area 1000px
Article / Text 680px