Design System Preview
au.com — lorem ipsum

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 sit amet DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
au Orange
#eb5505
lorem CTA / lorem ipsum dolor
au Red
#e40000
lorem ipsum / lorem ipsum
UQ Brand
#e4007f
--webm-brand-uq
Text
Text Dark
#1b1b1b
lorem ipsum dolor
Text Primary
#333333
lorem ipsum dolor
Text Light
#676767
lorem ipsum dolor
Text Muted
#777777
lorem ipsum dolor
Link
#0066aa
lorem ipsum dolor
Semantic
Danger / Alert
#ff0800
lorem ipsum dolor sit
Info / Service
#0e0d6a
lorem ipsum dolor sit
Surface & Border
Background
#ffffff
lorem ipsum
Surface
#f7f7f7
lorem / lorem ipsum dolor
Surface Alt
#f3f3f3
lorem ipsum / lorem ipsum dolor
Border
#d1d1d1
lorem ipsum
Border Light
#e5e5e5
--webm-border
Card Shadow
#e6e6e6
lorem ipsum dolor
02 / Typography — lorem

lorem ipsum dolor sit

Display — lorem ipsum dolor sit amet
50px / 400 / line-height: 1.0 / letter-spacing: normallorem ipsum dolor h2
lorem ipsum dolor — Page Title (h1)
30px / 400 / line-height: 1.4 / letter-spacing: normallorem ipsum
lorem ipsum dolor sit amet.
24px / 700 / line-height: 2.0 / color: #eb5505lorem ipsum h3
lorem ipsum dolor — Section Heading (h2)
24px / 400 / line-height: 1.4 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor sit — Sub Section (h2)
22px / 700 / line-height: 1.4 / letter-spacing: normallorem ipsum
lorem ipsum — Heading 3
20px / 400 / line-height: 1.4 / letter-spacing: normal
lorem ipsum dolor — Heading 3 Bold
18px / 700 / line-height: 1.4 / letter-spacing: normal
lorem ipsum dolor — au lorem, KDDI lorem ipsum dolor sit amet consectetur. lorem ipsum dolor, lorem ipsum, lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. line-height: 1.7 lorem ipsum dolor sit amet consectetur. ABCabc 123
16px / 400 / line-height: 1.7 / letter-spacing: normallorem
lorem ipsum dolor — Global Nav
15px / 700 / line-height: 1.4lorem ipsum dolor
lorem ipsum dolor — Small (14px)
14px / 400 / line-height: 1.7 / color: #676767
lorem ipsum dolor / lorem ipsum dolor — Caption (12px)
12px / 700 / line-height: 1.4lorem ipsum
Banner Font — iPhone 17e lorem!
Helvetica, "lorem ipsum dolor ProN W3", sans-serif / 20px / 700lorem ipsum
03 / Product — lorem ipsum dolor

lorem ipsum dolor sit amet

lorem ipsum dolor / lorem ipsum

lorem ipsum dolor / lorem ipsum

au lorem, iPhone, Android lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum

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

lorem ipsum dolor sit

au lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit sed. lorem ipsumlorem ipsum dolorlorem ipsum dolor.

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

04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor sit amet
Primary CTA (Orange)
radius: 0px, weight: 700
lorem ipsum dolor sit amet consectetur
Secondary (Outline)
radius: 0px, weight: 400
lorem
Danger Outline
radius: 8px (lorem), weight: 700
au Online Shop
Nav Pill
radius: 25px, weight: 700
lorem
Card Nav
radius: 5px, shadow
Android lorem
Outline Small
14px, weight: 400
au ID lorem ipsum
Login CTA
weight: 400
05 / Cards

lorem ipsum dolor sit

iPhone 17e

iPhone 17e

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

lorem ipsum
Galaxy S25

Galaxy S25

lorem ipsum dolor AI lorem ipsum. Android lorem ipsum dolor sit amet consectetur.

lorem ipsum
lorem ipsum

au lorem ipsum dolor sit

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

lorem ipsum dolor
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #d1d1d1, radius: 0px
lorem ipsum — border: #eb5505 (au Orange)
lorem — border: #e40000 (au Red)
lorem au ID lorem ipsum dolor sit.
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem. lorem CTA lorem ipsum
Card Shadow
0px 2px 4px #e6e6e6 — lorem ipsum
Card Hover
0px 4px 12px rgba(0,0,0,0.12) — lorem ipsum
--webm-shadow
rgb(0 0 0 / 10%) — lorem
08 / Layout

lorem ipsum dolor

lorem ipsum dolor sit
radius: 0px(lorem CTA)
radius: 8px(lorem ipsum)
radius: 25px（Nav Pill）
radius: 5px（Card Nav）
lorem ipsum dolor
lorem #1b1b1b
lorem #333333
lorem #676767
lorem ipsum #777777
lorem #0066aa
lorem ipsum dolor
lorem: noto-sans-cjk-jp (Adobe Fonts)
lorem: "Noto Sans JP", sans-serif (Google Fonts)
lorem: Helvetica, "lorem ipsum dolor ProN W3", "Hiragino Kaku Gothic ProN", sans-serif
letter-spacing: normal / font-feature-settings: normal(lorem)