Design System Preview
WIRED.jp

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

lorem ipsum dolor DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Primary
Black
#000
lorem ipsum dolor / lorem ipsum dolor
White
#fff
lorem / lorem ipsum dolor
Neutral
Near Black
#1a1a1a
lorem ipsum dolor
Dark Gray
#333
lorem ipsum dolor
Medium Gray
#757575
lorem ipsum / lorem ipsum dolor
Light Gray
#999
lorem ipsum / lorem ipsum dolor
Very Light Gray
#e5e5e5
lorem ipsum dolor
Surface & Background
Background
#fff
lorem ipsum
Header BG
#000
lorem ipsum dolor sit
CTA BG
#000
lorem / lorem ipsum
Consent Overlay (Fides)
Overlay Primary
#2b2e35
lorem ipsum lorem ipsum
Overlay BG
#f7fafc
lorem ipsum dolor
Overlay Font
#4a5568
lorem ipsum dolor sit
01b / Colors — Dark Context

lorem ipsum dolor(lorem)

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

On Dark
White on Dark
#fff
lorem / lorem ipsum dolor
Very Light Gray
#e5e5e5
SEE MORE STORIES lorem
Medium Gray
#757575
lorem ipsum
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor — Article Title (h1)
32px / 700 / line-height: 1.625 / letter-spacing: normal / palt: loremlorem ipsum
lorem ipsum dolor — Hero Title (h3)
32px / 700 / line-height: 1.625 / letter-spacing: normal / palt: loremlorem ipsum dolor
lorem ipsum dolor — Card Title (h3)
20px / 700 / line-height: 1.6 / letter-spacing: normal / palt: loremlorem ipsum dolor
lorem ipsum dolor — Section Heading (h2)
18px / 700 / line-height: 1.556 / letter-spacing: normal / palt: loremlorem ipsum
lorem ipsum dolor — body lorem line-height: 1.75 lorem ipsum dolor sit amet consectetur adipiscing elit. palt lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing. ABCabc 123
16px / 400 / line-height: 1.75 / letter-spacing: normal / palt: lorem(body lorem ipsum)lorem ipsum
Trending Stories
WiredMono / 12px / 400 / line-height: 1.33 / letter-spacing: 0.047em / palt: loremlorem ipsum dolor lorem ipsum dolor
Most Recent
WiredMono / 18px / 400 / line-height: 1.556 / letter-spacing: 0.031em / palt: loremlorem ipsum dolor lorem ipsum dolor
Business / Culture / Mobility / Science
WiredMono / 11px / 400 / line-height: 1.18 / letter-spacing: 0.083em / palt: loremlorem ipsum / lorem ipsum dolor
SZ Membership
WiredMono / 11px / 400 / line-height: 1.18 / letter-spacing: 0.1em / palt: loremlorem ipsum
CTA lorem — lorem ipsum dolor
12px / 700 / line-height: 1.333 / palt: loremlorem ipsum dolor CTA
lorem ipsum dolor — © Conde Nast Japan
11px / 400 / line-height: 1.455 / palt: loremlorem ipsum
03 / Article

lorem ipsum dolor sit amet

Science

lorem ipsum dolor sit amet consectetur, lorem AI lorem ipsum

Author Name / 2026.04.06

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

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing. 2026 lorem, lorem ipsum dolor sit amet consectetur adipiscing. ABCabc 123

lorem ipsum dolor sit

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

03b / Article — Dark Context

lorem ipsum dolor(lorem)

Business

lorem AI lorem ipsum dolor sit amet consectetur adipiscing

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

04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Primary CTA
radius: 0
DESIGN.md lorem
Outline
radius: 0
SZ Membership
Rounded
radius: 8px
Accept All
Consent
Inter / radius: 6px
lorem ipsum dolor
Inverted CTA
Menu Button
on dark
SEE MORE STORIES
WiredMono Link
on dark
05 / Cards

lorem ipsum dolor sit

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

16:9 Image
Science

lorem ipsum dolor sit amet consectetur

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

16:9 Image
Culture

AI lorem ipsum dolor sit amet consectetur

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

16:9 Image
Mobility

lorem ipsum dolor sit amet consectetur

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

05b / Cards — Dark Context

lorem(lorem)

16:9 Image
Business

Web3.0 lorem DAO: lorem ipsum dolor

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

16:9 Image
Environment

lorem ipsum dolor sit amet consectetur adipiscing

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

16:9 Image
Health

mRNA lorem ipsum dolor sit amet consectetur

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

06 / Forms

lorem ipsum dolor

Default — border: #e5e5e5, radius: 0
Focus — border: #000
Error — border: #c00
07 / Elevation

Depth & Elevation

WIRED lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur(lorem ipsum)lorem ipsum.

Flat (Default)
lorem. lorem ipsum dolor, lorem ipsum dolor sit amet consectetur
Image Overlay
rgba(0,0,0,0.4) overlay
lorem ipsum dolor
Border vs Borderless
lorem ipsum dolor sit
08 / Layout

lorem ipsum

Conde Nast lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolorlorem ipsum / lorem ipsum
lorem ipsum dolorlorem ipsum dolor (100%)
Spacing Principles
lorem ipsum dolor sit
lorem ipsum dolor sit amet consectetur
WIRED
lorem ipsum dolor