Design System Preview
TABIO — lorem ipsum

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. Koburina Gothic(lorem ipsum dolor)lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor EC lorem. computed style lorem ipsum dolor.

lorem ipsum DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Neutral — lorem ipsum dolor
Text Black
#000000
body lorem ipsum
Text Primary
#222222
lorem / lorem
Text Dark
#404040
lorem SVG fill
Text Secondary
#737373
lorem / lorem ipsum dolor
Button Primary
#a6a6a6
lorem ipsum dolor
Border
#d9d9d9
lorem / lorem
Surface Footer
#f2f2f2
lorem ipsum / lorem ipsum dolor
Background Page
#f7f7f7
lorem ipsum
Surface Content
#ffffff
lorem / lorem ipsum dolor
Accent(lorem)
Link Blue
#5d9cec
lorem ipsum dolor
Badge Dark
#4d5057
lorem ipsum dolor
Semantic(lorem)
Success
#468254
lorem / lorem
Danger
#cc3333
lorem / lorem
Warning
#d9a825
lorem / lorem
02 / Typography — lorem

lorem ipsum dolor sit

lorem ipsum dolor — H2 Hero (26px)
26px / Koburina W6 / line-height: 1.31 / letter-spacing: 0.08emlorem ipsum dolor
lorem ipsum dolor sit — H2 Feature (18px)
18px / Koburina W6 / line-height: 1.23 / letter-spacing: 0.08emlorem ipsum dolor
lorem ipsum dolor sit — H2 Section (17px)
17px / Koburina W6 / line-height: 1.23 / letter-spacing: 0.08emlorem ipsum dolor
lorem ipsum dolor sit — H3 Nav (14px)
14px / Koburina W6 / line-height: 1.0-1.5 / letter-spacing: 0.08emlorem ipsum dolor
LADIES   MEN   KIDS
16px / Koburina W3 (weight 700) / EN loremlorem ipsum dolor
lorem ipsum dolor — lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur. letter-spacing: 0.08em lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur.
14px / Koburina W3 (weight 300) / line-height: 1.23-1.6 / letter-spacing: 0.08emlorem ipsum
lorem ipsum dolor sit — Nav Label (14px / 0.04em)
14px / Koburina W3 / line-height: 1.0 / letter-spacing: 0.04emlorem ipsum dolor
lorem ipsum dolor / lorem ipsum dolor — Small (12px)
12px / Koburina W3 / line-height: 1.23 / letter-spacing: 0.08emlorem ipsum
lorem ipsum dolor / lorem ipsum — Caption (11px)
11px / Koburina W3 / line-height: 1.23 / letter-spacing: 0.08emlorem ipsum
lorem(lorem) — Item Name (14.6px / lorem ipsum)
14.6px / Yu Gothic / weight 700 / letter-spacing: 0.08emlorem ipsum
03 / Product — lorem ipsum dolor

lorem ipsum dolor sit amet

TABIO PREMIUM  |  LADIES

lorem ipsum dolor sit amet lorem ipsum dolor sit

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

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

lorem: lorem 78%, lorem ipsum 20%, lorem ipsum dolor 2%  |  lorem: 22.0-24.0cm  |  lorem

04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Primary
lorem ipsum dolor
Secondary
lorem ipsum
Cancel
lorem ipsum dolor
Link
REVIEW
Badge
SOLD OUT
Badge (Danger)
NEW
Badge (Success)
05 / Cards — lorem ipsum

lorem ipsum dolor sit

260 x 260
TABIO PREMIUM

lorem ipsum dolor sit amet lorem ipsum dolor sit

¥1,320
lorem 6 lorem
260 x 260
lorem

lorem ipsum dolor lorem ipsum dolor sit

¥880
lorem 12 lorem
260 x 260
Tabio MEN

lorem ipsum lorem ipsum lorem ipsum dolor

¥990
lorem 4 lorem
260 x 260
TABIO SPORTS

lorem ipsum dolor lorem ipsum dolor

¥2,200
lorem 3 lorem
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #d9d9d9, radius: 2px
lorem ipsum — border: #222222
lorem ipsum dolor sit amet consectetur adipiscing
lorem — border: #cc3333
07 / Elevation — lorem

Depth & Elevation

Level 0: Flat
lorem(lorem)
Level 1: Button
0 0 8px rgba(0,0,0,0.15)
Level 2: Hover
0 4px 16px rgba(0,0,0,0.10)
Level 3: Modal
0 8px 24px rgba(0,0,0,0.12)
08 / Layout — Spacing & Content Width

lorem ipsum dolor sit amet

Spacing Scale
4px
8px
16px
24px
48px
80px
Content Width
Max Container 1200px
Product Content 940px
Article / Detail 620px
Border Radius
2px
lorem ipsum dolor