design system preview

lorem ipsum SUNTORY

Suntory(suntory.co.jp)lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum / lorem ipsum OS lorem ipsum, lorem ipsum, Suntory Blue lorem outline pill CTA. computed style lorem ipsum dolor.

lorem ipsum dolor DESIGN.md lorem
01 / colors

Color Palette

brand
Suntory Blue
#0075a8
lorem ipsum / lorem
Light Blue
#5bc2dc
lorem ipsum dolor sit
text
Text Primary
#000000
lorem / lorem(lorem)
Text Secondary
#333333
News lorem
Text Muted
#666666
lorem
surface
Background
#ffffff
lorem ipsum
Surface Tint
#edf4f7
lorem ipsum dolor
Surface 2
#f5f5f5
lorem
cta border
CTA Border
#cccccc
outline pill lorem
02 / typography — lorem

Typography

lorem ipsum SUNTORY
lorem ipsum dolor W3 / 36.65px / 700 / line-height: 1.75 (64.13px) / letter-spacing: 1.12pxHero h2
lorem ipsum dolor sit amet
lorem ipsum dolor Pro W3 / 28px / 700 / line-height: 2.28 (63.84px)News h3
lorem / lorem ipsum dolor / lorem ipsum
lorem ipsum dolor W3 / 24.42px / 700 / line-height: 2.0 (48.83px) / letter-spacing: 1.12pxSub-Heading
lorem ipsum
lorem ipsum dolor W3 / 18px / 700 / line-height: 1.0Item Title (nav)
lorem ipsum dolor sit“lorem ipsum dolor sit, lorem ipsum dolor sit amet, “lorem ipsum dolor”lorem ipsum”lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.
lorem ipsum dolor Pro W3 / 16px / 400 / line-height: 1.7 (27.2px)Body
lorem ipsum dolor
lorem ipsum dolor W3 / 14.11px / 700 / line-height: 1.75 (24.7px)Caption
© SUNTORY HOLDINGS LIMITED.
lorem ipsum dolor W3 / 12px / 400 / line-height: 1.33 (16px)Small
lorem ipsum
Mizu To Ikiru — Suntory lorem ipsum dolor sit amet
03 / products — news cards

News Releases

News
2026.05.07

lorem“lorem ipsum dolor sit lorem ipsum”lorem ipsum dolor

lorem ipsum dolor sit amet consectetur, lorem“lorem ipsum dolor sit”lorem ipsum dolor sit amet consectetur.
Campaign
lorem ipsum dolor

BOSS lorem ipsum dolor sit 2026 lorem

lorem ipsum BOSS lorem ipsum dolor sit. lorem ipsum 1,000 lorem ipsum dolor sit amet.
Group
lorem ipsum dolor

lorem ipsum dolor“lorem ipsum dolor”lorem ipsum dolor

lorem / lorem ipsum dolor sit amet consectetur, lorem“lorem ipsum dolor”lorem ipsum dolor.
04 / buttons

Buttons & Tags

lorem ipsum dolor
Outline Pill (radius 30px)
lorem ipsum
Solid Blue (radius 8px)

Category Tags

lorem lorem ipsum dolor / CM lorem ipsum dolor lorem ipsum dolor
05 / forms

Forms

lorem ipsum — lorem #edf4f7 / radius 8px
lorem ipsum — border 1px solid #0075a8 / lorem #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