Design System Preview
TENTIAL — lorem ipsum

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem, lorem ipsum dolor, 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
Brand Navy
#284b7d
lorem / CTA / lorem / lorem
Accent Periwinkle
#8593bc
lorem ipsum dolor / NEW lorem
Accent Gold
#d1c67a
lorem ipsum / lorem ipsum
Accent Brown
#b48857
lorem ipsum dolor / lorem ipsum dolor
Text
Text Primary
#18181b
lorem ipsum dolor
Text Secondary
#666666
lorem ipsum dolor / lorem ipsum dolor
Text Near Black
#000011
lorem ipsum dolor
Surface — Blue-Tinted
Surface
#ffffff
lorem ipsum
Ultra Light
#f7f8fa
lorem ipsum
Light Blue
#eef2f7
lorem ipsum dolor(lorem ipsum)
Mid Blue
#dde1f0
lorem ipsum dolor
Blue Gray
#d4dbe5
lorem ipsum / lorem ipsum
Footer
Footer Link
#567eb4
lorem ipsum dolor
Footer Subtitle
#7e93b1
lorem ipsum dolor sit
Semantic
Error
#dc3545
lorem / lorem ipsum dolor
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor — Heading 2
Barlow + Noto Sans JP / 32px / 600 / line-height: 1.5 / color: #284b7dlorem
lorem ipsum — Heading 3
Barlow + Noto Sans JP / 22px / 600 / line-height: 1.8 / color: #284b7dlorem
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. font-weight: 500 lorem ipsum dolor sit, TENTIAL lorem ipsum dolor sit amet consectetur. Body text with Inter + Noto Sans JP.
Inter + Noto Sans JP / 16px / 500 / line-height: 1.8 / letter-spacing: normal / palt: loremlorem
lorem ipsum dolor sit — Nav (14px)
Barlow + Noto Sans JP / 14px / 600 / color: #284b7dlorem ipsum dolor
lorem ipsum dolor — Product Title (13px)
Barlow + Noto Sans JP / 13px / 600lorem ipsum
lorem ipsum dolor / lorem ipsum — Caption (12px)
Inter + Noto Sans JP / 12px / 500 / color: #666666lorem ipsum dolor
lorem ipsum dolor lorem NEW
Barlow + Noto Sans JP / 12px / 600 / lorem 3 loremlorem
¥16,500 (lorem)
Barlow / lorem ipsum — 28px / 700lorem
03 / Article — lorem ipsum dolor sit

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet consectetur adipiscing

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

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor, lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing elit sed. BAKUNE lorem ipsum dolor sit amet consectetur.

lorem: TENTIAL lorem ipsum dolor sit(lorem ipsum dolor)

Sleep Quality lorem ipsum dolor sit amet

TENTIAL lorem ipsum dolor, lorem ipsum din-2014(Barlow lorem), lorem neue-haas-grotesk-display(Inter lorem)lorem ipsum, lorem ipsum dolor sit amet consectetur Noto Sans JP lorem ipsum dolor. font-weight 500 lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing. ABCabc 123

04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Primary Pill
lorem ipsum dolor
Primary Rounded
lorem ipsum dolor sit
Secondary Outline
lorem ipsum dolor sit
Secondary Pill
lorem
Tertiary Outline
lorem ipsum dolor
Registration
05 / Cards

lorem ipsum

lorem ipsum dolor NEW
BAKUNE Pajamas

BAKUNE Pajamas Premium

lorem ipsum dolor SELFLAME lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor, lorem ipsum dolor sit amet.
¥16,500 (lorem)
lorem
BAKUNE Dry

BAKUNE Dry lorem ipsum dolor

lorem ipsum dolor sit amet consectetur. SELFLAME lorem ipsum dolor, lorem ipsum dolor sit amet consectetur.
¥13,200 (lorem)
lorem ipsum dolor
BAKUNE Eye Mask

BAKUNE lorem ipsum

lorem ipsum dolor sit amet consectetur. SELFLAME lorem ipsum dolor sit amet consectetur adipiscing.
¥3,850 (lorem)
06 / Forms

lorem ipsum dolor

lorem ipsum — bg: #f6fafe, border: #d4dbe5, radius: 4px
lorem ipsum — border: #284b7d (brand-navy)
lorem ipsum dolor sit amet consectetur
lorem — border: #dc3545 (error)
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor
Level 1
0 1px 3px rgba(40,75,125,0.08)
Level 2
0 4px 12px rgba(40,75,125,0.12)
Level 3
0 8px 24px rgba(40,75,125,0.16)
08 / Layout

lorem ipsum & lorem ipsum dolor

lorem ipsum dolor

Full Width 1440px
Main Content 1200px
Article Content 940px
Narrow Content 640px

lorem ipsum dolor sit

4px
8px
12px
16px
24px
32px
48px
64px
80px

lorem ipsum dolor — 3 lorem

Column 1
Column 2
Column 3

lorem ipsum dolor — 4 lorem

1
2
3
4