Design System Preview
dentsu — lorem ipsum

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

lorem ipsum DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Base & Surface
Background
#f3f5f7
lorem ipsum(lorem ipsum dolor sit amet)
White
#ffffff
lorem ipsum(lorem ipsum)
Surface Dark
#313131
lorem ipsum dolor sit
Black / Footer
#000000
lorem ipsum / lorem ipsum dolor
Accent
Blue
#009be0
lorem ipsum CTA / lorem
Red
#d83f30
lorem ipsum / lorem
Navy
#254590
lorem ipsum dolor sit
Green
#189f3b
lorem ipsum dolor / lorem
Orange
#e4a334
lorem / lorem
Text & UI
Text Primary
#000000
lorem ipsum dolor
Text Secondary
#666666
lorem ipsum dolor
Placeholder
#999999
lorem ipsum dolor
Border Default
rgba(0,0,0,0.12)
lorem ipsum dolor
02 / Typography — lorem

lorem ipsum dolor sit

lorem ipsum dolor sit amet consectetur
Roboto + Noto Sans JP / 45px / 700 / line-height: 1.3H2 lorem
lorem ipsum dolor sit amet
Roboto + Noto Sans JP / 40px / 700 / line-height: 1.3H3 lorem ipsum dolor
lorem ipsum dolor sit amet consectetur — Digital Transformation
Roboto + Noto Sans JP / 26px / 700 / line-height: 1.75H4 lorem ipsum
lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing.
Noto Sans JP / 15px / 400 / line-height: 1.75 / letter-spacing: normallorem
2026.05.21
Roboto / 13px / 400 / letter-spacing: 0.04emlorem
03 / Article — lorem ipsum

lorem ipsum dolor sit amet consectetur

2026.05.21  |  lorem ipsum dolor

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

lorem ipsum dolor, lorem AI lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut.

lorem ipsum dolor sit amet consectetur adipiscing elit sed, lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.

AI lorem ipsum dolor DX
04 / Buttons

lorem ipsum dolor sit

lorem ipsum
Outline Pill (Light)
lorem ipsum dolor
Neumorphic
lorem ipsum
Outline Pill (Dark)
GDPR / Cookie Consent Bar

lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing Cookie lorem ipsum dolor. lorem ipsumlorem ipsum dolor sitlorem ipsum dolor.

lorem ipsum lorem ipsum
05 / Cards — lorem ipsum dolor sit

lorem ipsum dolor sit

2026.05.15

lorem ipsum dolor sit amet consectetur

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

lorem ipsum
2026.05.08

lorem ipsum dolor sit amet consectetur

lorem 145 lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt.

lorem ipsum
2026.04.28

lorem ipsum dolor sit amet consectetur

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

lorem ipsum
06 / Forms

lorem ipsum dolor

lorem ipsum — lorem ipsum dolor sit inset shadow, radius: 8px
lorem ipsum — border: #000000, focus ring 2px
lorem ipsum dolor sit amet consectetur
lorem — border: #d83f30 (accent-red)
07 / Elevation — lorem ipsum dolor sit

Depth & Elevation

Flat
lorem, lorem ipsum dolor
Neumorphic SM
lorem / lorem
Neumorphic
lorem / lorem(lorem)
Neumorphic LG
lorem ipsum / lorem ipsum dolor
Inset
lorem ipsum dolor / lorem ipsum
08 / Layout

lorem ipsum dolor sit

3-Column Grid
gap: 24px / border-radius: 30px
Column 1
Column 2
Column 3
2-Column Grid (2:1)
lorem ipsum dolor + lorem ipsum
Main Content
Sidebar
Content Widths
max-width lorem
Full Width 1400px
Main Content 1000px
Article 700px