Design System Preview
カルピス — 日本語版

カラダにピース。「カルピス」のデザイン仕様書。1919年創業の国民的飲料ブランド。

商品を見る ブランドストーリー

01 / Colors

カラーパレット

Brand
Calpis Blue
#0033ff
CTA
Dark Navy
#27455c
ダーク背景
Medium Blue
#0053c5
リンク・タイトル
Accent
Medium Navy
#3860be
ピルボタン
Light Blue
#cddcf2
ライト背景
Blue Link
#003399
テキストリンク
Text
Primary
#000000
本文テキスト
Dark
#3c3c3c
補助テキスト
Gray
#696969
メタ情報
Surface & Background
Background
#ffffff
ページ背景
Light Blue
#e8f0fa
ヒーロー背景
Alt
#f8f8f8
交互セクション背景
Footer
#ffffff
フッター背景

02 / Typography

タイポグラフィ階層

商品タイトル — Product Title (22px)
22px / 700 / line-height: 1.2 / color: #0053c5ヒラギノ角ゴ
本文テキスト — 1919年に誕生した「カルピス」は、100年以上にわたり日本で愛され続けている乳酸菌飲料です。甘酸っぱいおいしさとさわやかな味わいが特徴で、世代を超えて親しまれています。
14px / 400 / line-height: 1.5 / letter-spacing: normal本文
小テキスト — Small (12px) — 注釈や補足情報に使用される補助テキスト
12px / 400 / line-height: 1.5 / color: #3c3c3c補助テキスト
フッターテキスト — Footer (10px) — ©ASAHI SOFT DRINKS Co.,LTD.
10px / 400 / line-height: 1.5フッター
リンクテキスト — Link (14px)
14px / 400 / color: #003399テキストリンク

記事の組版サンプル

100年以上受け継がれてきたおいしさ

100年以上受け継がれてきた甘ずっぱい、おいしさの体験と記憶。大切な人と飲みたくなる。「カルピス」は1919年の誕生以来、日本の食卓に欠かせない飲料として親しまれています。

カルピスの歴史

創業者・三島海雲がモンゴルを旅した際に出会った発酵乳が、「カルピス」誕生のきっかけとなりました。乳酸菌と酵母による独自の発酵技術が、あの甘酸っぱいおいしさを生み出しています。


04 / Buttons

ボタンバリエーション

商品を見る
Primary CTA (radius: 2px)
ブランドストーリー
Secondary (Blue Border)
キャンペーン情報
Pill (radius: 17px)
Disabled

05 / Cards

カードコンポーネント

カルピスウォーター

いつでもどこでも楽しめる、すっきりとした味わいのストレートタイプ。さわやかなおいしさをそのまま。

詳しく見る →

カルピスソーダ

「カルピス」のおいしさに炭酸の爽快感をプラス。すっきり爽やかな味わいをお楽しみください。

詳しく見る →

カルピス 原液

お好みの濃さで楽しめる希釈タイプ。水や牛乳で割ったり、料理やお菓子づくりにも。

詳しく見る →

06 / Forms

フォーム要素

デフォルト — border: #ccc, radius: 2px
フォーカス — border: #0033ff (Calpis Blue)
エラー — border: #cc0000

07 / Elevation

Depth & Elevation

Level 0: Flat
影なし・ボーダーのみ(基本パターン)
Level 1: Subtle
0 1px 3px rgba(0,0,0,0.08)
Brand Border
#0053c5 (Medium Blue)
Focus Ring
#0033ff (Calpis Blue)

08 / Layout

コンテンツ幅

Main Content 960px
Article 620px