An unofficial, original Apple-inspired product system built around quiet product theater and confident buying paths, responsive proof surfaces, and 11 research-selected elements.
Includes DESIGN.md, tokens.json, full CSS, Tailwind v4 token mapping and matching UI specimens. Preview for free; protected guidance and style downloads require Starter or Super. Framework installation and theme support are verified only where listed.
Delivered component specimen
Inspect the kit's typography, palette, icons, spacing and motion.
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.
Reference style: Quiet product theater with cool neutrals, high contrast type, and one confidentTypography
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.
Assigned collection
11 published components in collection order
Components
These working component previews are supplied with the kit. Open a component to inspect its code; the reference screenshots show the original website.
More AI Kits
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 16 retained, evidence-backed interface patterns.
13 focused, original elements for Borderless Ledger.
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.
