디자인 시스템
web
v1.0.0
90/100

Apple

@dante · Media & Consumer

Premium consumer-electronics design language: pure white or absolute black canvases, SF Pro typography, hairline borders, and product-first centered hero compositions.

HTML/CSS
React
shadcn/ui
Tailwind
#centered
#consumer
#minimal
#premium
#sf-pro
Apple
다운로드10
패키지 JSON 다운로드
DESIGN.mdSKILL.md

개요

Apple

Principles

  • Product is the protagonist. UI chrome disappears; hardware photography and material rendering carry visual drama. The interface should never compete with what it sells.
  • Binary chapter rhythm. Pages alternate between absolute black (#000000) cinematic chapters and pale Apple gray (#f5f5f7) editorial fields, with pure white (#ffffff) reserved for dense retail and configuration surfaces.
  • Two gears, one system. Showcase mode (cinematic, oversized typography, broad whitespace) and transaction mode (compact rows, dense option matrices) share identical tokens. Never split them into separate visual languages.
  • Center-aligned premium feel. Hero headlines, eyebrows, body copy, and CTAs stack on the vertical centerline above a single product photograph. Asymmetric layouts are reserved for retail comparison grids.

Color

The neutral triad is the structural foundation: absolute black, pure white, pale Apple gray. Near-black ink (#1d1d1f) handles primary text on light surfaces; secondary neutral gray (#6e6e73) handles supporting copy. Apple action blue (#0071e3) is the only accent — reserved for genuine action and focus signals. Body link blue (#0066cc) is for inline links on light, high-luminance link blue (#2997ff) for links on black. Graphite stops (#272729–#2a2a2c) provide subtle separation in dark utility clusters. Never introduce a competing accent palette.

Typography

SF Pro Display carries hero, product, and chapter headlines with semibold weight, tight tracking (-1.2px to -0.144px), and compressed line-heights (1.05–1.10). SF Pro Text carries body, controls, navigation, and dense commerce copy at 12–17px with measured negative tracking. SF Mono is reserved for spec/technical readouts. Weight 600 is the dominant emphasis tier; 700 is selective; 300 appears only at large display sizes for tonal contrast. Substitutes (Inter / Inter Tight) need looser line-heights.

Layout

Base 8px unit with reusable steps (4, 6, 8, 12, 14, 17, 20). Showcase pages use one wide central column with broad outer margins; commerce pages compress to multi-column option grids. Whitespace is the primary separator — surface color change replaces decorative dividers. Border-radius scales tier by component class: 8–12px controls, 16–18px cards, 28–36px spotlight modules, 980px capsule CTAs, 50% circular media controls.

Depth

Depth is restrained. Hairline borders (#d2d2d7, #86868b) and tonal contrast do nearly all of the layering work. Shadows are reserved for elevated merchandise modules and stay subtle (rgba(0,0,0,0.08–0.22)). Avoid colored drop shadows, glow effects, and decorative gradients in core UI chrome — let photography supply the richness.

프리뷰

새 창으로 열기 ↗

패키지 안의 토큰·컴포넌트 정의로부터 순수하게 합성된 파생 뷰입니다 (편집 콘텐츠 없음).

색상 (15)

absoluteBlack
#000000
paleAppleGray
#f5f5f7
nearBlackInk
#1d1d1f
pureWhite
#ffffff
appleActionBlue
#0071e3
bodyLinkBlue
#0066cc
highLuminanceLinkBlue
#2997ff
graphiteSurfaceA
#272729
graphiteSurfaceB
#262629
graphiteSurfaceC
#28282b
graphiteSurfaceD
#2a2a2c
secondaryNeutralGray
#6e6e73
softBorderGray
#d2d2d7
midBorderGray
#86868b
utilityDarkGray
#424245

타이포그래피 (3)

display
SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
body
SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
mono
SF Mono, ui-monospace, Menlo, monospace
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234

컴포넌트 (14)

Button

Primary capsule action. Apple action blue fill on light canvas; near-black fill as restrained alternative.

html
Hand-tuned CSS, no framework
2 props · 6 states · 8 tags · 2 소스

Input

Retail-density text input with mid-gray hairline border. Quiet so product imagery and pricing dominate.

html
Hand-tuned CSS, no framework
2 props · 5 states · 4 tags · 2 소스

Card

Editorial card on pale Apple gray. Image-first composition, no shadow, generous padding.

html
Hand-tuned CSS, no framework
2 props · 2 states · 6 tags · 2 소스
누락 상태: focus-visible, disabled

Badge

Compact pill label for product status (New, Available, Pre-order).

html
Hand-tuned CSS, no framework
1 props · 1 states · 6 tags · 2 소스
누락 상태: hover, focus-visible, disabled

Heading

Oversized SF Pro Display headline with tight tracking. Center-aligned by default.

html
Hand-tuned CSS, no framework
1 props · 1 states · 7 tags · 2 소스
누락 상태: hover, focus-visible, disabled

Link

Inline action link in body link blue with chevron. High-luminance variant for dark surfaces.

html
Hand-tuned CSS, no framework
1 props · 3 states · 6 tags · 2 소스
누락 상태: disabled

Hero

Center-aligned cinematic hero. Black canvas, oversized SF Pro Display headline, two capsule CTAs, single product image slot below.

html
Hand-tuned CSS, no framework
1 props · 1 states · 8 tags · 2 소스
누락 상태: hover, focus-visible, disabled

Nav

Compact translucent global nav. Small SF Pro Text links, restrained iconography, equal spacing.

html
Hand-tuned CSS, no framework
0 props · 2 states · 6 tags · 2 소스
누락 상태: focus-visible, disabled

Footer

Quiet legal/meta footer. Pale Apple gray surface, soft border divider, micro typography.

html
Hand-tuned CSS, no framework
0 props · 1 states · 7 tags · 2 소스
누락 상태: hover, focus-visible, disabled

Stat

Centered stat block: oversized display number with a small SF Pro Text label below.

html
Hand-tuned CSS, no framework
2 props · 1 states · 5 tags · 2 소스
누락 상태: hover, focus-visible, disabled

ProductCard

Center-aligned merchandise tile: eyebrow, product name, tagline, price, and capsule CTA on pale Apple gray.

html
Hand-tuned CSS, no framework
3 props · 2 states · 9 tags · 2 소스
누락 상태: focus-visible, disabled

FeatureBlock

Full-bleed editorial chapter: large display headline + supporting copy on a pale Apple gray canvas.

html
Hand-tuned CSS, no framework
0 props · 1 states · 6 tags · 2 소스
누락 상태: hover, focus-visible, disabled

SegmentedControl

Pill-shaped segmented selector for product configuration (storage, color, model).

html
Hand-tuned CSS, no framework
1 props · 5 states · 5 tags · 2 소스

Toggle

Capsule toggle switch. Apple action blue when on; soft border gray track when off.

html
Hand-tuned CSS, no framework
1 props · 5 states · 7 tags · 2 소스

DESIGN.md

Apple

Principles

  • Product is the protagonist. UI chrome disappears; hardware photography and material rendering carry visual drama. The interface should never compete with what it sells.
  • Binary chapter rhythm. Pages alternate between absolute black (#000000) cinematic chapters and pale Apple gray (#f5f5f7) editorial fields, with pure white (#ffffff) reserved for dense retail and configuration surfaces.
  • Two gears, one system. Showcase mode (cinematic, oversized typography, broad whitespace) and transaction mode (compact rows, dense option matrices) share identical tokens. Never split them into separate visual languages.
  • Center-aligned premium feel. Hero headlines, eyebrows, body copy, and CTAs stack on the vertical centerline above a single product photograph. Asymmetric layouts are reserved for retail comparison grids.

Color

The neutral triad is the structural foundation: absolute black, pure white, pale Apple gray. Near-black ink (#1d1d1f) handles primary text on light surfaces; secondary neutral gray (#6e6e73) handles supporting copy. Apple action blue (#0071e3) is the only accent — reserved for genuine action and focus signals. Body link blue (#0066cc) is for inline links on light, high-luminance link blue (#2997ff) for links on black. Graphite stops (#272729–#2a2a2c) provide subtle separation in dark utility clusters. Never introduce a competing accent palette.

Typography

SF Pro Display carries hero, product, and chapter headlines with semibold weight, tight tracking (-1.2px to -0.144px), and compressed line-heights (1.05–1.10). SF Pro Text carries body, controls, navigation, and dense commerce copy at 12–17px with measured negative tracking. SF Mono is reserved for spec/technical readouts. Weight 600 is the dominant emphasis tier; 700 is selective; 300 appears only at large display sizes for tonal contrast. Substitutes (Inter / Inter Tight) need looser line-heights.

Layout

Base 8px unit with reusable steps (4, 6, 8, 12, 14, 17, 20). Showcase pages use one wide central column with broad outer margins; commerce pages compress to multi-column option grids. Whitespace is the primary separator — surface color change replaces decorative dividers. Border-radius scales tier by component class: 8–12px controls, 16–18px cards, 28–36px spotlight modules, 980px capsule CTAs, 50% circular media controls.

Depth

Depth is restrained. Hairline borders (#d2d2d7, #86868b) and tonal contrast do nearly all of the layering work. Shadows are reserved for elevated merchandise modules and stay subtle (rgba(0,0,0,0.08–0.22)). Avoid colored drop shadows, glow effects, and decorative gradients in core UI chrome — let photography supply the richness.

어댑터 (6)

전체 파일 (11)

  • DESIGN.mdtext/markdown
  • SKILL.mdtext/markdown
  • tokens/colors.jsonapplication/json
  • tokens/typography.jsonapplication/json
  • tokens/components.jsonapplication/json
  • adapters/tokens.csstext/css
  • adapters/shadcn-registry.jsonapplication/json
  • adapters/tailwind.config.jstext/javascript
  • adapters/react/index.tstext/typescript
  • adapters/html/index.htmltext/html
  • adapters/html/styles.csstext/css

버전