An unofficial, original Apple-inspired product system built around quiet product theater and confident buying paths, responsive proof surfaces, and 11 research-selected elements.
Foundations
A public overview of the typography, palette, icon language, spacing, shape, and motion used throughout this AI Kit.
Style identity
A quiet product-storytelling system shaped by Apple's current homepage: sparse navigation, large product-led sections, restrained surfaces, and decisive blue purchase paths.
Quiet product theater with cool neutrals, high contrast type, and one confident themeTypography
SF Pro Text / SF Pro Display
Observed site family for body, navigation, controls, and display copy
SF Pro Text, SF Pro Icons, -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, sans-serifFallback: Helvetica Neue, Helvetica, Arial, sans-serif
Palette
Canvas
#f5f5f7Cool gray page field behind product stories
Ink
#1d1d1fPrimary headlines, navigation, and dark CTA surfaces
Secondary ink
#6e6e73Supporting copy and quiet navigation
Surface
#ffffffProduct, card, and picker surfaces
Divider
#d2d2d7Hairlines between calm content regions
Action blue
#0071e3Primary links, purchase actions, and focus
Dark canvas
#050507Explicit dark mode page field
Dark surface
#111113Explicit dark mode cards and controls
Dark action
#2997ffDark mode link and focus color
Positive
#248a3dTrade-in and availability confirmation
Type scale
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Utility | 12px | 400 | 16px | -0.01em |
| Body | 17px | 400 | 25px | -0.02em |
| Link | 14px | 400 | 18px | -0.016em |
| Card title | 32px | 600 | 1.05 | -0.04em |
| Section title | 48px | 600 | 1.02 | -0.055em |
| Hero display | 82px | 600 | 0.96 | -0.075em |
Spacing & shape
Iconography
Use one small glyph per action, keep symbols optically centered, and pair unfamiliar symbols with a visible text label.
System metrics
Radius
Spacing
Motion
Elevation
Product stage
0 22px 70px rgba(29,29,31,.11)Lift a product mock or purchase surface from the page
Menu
0 16px 38px rgba(29,29,31,.14)Quietly separate an open action menu
Surfaces & shape
Page
#f5f5f7 / #050507Light and dark canvas
Raised
#ffffff / #111113Cards, controls, and product windows
Tint
#eeeeF0 / #1c1c1eSecondary panels and selection backgrounds
Guidelines
Imagery
Use original product silhouettes, spacious gradients, and abstract geometry. Do not reuse Apple product renders, logos, screenshots, or campaign copy.
Layout
Use a calm 1180px rail, a sticky compact navigation, large full-bleed story bands, and two-column product proof that collapses to one column below 900px.
Concept
Use the file tree to move between the full reference preview, implementation guidance, portable tokens, and framework-ready styles. Each surface stays focused, so you can understand the system before copying code.
Assigned collection
11 published components in collection order
Components
Production-ready specimens from this AI Kit's approved collection.
More like this
An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.
An unofficial, original v0-inspired Prompt Workshop system grounded in 17 retained, evidence-backed interface patterns.
13 focused, original elements for Borderless Ledger; categories are retained only when supported by the live reference. Published flags remain disabled.
A high-contrast studio language for a platform that moves between creative production, developer workflows, robotics, research, and enterprise. The system uses a dark stage, warm action color, and compact cross-platform wayfinding without copying Runway's wordmark, content, or media. Responsive previews and 8 evidence-backed interface elements.
An original, unofficial Observable-inspired system for reactive notebooks, executable explanations, and data visualization surfaces. It retains only 11 focused elements supported by Observable's live notebook and chart workflows.
A friendly builder language for moving from prompt to app: vivid purple/green accents, a prominent idea field, artifact type selection, parallel execution, built-in infrastructure, team plans, agent chat, and a clear publish handoff. It is an original study without Replit's logo, pixel font, testimonials, screenshots, or protected copy. Responsive previews and 14 evidence-backed interface elements.