Design System Preview
Apple Japan

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

lorem ipsum DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Primary
Near Black
#1d1d1f
lorem ipsum dolor sit
Pure Black
#000000
lorem ipsum dolor / lorem ipsum dolor
White
#ffffff
lorem ipsum
Light Gray
#f5f5f7
lorem ipsum dolor(lorem)
Interactive
Apple Blue
#0071e3
CTA lorem / lorem ipsum dolor
Link Blue
#0066cc
lorem ipsum dolor
Bright Blue
#2997ff
lorem ipsum dolor sit
Text (opacity)
Primary
rgba(0,0,0,0.88)
lorem ipsum dolor
Secondary
rgba(0,0,0,0.56)
lorem ipsum dolor sit
Nav Text
rgba(0,0,0,0.8)
lorem ipsum dolor
On Dark
#f5f5f7
lorem ipsum dolor sit
Surface
Nav Background
rgba(0,0,0,0.8)
lorem ipsum dolor sit
Nav Opened
#fafafc
lorem ipsum
Glyph Gray
#6e6e73
lorem ipsum dolor
02 / Typography -- lorem

lorem ipsum dolor sit

lorem ipsum dolor
108px / 600 / line-height: 115.56px (x1.07) / letter-spacing: 2.16px (0.02em) / palt: loremHero Display (lorem)
lorem ipsum dolor
64px / 600 / line-height: 67.2px (x1.05) / letter-spacing: normal / palt: loremHero Display (lorem)
lorem ipsum dolor sit
53px / 600 / line-height: 55.65px (x1.05) / letter-spacing: -0.53px / palt: loremHero Display (lorem)
lorem ipsum dolor
40px / 600 / line-height: 44px (x1.10) / letter-spacing: normal / palt: loremSection Heading (h3)
lorem ipsum dolor sit(lorem)
28px / 400 / line-height: 32px (x1.14) / letter-spacing: 0.196px / palt: loremSubtitle
lorem ipsum dolor sit(lorem)
21px / 400 / line-height: 26px (x1.24) / letter-spacing: 0.231px / palt: loremSubtitle (small)
lorem ipsum dolor — Apple lorem ipsum dolor letter-spacing lorem ipsum. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur. font-feature-settings lorem normal lorem, palt lorem ipsum dolor.
17px / 400 / line-height: 25px (x1.47) / letter-spacing: -0.357px / palt: loremBody
lorem ipsum dolor — lorem ipsum(14px)
14px / 400 / line-height: 20.6px (x1.47) / letter-spacing: normalCaption
lorem ipsum dolor sit(12px)
12px / 400 / line-height: 12px (x1.0) / letter-spacing: normalNav Link
lorem ipsum dolor: lorem ipsumSF Pro Display / SF Pro Text lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum (apple.com/jp) loremSF Pro JP lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing elit. lorem, lorem ipsum dolor sit amet“lorem ipsum dolor Pro”(ProN lorem ipsum) lorem ipsum dolor sit amet consectetur.
03 / Product -- lorem ipsum dolor sit amet

lorem ipsum(lorem ipsum)

lorem ipsum dolor MacBook.
lorem ipsum dolor. lorem ipsum dolor.

Apple lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. lorem Liquid Retina lorem ipsum dolor, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor › lorem ipsum ›
03b / Product -- lorem ipsum dolor

lorem ipsum(lorem ipsum)

iPhone. lorem ipsum.
lorem ipsum dolor. lorem ipsum dolor.

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

lorem ipsum dolor › lorem ipsum ›
04 / Buttons

lorem ipsum dolor sit

lorem ipsum
Primary CTA (pill 980px)
lorem ipsum
Outline (pill 980px)
lorem ipsum
Dark Fill (radius 8px)
lorem ipsum
Nav CTA (12px)
lorem ipsum
Primary on Dark
lorem ipsum
Outline on Dark
05 / Cards

lorem ipsum dolor sit

MacBook Air

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

lorem ipsum dolor ›

iPhone 17 Pro

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

lorem ipsum dolor ›

Apple Watch

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

lorem ipsum dolor ›
06 / Forms

lorem ipsum dolor

lorem ipsum -- border: rgba(0,0,0,0.22), radius: 8px
lorem ipsum -- border: #0071e3 (Apple Blue), ring: rgba(0,113,227,0.2)
lorem -- border: #de071c
07 / Elevation

Depth & Elevation

Flat
lorem(Apple lorem)
Card Hover
rgba(0,0,0,0.22) 3px 5px 30px 0px
Focus Ring
0 0 0 3px rgba(0,113,227,0.2)
Nav Glass
rgba(0,0,0,0.8) + backdrop-filter: saturate(180%) blur(20px)
08 / Layout

lorem ipsum dolor sit amet consectetur

Hero Max Width 1680px
Content Max Width 1260px
Breakpoints
Large
≥ 1024px
lorem ipsum dolor
Medium
834px -- 1023px
lorem ipsum
Small
320px -- 833px
lorem ipsum