design system preview

水と生きる SUNTORY

Suntory（suntory.co.jp）から抽出したデザイントークンのカタログ。游ゴシック / ヒラギノの OS フォント、薄い水色面、Suntory Blue の outline pill CTA。computed style 実測値に基づく。

すべての商品一覧 DESIGN.md を読む
01 / colors

Color Palette

brand
Suntory Blue
#0075a8
アクセント・バッジ
Light Blue
#5bc2dc
軽やかなアクセント
text
Text Primary
#000000
本文・見出し（純黒）
Text Secondary
#333333
News 本文
Text Muted
#666666
注釈
surface
Background
#ffffff
標準背景
Surface Tint
#edf4f7
最頻出の薄水色面
Surface 2
#f5f5f5
補助面
cta border
CTA Border
#cccccc
outline pill 細罫線
02 / typography — 実測値

Typography

水と生きる SUNTORY
ヒラギノ角ゴ W3 / 36.65px / 700 / line-height: 1.75 (64.13px) / letter-spacing: 1.12pxHero h2
最新のニュースリリース
ヒラギノ角ゴ Pro W3 / 28px / 700 / line-height: 2.28 (63.84px)News h3
商品 / キャンペーン / ニュース
ヒラギノ角ゴ W3 / 24.42px / 700 / line-height: 2.0 (48.83px) / letter-spacing: 1.12pxSub-Heading
事業領域
ヒラギノ角ゴ W3 / 18px / 700 / line-height: 1.0Item Title (nav)
サントリーグループは「人と自然と響きあい、 豊かな生活文化を創造し、 『人間の生命の輝き』をめざす」を企業理念として、世界中のお客様に愛されるブランドを提供するグローバル飲料食品メーカーです。
ヒラギノ角ゴ Pro W3 / 16px / 400 / line-height: 1.7 (27.2px)Body
最新のお知らせ
ヒラギノ角ゴ W3 / 14.11px / 700 / line-height: 1.75 (24.7px)Caption
© SUNTORY HOLDINGS LIMITED.
ヒラギノ角ゴ W3 / 12px / 400 / line-height: 1.33 (16px)Small
水と生きる
Mizu To Ikiru — Suntory のコーポレートメッセージ
03 / products — news cards

News Releases

News
2026.05.07

新商品「天然水スパークリング 春みかん」発売のお知らせ

サントリー食品インターナショナルは、人気の「天然水スパークリング」シリーズに新フレーバーを追加します。
Campaign
キャンペーン

BOSS ボトルキャンペーン2026夏

缶コーヒー BOSS のキャンペーンが開幕。応募で抽選 1,000 名様に景品をプレゼント。
Group
グループ会社

サントリー美術館「水と日本美術」展のお知らせ

東京・六本木のサントリー美術館にて、企画展「水と日本美術」を開催します。
04 / buttons

Buttons & Tags

すべての商品一覧
Outline Pill (radius 30px)
検索する
Solid Blue (radius 8px)

Category Tags

商品 キャンペーン・CM ニュースリリース グループ会社
05 / forms

Forms

デフォルト — 背景 #edf4f7 / radius 8px
フォーカス — border 1px solid #0075a8 / 背景 #ffffff
06 / layout

Spacing & Width

Spacing Scale

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

Content Widths

Full Bleed Hero 100vw
Article Section 1100px
Body Text 720px