design system preview

掘りだそう、自然の力。

Calbee（calbee.co.jp）から抽出したデザイントークンのカタログ。Sawarabi Gothic + 游ゴシック、ブランドレッド #eb0100、温かベージュ #f1eee9。computed style 実測値に基づく。

商品情報を見る
01 / colors

Color Palette

brand
Calbee Red
#eb0100
ブランドカラー・CTA・カテゴリ見出し
text
Text Strong
#2f2f2f
見出し（純黒は使わない）
Text Primary
#3c3c3c
本文テキスト
Text on Red
#ffffff
赤面上のテキスト
surface
Background
#ffffff
標準背景
Warm Surface
#f1eee9
温かベージュのセクション背景
02 / typography

Typography

商品情報
Sawarabi Gothic / 36px / 400 / line-height: normalページタイトル h1
新商品一覧
Sawarabi Gothic / 30px / 400 / line-height: normalセクションタイトル h2
スナック
Sawarabi Gothic / 22px / 400 / color: #eb0100カテゴリ見出し h3（ブランドレッド）
2026年度スタート！「THE CALBEE」の中の人たち紹介
Sawarabi Gothic / 18px / 400 / line-height: normal記事リード p
ポテトチップス うすしお味
游ゴシック / 18px / 700 / line-height: normal商品名 p（太字）
カルビーグループの情熱や愛情をクイズで探る！動画シリーズ「クイズカルビー！」が好評配信中。じゃがいもの生産地や生産者が見つかる。
游ゴシック / 16px / 400 / line-height: normal本文 p
採用情報  ·  企業情報  ·  お問い合わせ
Sawarabi Gothic / 14px / 400サブナビゲーション
03 / products

Product Cards

ポテトチップス

ポテトチップス うすしお味

スナック
じゃがりこ

じゃがりこ サラダ

スナック
フルグラ

フルグラ

シリアル
かっぱえびせん

かっぱえびせん

スナック
04 / buttons

Buttons

3 段階の radius 戦略: 6.4px（標準）/ 48px（強調 pill）/ 5px（outline）

一覧を見る
Primary (6.4px)
アレルゲン検索
Pill (48px)
ポテトチップス
Outline (5px)
商品一覧
Outline White (on red)
05 / forms

Forms

デフォルト — border 1px / radius 6.4px
フォーカス — border-color: #eb0100
入力してください
エラー — border-color: #eb0100
06 / layout

Spacing & Width

Spacing Scale

8px
16px
24px
32px
64px
120px

Content Widths

Full Bleed 100vw
Content Area 1100px
Body Text 640px