---

name: awesome-apple-design description: Use this skill to generate well-branded interfaces and assets for Awesome Apple, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping. user-invocable: true

Read the README.md file within this skill, and explore the other available files.

If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and create static HTML files for the user to view. If working on production code, you can copy assets and read the rules here to become an expert in designing with this brand.

If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts or production code, depending on the need.

Quick reference

• Tokens: colors_and_type.css — import this first. Contains all color, type, spacing, radius, shadow, and motion variables.
• Brand assets: assets/logo-mark.svg, assets/wordmark.svg (dark-on-light), assets/wordmark-light.svg (light-on-dark).
• Components: ui_kits/web_app/Primitives.jsx — Button, Badge, Card, Input, Switch, Eyebrow. Plus Icons.jsx for the line-icon set.
• Reference screens: ui_kits/web_app/index.html — a click-through dashboard + device detail that demonstrates correct use of every primitive.

Non-negotiables

1. Use SF Pro / Inter via var(--font-sans); never hard-code a different font.
2. The accent color is Pulse (--aa-pulse-400). Ember is warm-only / editorial.
3. Periods on headings. No emoji. No exclamation marks. No hype words.
4. Cards: --r-xl, --shadow-1, hairline border. Buttons: pill shape.
5. Animations are short and out-eased; no bounces or springs.

When in doubt, consult the VISUAL FOUNDATIONS, CONTENT FUNDAMENTALS, and ICONOGRAPHY sections of the README.

Awesome Apple Design System

A premium consumer-tech design system for Awesome Apple — a fictional but fully specified brand for beautifully engineered products and the Studio web app that lives behind them. Apple-inspired in spirit (quiet composition, restrained typography, product-first layout), but with its own identity: a cool graphite palette, a vivid Pulse accent, and a San Francisco-style type stack with Inter as the public-web fallback.

Scope: desktop / web app, plus the brand foundations needed for marketing moments.

---

Index

Path	What's inside
colors_and_type.css	All design tokens — color, type, spacing, radius, shadow, motion
assets/	Logo mark, wordmark (dark + light backgrounds)
preview/	Individual review cards shown in the Design System tab
ui_kits/web_app/	Click-through React prototype of Studio, the web app
SKILL.md	Portable skill manifest (works in Claude Code)

---

Sources & references

• Reference site: apple.com — used as a visual-quality reference only. No brand marks, product names, product imagery, copy, typography, or distinctive layouts from Apple's own site are reproduced.
• Inspector capture: 2026-04-18T07-25-46/ (local mount) — an apple.com DOM selector snapshot that informed our calibration of whitespace, translucent nav, and pill buttons as a category convention, not as a source to copy from.
• User screenshot: uploads/annotation-1-viewport.png — layout/density reference.

All brand identity, palette names, typography choices, product names, and copy examples are original to Awesome Apple.

---

Content fundamentals

Copy is the quietest part of the product. It reads like a confident engineer who had one thing to say, said it, and stopped.

Voice rules

• Short and declarative. Most headings are three to six words. Sub-copy is one or two sentences.
• Product-led. Lead with the thing, not the feeling. "Barely there." / "Signal, reimagined." / "Night mode, elevated." — object first, qualifier second.
• First person plural or no person. Say "we" sparingly. Avoid "you" unless speaking to a user in-app (preferences, confirmations). In marketing, describe the object.
• No exclamation marks. Ever. Confidence doesn't raise its voice.
• Periods on headings. Each heading ends with a period. It gives finality.
• Title case for product names, sentence case everywhere else. Aurora Pro, Pulse Buds, Studio, but Check for updates, Add a device.
• Numbers are quantifications, not decorations. "4.9mm thin", "512 GB", "99.98% uptime". Never drop a stat without a unit.
• No emoji. Status is shown by color dots, icons, or typography.
• No hype words. Banned: revolutionary, game-changing, supercharged, cutting-edge, seamlessly, unleash, magical.

Examples

• ✅ "Engineered to surprise."
• ✅ "Every detail, considered."
• ✅ "Three devices are registered to this household. Everything's nominal, apart from Glass A2 needing a charge soon."
• ❌ "Supercharge your workflow with our revolutionary new dashboard!"

Casing specifics

• Buttons: sentence case. Check for updates, not Check For Updates.
• Eyebrows: UPPERCASE with 0.12em tracking (.eyebrow utility).
• Badge labels: sentence case, one word when possible. Ready. Check. Error. New.

---

Visual foundations

Colors. A graphite ramp for almost everything, one cool Pulse accent for action, one warm Ember accent reserved for editorial moments. Semantic colors are muted and system-UI-like: soft green, amber, red, with very low-saturation backgrounds.

Type. Primary stack resolves to SF Pro on Apple OSes and Inter from Google Fonts elsewhere. Display sizes use tighter tracking (-0.035em). Serif is a utility escape-hatch (ui-serif / New York), used for editorial pull quotes — not a core brand font.

Spacing. 8-based with 2/4 halves for tight surfaces. Layouts tend to breathe — section gaps are 48–96 px on desktop, never smaller than 32.

Backgrounds. Off-white (--bg / graphite-05) for the base; pure white for surfaces. For hero / feature moments, a deep graphite-to-navy gradient (linear-gradient(135deg, #0a0c0e 0%, #14202e 60%, #0a2540 100%)) with a faint Pulse-tinted glow. No repeating patterns, no textures, no hand-drawn illustration, no full-bleed photography grain. Imagery is clean product shots on neutral grounds.

Animation. Short and out-eased. var(--t-fast) (120ms) for state changes, var(--t-base) (220ms) for transitions, var(--t-slow) (420ms) for page-level moves. Easing is cubic-bezier(0.22, 1, 0.36, 1) (calm out-ease). No bounces, no overshoots, no spring physics. Fade + subtle 6–8 px position offset is the default entry.

Hover states. Primary buttons darken one step on the Pulse scale (400 → 500). Ghost buttons shift background one graphite step. Cards get a faint lift via --shadow-2 replacing --shadow-1. No color inversions, no glow.

Press states. transform: scale(0.98) for 80ms. No color change beyond the hover color.

Focus. Always visible. var(--ring-focus) = 0 0 0 3px rgba(10,149,239,0.35). Never remove outlines; replace them with the ring.

Borders. Hairlines are var(--hairline) (1px, graphite-20). Stronger divisions use var(--border) (graphite-30). Never use colored borders except on error states.

Shadows. Three levels, all very subtle. Drop shadows are never the primary way a surface stands out — the graphite backdrop does the work. Inset highlight (--shadow-inset) is used sparingly on the top edge of dark pills and accent chips.

Transparency & blur. The top nav uses backdrop-filter: saturate(180%) blur(20px) over a 72%-white background. Only one element on screen should be translucent at a time.

Corner radii. Surfaces prefer larger radii: cards are --r-xl (20 px), hero tiles --r-2xl (28 px), buttons --r-pill (999 px). Inputs and small chips are --r-md (10 px). Square corners only on full-bleed sections.

Cards. --surface background (white), 1px solid var(--hairline), --r-xl (20 px), --shadow-1. Dark variants drop the border and switch to graphite-80. Feature tiles use a gradient and larger radius.

Layout rules. Content is center-aligned on marketing surfaces; left-aligned in-app. Max content width 1240 px; narrow reading column 720 px. The left rail is fixed at 220 px. Stat numbers are rendered with font-variant-numeric: tabular-nums to prevent jitter.

Imagery vibe. Cool-neutral, evenly lit, no grain, no tint, no seasonal color-grading. Product on a graphite-05 or near-black ground. If used, environmental shots are desaturated and cool-leaning.

---

Iconography

Approach. Line icons, 20 × 20 viewBox, 1.75 stroke, rounded caps and joins, inherit currentColor. Icons are decorative companions to labels, not a language of their own. Size default is 16 px in compact UI, 20 px in navigation, 24 px+ in feature tiles.

No emoji. None, anywhere, ever. State is communicated with a colored dot + label.

No Unicode glyphs as icons. Exception: the search shortcut shows ⌘K as a typographic hint; the chevron in link CTAs uses a single › character for a non-critical decoration.

Where icons live. ui_kits/web_app/Icons.jsx — an inline-SVG set (Home, Device, Activity, Bell, Search, Settings, Check, Chevron, ArrowLeft, Battery, Storage, Plus). Add to this file rather than pulling in Lucide/Heroicons, so stroke style and sizing stay consistent.

If you need an icon that isn't there and can't easily draw it at 1.75 stroke: substitute the closest Lucide icon (which matches our stroke style within one weight step) and flag the substitution in the calling file. Do not mix Heroicons or Material with the native set — the visual vocabulary drifts.

Logo usage. The mark is a rounded graphite tile with a stylized AA monogram and a single Pulse accent bar at the baseline. Min size: 24 px for the mark, 120 px for the lockup. Min clear space: 0.5× tile height on all sides. Never recolor the mark outside #0a0c0e (dark), #f7f8f9 (light), or the inverse on each.

---

Font substitution notes (please flag)

• Primary UI font: declared as -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', .... This means macOS/iOS visitors see real SF Pro; everyone else sees Inter (loaded from Google Fonts). If you want a single web font that looks identical across OSes, ask for SF Pro's web kit and I'll swap it in.
• Mono: JetBrains Mono (Google Fonts). Swap for SF Mono if licensed.
• Serif: only used via ui-serif → 'New York' → Georgia. Nothing to substitute unless you want a third-party serif.

---

Iterate

Every card in the Design System tab is editable — flag any for revision from that pane. See CAVEATS in the turn handoff for what still needs your input.