Design System Preview
tokyobike.com

DESIGN.md から抽出したデザイントークンのカタログ。カラー、フォント、コンポーネント、スペーシングの全値を可視化。computed style 実測値に基づく。

Products DESIGN.md

01 / Colors

Color Palette

Brand
Sage Green
#e3ebe8
ブランドアクセント
Dark Gray
#444444
テキスト・CTA
Text
Text Primary
#444444
本文テキスト
Text Black
#000000
見出し(限定使用)
Text Secondary
#7e7e7e
補足テキスト
Button & Border
Button Primary
#565656
メインボタン背景
Button CTA
#444444
CTA ボタン背景
Border Dark
#404040
ボタン枠線・入力枠
Surface
Background
#ffffff
ページ背景
Surface Sage
#e3ebe8
フッター・タグ背景
Link Default
#0000ee
未スタイルリンク

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
本文テキスト — tokyobike の記事ページでは line-height: 2.0 のゆったりした行間を使い、自転車やライフスタイルに関する記事を落ち着いて読める組版にしています。letter-spacing: 0.06em が全体に適用されています。ABCabc 123
14px / 400 / line-height: 2.0 / letter-spacing: 0.06emarticle body
Nav JP — ナビゲーション日本語ラベル
14px / 400 / line-height: 1.43 / letter-spacing: 0.06emnav
Body Default — 基本の本文テキスト。12px と小さめで、日本のライフスタイルブランドに典型的なコンパクトな情報密度。
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 — フッターテキスト
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

Article Sample

tokyobike と街を走ること

自転車で街を走ることは、移動手段であると同時に、街との関わり方そのものです。風を感じながら、気になるお店の前で止まり、新しい路地を曲がってみる。

東京の景色を変える一台

tokyobike は東京の街を走るためにデザインされた自転車です。軽快なフレームと程よいギア比で、坂道の多い東京の地形でも快適に走れます。クロモリフレームの細いシルエットが、街の風景に自然と溶け込みます。ABCabc 123

毎日の通勤も、週末のポタリングも、一台の自転車がライフスタイルを豊かにしてくれます。


04 / Buttons

Button Variations

Add to Cart
Primary (#565656)
Shop Now
CTA (#444, white text)
Details
Secondary (outline)
クロモリ
Tag (#e3ebe8)
全ボタン border-radius: 0px — 角丸なしの直線的なデザイン

05 / Cards

Product Cards

720 x 480

tokyobike BISOU

街乗りに最適な軽量クロモリフレーム。細身のシルエットが東京の景色に溶け込む。

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

tokyobike LEGER

シンプルなシングルスピード。メンテナンスが少なく、毎日の通勤に最適。

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

tokyobike MONO

コンパクトな小径車。折りたたみ不要で、取り回しのよさが魅力。

¥59,400 (tax incl.)

06 / Forms

Form Elements

Default — border: #404040, radius: 0px
Focus — border: #444444
正しいメールアドレスを入力してください
Error — border: danger color
Search — border-radius: 5px(検索欄のみ角丸)

07 / Elevation

Depth & Elevation

Level 0: Flat
shadow: none
ボーダーのみで区切り
Border Emphasis
border: #404040
より強い区切り
Surface Change
bg: #e3ebe8
背景色で奥行き表現
tokyobike はフラットデザインを徹底。box-shadow は使わず、ボーダーと背景色で奥行きを表現。

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 / 商品一覧レイアウト