Design System Preview
CITIZEN Watch

DESIGN.md から抽出したデザイントークンのカタログ。Poppins + Noto Sans JP のデュアルフォント、グローバル palt 適用、ダークネイビーアクセント。computed style 実測値に基づく。

コレクションを見る DESIGN.md を読む

01 / Colors

カラーパレット

Primary (Brand)
Dark Navy
#27455c
ブランドアクセント
Deep Navy
#041e41
限定アクセント
CTA Black
#222222
Primary CTA
Filter Blue
#3860be
トグル・フィルター
Neutral (Text)
Text Primary
#000000
見出し・強調
Text Body
#444444
本文・コンテンツ
Text Nav
#292c2d
ナビゲーション
Text Price
#a6acb1
価格・ミュート
Text Cookie
#91999f
クッキーバナー
Footer Muted
#d2d2d2
フッター薄テキスト
Surface & Border
Background
#ffffff
ページ背景
Surface
#f9f9f9
セクション背景
Border
#707070
ボタン・入力欄
Divider
#e5e5e5
セクション区切り
Footer
#000000
フッター背景
Accent
Light Pink
#fbebee
プロモーション面

02 / Typography

タイポグラフィ階層

注目のモデル — Section Heading (h2)
26px / 700 / line-height: 1.5 / palt: グローバル適用セクション見出し
最近見た商品 — Secondary Heading (h2)
20px / 700 / line-height: 1.3 / palt: グローバル適用補助セクション
時計の使いかた — Sub Heading (h3)
18px / 700 / line-height: 1.2 / palt: グローバル適用サブ見出し
本文テキスト — 日本語の組版は、欧文とは根本的に異なるルールを持っています。Poppins と Noto Sans JP のデュアルフォント構成で、ラテン文字は幾何学的サンセリフで描画されます。Body (16px)
16px / 400 / line-height: 1.5 / color: #444444標準本文
説明文テキスト — シチズンは1918年の創業以来、「市民に愛される時計づくり」を掲げてきました。光発電エコ・ドライブに代表される先進技術と、精密なものづくりの伝統を融合しています。Body Detail (16px / lh 1.6)
16px / 400 / line-height: 1.6 / やや広い行間説明文
記事テキスト — Article / Detail (14px)
14px / 400 / line-height: 1.5記事・詳細
ナビゲーション — Nav (14px / 500)
14px / 500 / line-height: 1.5 / color: #292c2dヘッダーナビ
展開メニューリンク — Nav Expanded (18px / 500)
18px / 500 / line-height: 1.5展開メニュー
シリーズエイト — Brand Label (14px / 600)
14px / 600 / ブランド名ラベル商品カード
¥159,500(税込) — Price (12px / 600)
12px / 600 / line-height: 1.5 / color: #a6acb1価格表示
NEW — Badge (11px / 600)
11px / 600 / バッジ商品カード
お知らせ: メンテナンス情報 — Info Bar (12px / 600)
12px / 600 / line-height: 1.5告知バー
フッターリンク — Footer Link (14px / 500)
14px / 500 / color: フッター用フッターナビ

注目のモデル

NEW
シリーズエイト
NB6060-58L メカニカル 880
¥159,500 (税込)
アテッサ
CC4055-65E エコ・ドライブ GPS衛星電波時計
¥275,000 (税込)
NEW
プロマスター
BN0227-09L エコ・ドライブ ダイバー200m
¥77,000 (税込)
ザ・シチズン
AQ4091-56E 年差 エコ・ドライブ
¥385,000 (税込)

光で動く、未来を創る。

1918年の創業以来、シチズンは「市民に愛される時計づくり」を掲げてきました。光発電エコ・ドライブに代表される先進技術と、精密なものづくりの伝統を融合しています。

ブランドストーリー

04 / Buttons

ボタンバリエーション

カートに入れる
Primary CTA
#222222 / radius 2px / 12px 30px
お気に入り
Secondary Outline
#707070 / radius 3px
Cookie設定
Cookie Settings
#222222 border / radius 2px
Toggle Switch
ON
#3860be
OFF
#e5e5e5

カードコンポーネント

エコ・ドライブ テクノロジー

わずかな光でも発電し、余った電気を蓄え、定期的な電池交換は不要。光発電エコ・ドライブは、シチズンが世界で初めて開発した技術です。

詳しく見る

スーパーチタニウム

ステンレスの約5倍の表面硬度を実現。独自のデュラテクト加工により、傷に強く、軽く、肌にやさしい素材です。

詳しく見る

衛星電波時計

GPS衛星から時刻情報を受信し、世界中どこでも正確な時刻を表示。エコ・ドライブとの組み合わせで、メンテナンスフリーを実現。

詳しく見る

06 / Forms

フォーム要素

デフォルト — border: #707070, radius: 50px (pill)
デフォルト — border: #707070, radius: 2px
フォーカス — border: #222222, shadow: rgba(34,34,34,0.15)
エラー — border: #b22323
有効なメールアドレスを入力してください

07 / Elevation

Depth & Elevation

Level 0: Flat
影なし。商品カード・本文領域
Level 1
0 1px 3px rgba(0,0,0,0.08)
ヘッダー固定時
Surface
bg #f9f9f9 / border #e5e5e5
セクション区切り
Brand Section
bg #27455c
ブランドストーリー
Footer
bg #000000
フッター(純黒)

08 / Layout

レイアウト

Content Widths
Container Max 1200-1440px
Product Grid (4col) ~1200px
Product Grid (3col) ~900px
Content Padding 16-24px
Spacing Scale
6px
XS
10px
S
12px
M
15px
L
30px
XL
35px
XXL
Grid
商品一覧: 4カラム(デスクトップ)
ブランドカテゴリ: 3カラム
ヒーロー: 全幅 1カラム