Design System Preview
tokyobike.com

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.

Products DESIGN.md
01 / Colors

Color Palette

Brand
Sage Green
#e3ebe8
lorem ipsum dolor sit
Dark Gray
#444444
lorem ipsum / CTA
Text
Text Primary
#444444
lorem ipsum dolor
Text Black
#000000
lorem(lorem ipsum)
Text Secondary
#7e7e7e
lorem ipsum dolor
Button & Border
Button Primary
#565656
lorem ipsum dolor
Button CTA
#444444
CTA lorem ipsum
Border Dark
#404040
lorem ipsum / lorem
Surface
Background
#ffffff
lorem ipsum
Surface Sage
#e3ebe8
lorem ipsum / lorem ipsum
Link Default
#0000ee
lorem ipsum dolor
02 / Typography

Typography Hierarchy

Newsletter Heading
14px / 700 / line-height: 1.43 / letter-spacing: 0.06em / color: #000heading
Label Bold (p.label)
14px / 700 / line-height: 1.43 / letter-spacing: 0.06emlabel
Label Small Bold
12px / 700 / line-height: 1.25 / letter-spacing: 0.06emlabel
lorem ipsum dolor — tokyobike lorem ipsum dolor line-height: 2.0 lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor. letter-spacing: 0.06em lorem ipsum dolor sit amet. ABCabc 123
14px / 400 / line-height: 2.0 / letter-spacing: 0.06emarticle body
Nav JP — lorem ipsum dolor sit amet consectetur
14px / 400 / line-height: 1.43 / letter-spacing: 0.06emnav
Body Default — lorem ipsum dolor sit. 12px lorem ipsum, lorem ipsum dolor sit amet consectetur adipiscing elit sed do.
12px / 400 / line-height: 1.6 / letter-spacing: 0.06embody default
Nav EN — Navigation English Label
11px / 400 / line-height: 1.18 / letter-spacing: 0.06emnav (en)
Footer — lorem ipsum dolor
12px / 400 / line-height: 1.5 / letter-spacing: 0.06emfooter
Category Tag / Small Text
10px / 400 / line-height: 1.6 / letter-spacing: 0.06emtag / small
03 / Article

Article Sample

tokyobike lorem ipsum dolor

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

lorem ipsum dolor sit amet

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

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

04 / Buttons

Button Variations

Add to Cart
Primary (#565656)
Shop Now
CTA (#444, white text)
Details
Secondary (outline)
lorem ipsum
Tag (#e3ebe8)
lorem ipsum dolor
Tag
lorem
Tag
lorem ipsum border-radius: 0px — lorem ipsum dolor sit amet consectetur
05 / Cards

Product Cards

720 x 480

tokyobike BISOU

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

¥69,300 (tax incl.)
720 x 480

tokyobike LEGER

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

¥55,000 (tax incl.)
720 x 480

tokyobike MONO

lorem ipsum dolor sit. lorem ipsum dolor, lorem ipsum dolor sit.

¥59,400 (tax incl.)
06 / Forms

Form Elements

Default — border: #404040, radius: 0px
Focus — border: #444444
lorem ipsum dolor sit amet consectetur adipiscing
Error — border: danger color
Search — border-radius: 5px(lorem ipsum dolor)
07 / Elevation

Depth & Elevation

Level 0: Flat
shadow: none
lorem ipsum dolor sit
Border Emphasis
border: #404040
lorem ipsum dolor
Surface Change
bg: #e3ebe8
lorem ipsum dolor sit
tokyobike lorem ipsum dolor sit amet. box-shadow lorem ipsum, lorem ipsum dolor sit amet consectetur.
08 / Layout

Spacing & Layout

Spacing Scale
5px
10px
20px
30px
40px
60px
Content Widths
Max Container ~1200px
Content Area ~960px
Article Body ~600px
Grid
1/3
1/3
1/3
3-column grid / gap: 20px / lorem ipsum dolor sit