skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-apple

Apply Apple's design system tokens, typography, and component styles when generating UI.

Updated Feb 23, 2026
Search Tags:#typography#design system#css#ui design#dark mode#apple#color tokens
One-click install
npx skills add https://github.com/deepparser/skills --skill design-apple-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-apple
Source: https://github.com/deepparser/skills/tree/main/design-apple
Command: npx skills add https://github.com/deepparser/skills --skill design-apple-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match Apple's visual identity requires exact design tokens — colors, typography scales, spacing, and component rules — that are tedious to research and easy to get wrong. This Skill provides the complete Apple design system specification so generated UI matches Apple's look and feel. ## Core Features & Use Cases - Complete Design Tokens: Exact color values (Apple Blue #0071e3, #f5f5f7, #1d1d1f), SF Pro typography hierarchy, spacing scale, border radius, and shadow specifications. - Component Styling Rules: Detailed specs for buttons, pill CTAs, cards, translucent glass navigation, forms, and product hero modules. - Light & Dark Previews: Bundled HTML preview files (preview.html, preview-dark.html) showing the design system implemented in both themes for visual verification. - Use Case: Ask for a landing page styled like Apple's website and receive a hero section with a 56px SF Pro Display headline, alternating black and light-gray sections, and 980px pill CTAs. ## Quick Start Use the design-apple skill to create a product landing page styled like apple.com with a hero section and product cards.

Frequently Asked Questions about design-apple

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a website look like Apple's design?▼

Apply Apple's design tokens: SF Pro Display for headlines at 20px and above, SF Pro Text for body, Apple Blue #0071e3 only for interactive elements, and alternating black and #f5f5f7 section backgrounds. Use 980px pill-radius CTAs and tight headline line-heights of 1.07-1.14.

What colors does the Apple design system use?▼

The palette is nearly monochromatic: pure black #000000, light gray #f5f5f7, and near black #1d1d1f for text. The single accent is Apple Blue #0071e3 for CTAs and focus states, with #0066cc for links on light backgrounds and #2997ff on dark.

Does this skill include a dark mode version?▼

Yes, the skill bundles two HTML preview files: preview.html for the light theme and preview-dark.html for the dark theme. Both visualize the full token catalog including colors, typography, buttons, cards, forms, spacing, radius, and elevation.

What font does Apple's website use and how is it applied?▼

Apple uses SF Pro Display at 20px and above and SF Pro Text below 20px, with optical sizing that adjusts letterforms by size. Negative letter-spacing applies at all sizes, from -0.28px at 56px down to -0.08px at 10px.

When should I not use the Apple design style?▼

Avoid it when a brand needs multiple accent colors, heavy shadows, textured or gradient backgrounds, or decorative borders, since Apple's system forbids all of these. It suits product-focused, minimal interfaces rather than dense dashboards or playful consumer apps.

Related Skills

Explore More Design & Creative Skills→
ChoonwooLimChoonwooLim

colorize

Apply a cohesive color strategy to UI designs for visual hierarchy and brand alignment.

Community
Intermediate
hasnahasna

codegen

Generate framework-specific code from json-render UI specification trees.

Official
Intermediate
SwimmingLiuSwimmingLiu
1

audit

Audit UI quality across accessibility, performance, theming, and responsive design.

Community
Advanced
timchaptimchap

popular-web-designs

Generates HTML/CSS pages styled after 54 real brand design systems.

Community
Intermediate