Design System Preview

UCC lorem ipsum
lorem ipsum dolor

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem, lorem ipsum, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. computed style lorem ipsum dolor.

lorem ipsum dolor DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
UCC Red
#e60012
lorem ipsum dolor / CTA
UCC Red Dark
#cc0010
lorem / lorem ipsum
Text
Text Primary
#333333
lorem ipsum dolor
Text Secondary
#666666
lorem ipsum dolor
Text Muted
#786f5a
lorem ipsum dolor / lorem
Surface
Background
#ffffff
lorem ipsum
Beige
#f2ecde
lorem ipsum dolor sit amet
Light Pink
#fef3f4
lorem ipsum dolor
Light Gray
#f7f7f7
lorem ipsum dolor sit
Border
Border Light
#eeeeee
lorem / lorem ipsum
Border Medium
#cccccc
lorem / lorem ipsum dolor
Divider
#d2d2d2
lorem ipsum dolor sit
Semantic
Success
#27ae60
lorem / lorem
Danger
#c0392b
lorem / lorem
Warning
#f39c12
lorem / lorem
02 / Typography

lorem ipsum dolor sit

Display — UCC lorem ipsum dolor sit
Noto Sans JP / 38px / 300 / line-height: 1.25 / pkna: loremlorem ipsum dolor
Section Heading — lorem ipsum dolor
Noto Sans JP / 30px / 300 / line-height: 1.25 / pkna: loremlorem ipsum dolor
English Label — Coffee Knowledge
Raleway / 16px / 400 / line-height: 1.75 / letter-spacing: 0.2em / UCC Redlorem ipsum
Sub Heading — lorem ipsum dolor sit amet
Noto Sans JP / 20px / 400 / line-height: 1.75 / pkna: loremlorem ipsum
Action Heading — lorem ipsum dolor sit amet
Noto Sans JP / 22px / 500 / line-height: 1.6 / pkna: loremlorem ipsum dolor
CM Heading — lorem TV-CM lorem
Noto Sans JP / 18px / 600 / line-height: 1.6 / pkna: loremCM / lorem
Body — UCC lorem ipsum 1933 lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. ABCabc 0123456789
Noto Sans JP / 15px / 400 / line-height: 1.75 / pkna: loremlorem / lorem
Caption — lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur.
Noto Sans JP / 13px / 400 / line-height: 1.75 / Text Secondarylorem ipsum dolor
Footer Nav — lorem ipsum dolor sit ｜ lorem ipsum ｜ lorem ipsum dolor
Noto Sans JP / 12px / 400 / line-height: 1.75 (lorem 4.17 lorem padding lorem)lorem ipsum
03 / Article

lorem ipsum dolor

Coffee Knowledge

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur.

lorem — lorem ipsum dolor

lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur. lorem ipsum 90–93 lorem ipsum dolor.

UCC lorem ipsum — lorem ipsum

UCC lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing.

lorem — lorem ipsum dolor sit

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing elit.

※ lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing.

04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Primary CTA
radius: 0px
lorem ipsum
Secondary
radius: 0px
Pill Button
radius: 18px
Page Top
Raleway
Button States
lorem ipsum
Default
lorem
Hover
lorem
Disabled
05 / Cards

lorem ipsum dolor sit

Action Cards — radius: 20px
☕

lorem ipsum dolor

lorem ipsum, lorem, lorem ipsum dolor. lorem ipsum dolor sit amet consectetur adipiscing elit.

🌱

lorem ipsum

lorem ipsum, lorem ipsum, lorem ipsum. lorem ipsum dolor sit amet consectetur adipiscing.

🏠

lorem ipsum dolor

lorem ipsum UCC lorem / lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur.

News Cards — radius: 4px
2026.06.10
lorem

UCC BLACK lorem lorem ipsum dolor sit amet consectetur

2026.05.28
lorem ipsum

UCC lorem ipsum dolor lorem ipsum dolor sit

2026.05.15
lorem ipsum dolor

lorem ipsum dolor sit amet consectetur lorem ipsum 2026

Footer Link Cards

lorem ipsum

lorem ipsum

IR lorem

06 / Forms

lorem ipsum dolor

lorem ipsum — border: #cccccc, radius: 4px
lorem ipsum — border: #e60012 (UCC Red), shadow: rgba(230,0,18,0.15)
lorem ipsum dolor sit amet consectetur adipiscing.
lorem — border: #c0392b (Danger)
lorem ipsum dolor — lorem ipsum dolor
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem — CTA, lorem ipsum dolor
Level 1
0 2px 8px rgba(0,0,0,0.08) — lorem
Level 2
0 4px 16px rgba(0,0,0,0.10) — lorem ipsum dolor
Level 3
0 8px 24px rgba(0,0,0,0.12) — lorem ipsum
Focus Ring
#e60012 + rgba(230,0,18,0.15)
08 / Layout

lorem ipsum dolor & lorem ipsum

Spacing Scale
4px
8px
16px
24px
40px
64px
Content Widths
Page Container 1200px
Content Area 960px
Article Body 640px
Form Max Width 400px