Design System Preview
KIRIN

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

商品を見る DESIGN.md を読む
01 / Colors

カラーパレット

Brand
KIRIN Red
#f00000
ブランドカラー・CTA
KIRIN Red Deep
#e6001e
フッター・ヘッダーピル
Text
Text Primary
#333333
本文テキスト
Text Dark
#222222
見出し・ナビ
Text White
#ffffff
反転テキスト
Link
Link Blue
#367eb3
テキストリンク・商品名
Surface & Background
Background
#ffffff
ページ背景
Background Warm
#faf9f5
セクション背景（クリーム）
Background Gray
#f9f9f9
補助背景
Border
#d3d3d4
ボーダー・区切り線
Footer Background
#e6001e
フッター背景
02 / Typography

タイポグラフィ階層

ページタイトル — H1 (38px)
38px / 400 / line-height: 1.5 / color: #f00000 (KIRIN Red)ページヘッダー
メイン見出し — H2 Main (44px)
44px / 700 / line-height: 1.25 (55px)メインビジュアル
セクション見出し — H2 Secondary (32px)
32px / 700 / line-height: 1.25 (40px)セクション
お知らせ見出し — H2 Announcement (18px)
18px / 700 / line-height: 1.5 / color: #f00000お知らせ
小見出し — Heading 3 (24px)
24px / 700 / line-height: 1.25 (30px)
ナビゲーション — Nav (16px / 700)
16px / 700 / line-height: 1.75 / color: #222222グローバルナビ
本文テキスト — Body (16px)。Roboto と Noto Sans JP のフォールバックチェーンで、和欧混植を美しく表示します。letter-spacing は normal、palt は適用されていません。ABCabc 123
16px / 400 / line-height: 1.5 (24px) / letter-spacing: normal / palt: なし
キャプション — Caption (14px)。商品説明の補足情報やメタデータに使用。
14px / 400 / line-height: 1.5
注意書き — Small / Caution (12px)
12px / 400 / color: #f00000注意テキスト
03 / Product

商品一覧サンプル

B
キリン一番搾り生ビール
麦100%一番搾り製法
T
午後の紅茶 ストレートティー
すっきり香る紅茶
W
キリン 生茶
まるごと茶葉のおいしさ
D
キリン iMUSE
プラズマ乳酸菌飲料

* お酒は20歳を過ぎてから。飲酒運転は法律で禁止されています。

04 / Buttons

ボタンバリエーション

商品を見る
Primary CTA
radius: 96px (pill)
詳しく見る
Secondary
radius: 92px (pill)
お問い合わせ
Header Pill
radius: 1440px
↑
Page Top
radius: 50% (circle)

Pill Button Spec

Primary: bg #f00000 / text #ffffff / border-radius 96px / padding 10px 20px
Secondary: bg #ffffff / text #f00000 / border 1px solid #f00000 / border-radius 92px

05 / Cards

カードコンポーネント

ビール

原材料へのこだわり

麦芽100%と一番搾り製法により、雑味のないおいしさを実現。素材の旨みを最大限に引き出しています。

詳しく見る →
CSV経営

キリングループの取り組み

社会課題の解決と経済的価値の両立を目指すCSV経営。健康、コミュニティ、環境の3つの柱で活動しています。

詳しく見る →
飲料

午後の紅茶の歴史

1986年の発売以来、日本の紅茶文化を支えてきたロングセラーブランド。こだわりの茶葉選びと製法で愛され続けています。

詳しく見る →
06 / Forms

フォーム要素

デフォルト --- border: 1px solid #d3d3d4, radius: 0px
フォーカス --- border: 2px solid #f00000 (KIRIN Red)
正しいメールアドレスを入力してください
エラー --- border-color: #cc0000
セレクト --- border: 1px solid #d3d3d4, radius: 0px
07 / Elevation

Depth & Elevation

Level 0: Flat
影なし・ボーダーのみ
Elevation 1
0px 1px 3px rgba(0,0,0,0.12)
Elevation 2
0px 2px 6px rgba(0,0,0,0.14)
Elevation 4
0px 4px 12px rgba(0,0,0,0.16)
Focus Ring
2px solid #f00000
08 / Layout

レイアウト

Header Padding

Header Horizontal Padding 48px

Section Backgrounds

#ffffff
Default
#faf9f5
Warm Cream
#e6001e
Footer

Border Radius

96px (Primary CTA)
1440px (Header Pill)
50% (Page Top)
0px (Cards / Forms)