Design System Preview
tokyometro.jp

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

路線・駅の情報 情報更新

01 / Colors

カラーパレット

Brand
Brand Navy
#00467e
ナビ・CTA・リンク
Navy Dark
#004173
フッター等
Accent Cyan
#00a3d9
バッジ・アクセント
Info Surface
Info Surface
#e6f3f9
運行情報カード背景
Info Surface Light
#e9f5fb
お知らせ背景
Info Border
#d3e8f2
情報カードボーダー
Text
Text Primary
#333333
本文テキスト
Text Dark
#191919
運行情報内テキスト
Text Link
#00467e
リンク・CTA文字
Placeholder
#808080
入力プレースホルダー
Background & Border
Background
#ffffff
ページ背景
Header Bar
#dfe4e7
ヘッダーバー
Footer Sub
#dfe4e6
フッター上部
Border Light
#dadada
入力欄ボーダー
Border Pill
#ebf0f2
ピルボタンボーダー
Metro Line Colors (9 Lines)
G
銀座線
#f39700
M
丸ノ内線
#e60012
H
日比谷線
#9caeb7
T
東西線
#00a7db
C
千代田線
#00a650
Y
有楽町線
#c1a470
Z
半蔵門線
#8b76d0
N
南北線
#00ada9
F
副都心線
#bb641d

02 / Typography

タイポグラフィ階層

路線・駅の情報 — Page Title (h1)
30px / 700 / line-height: 1.2 / letter-spacing: normal / palt: なしサブページ
メトロで楽しむ — Display (h2)
24px / 700 / line-height: 1.0 / letter-spacing: normalトップページ
CM情報 — Section Title (h2)
22px / 700 / line-height: 1.0 / letter-spacing: normalトップページ
運行情報 — Sub Title (p)
20px / 700 / line-height: 1.0 / letter-spacing: normalナビ内セクション
駅を条件から探す — Sub Heading (p)
18px / 700 / line-height: 1.01 / letter-spacing: normalモーダル
駅を探す — Small Title (h2)
16px / 700 / line-height: 1.0 / letter-spacing: normalトップページ
本文テキスト — 東京メトロは、東京都区部を中心に9路線を運営する地下鉄事業者です。銀座線、丸ノ内線、日比谷線、東西線、千代田線、有楽町線、半蔵門線、南北線、副都心線の9路線、180駅で毎日多くのお客様にご利用いただいています。
14px / 400 / line-height: 1.3 / letter-spacing: normal / palt: なし本文
平常運転
13px / 700 / line-height: 1.5 / background: #e6f3f9運行情報バッジ
路線図から探す / 50音から探す / 条件から探す
12px / 400 / line-height: 1.52 / color: #00467e駅探索リンク
06月19日 10:34 現在情報更新
12px / 400 / line-height: 1.52 / 補足テキストタイムスタンプ

運行情報サンプル

運行情報
06月19日 10:34 現在 情報更新
銀座線
平常運転
丸ノ内線
平常運転
日比谷線
平常運転
東西線
平常運転
千代田線
平常運転
有楽町線
平常運転
半蔵門線
平常運転
南北線
平常運転
副都心線
平常運転

04 / Buttons

ボタンバリエーション

乗車券
Primary CTA (Navy)
遅延証明書
Info Badge
情報更新
Pill Button
運行状況
Accent Border
路線図から探す
Icon Link Card

05 / Cards

カードコンポーネント

路線・駅の情報

東京メトロ9路線の駅情報、時刻表、乗換案内など、ご利用に必要な情報をまとめてご覧いただけます。

詳しく見る »

銀座線のご案内

浅草から渋谷を結ぶ日本初の地下鉄路線。19駅、全長14.2km。

駅一覧を見る »

お知らせ

東京メトロからのお知らせ、運行に関する最新情報をお届けします。

一覧を見る »

06 / Forms

フォーム要素

メイン検索 — border: #737373, radius: 0px, inset shadow
サブ検索 — border: #dadada, radius: 4px
フォーカス — border: #00467e
エラー — border: #cc0000

07 / Elevation

Depth & Elevation

Level 0: Flat
影なし。大半の要素に適用
Inset Shadow
rgba(0,0,0,0.4) 2px 2px 7px 0px inset — 検索入力欄
Top Border Accent
border-top: 3px solid #00467e — カード強調
Cyan Border
border: 2px solid #00a3d9 — アクセントボーダー

08 / Layout

レイアウト

Main Content 1000px
Route List Grid 9 columns
Station Search Panel 4 columns
Info Cards fluid, 280px min