Design System

Design system

A design system is a short list of tokens in code and one page that says which token to use when. Every screen uses tokens, never raw values. Then a change in one place changes the whole app, and an agent can review a screen against one page.

Start from mac-design. Tokens cover only what the system does not: the accent, custom surfaces, radii, motion, overlays, and custom controls.

The app keeps Apple's look. Only the accent color changes. For parts of your own (a custom sidebar, buttons, icons), call the Skill tool with design-kit. To copy the look of an app the user names, call it with design-from-app.

The template already has the base in Sources/<App>/UI/:

• Theme.swift: the accent colors (Theme.all), the saved choice (ThemeStore), the tokens Palette.accent, Palette.accentText, Palette.onAccent, and .themed(), which tints every scene.
• AppearanceSettings.swift: Settings > Appearance, where people pick the accent. Light and dark mode follow the Mac. Apple advises against an app-specific mode setting; add a System/Light/Dark picker only when the owner asks for one, with System as the default. [HIG Dark Mode]
• Grid.swift: spacing (see the layout-grid skill).

1. Pick the accent

Read ## Look in docs/BRIEF.md. With no color named, keep system: it follows the accent color the person set for their Mac.

For a brand color, set ThemeStore.brand to a Theme with three shades: light (accent text in dark mode), base (fills and tint), and deep (accent text in light mode). Set darkText: true when white text on base is hard to read (yellow, mint, cyan). Keep ThemeStore.defaultID = "system". The brand then shows only while the Mac's accent is Multicolor, as in Apple's apps. Any other accent the person chose for their Mac wins, and so do sidebar icons, which people expect in their own accent. [HIG Color, Sidebars]

Use brand color sparingly: the app icon, an empty state, one hero element in the content. Keep it off most controls. [HIG Branding]

To compare colors, take snapshots with APP_ACCENT=<id> for two or three of them and show the user the PNGs. Keep the picker in Settings, so people can still choose their own color.

Check: ThemeStore.defaultID is "system", and the snapshots show the accent on buttons, toggles, and selection in light and dark mode.

2. Collect

New app with no views yet? Skip this step: write the token files with the defaults below before the first view.

Existing app: read every view. List each raw value you find: hex colors, opacities, corner radii, paddings, frame widths, animation durations and curves, custom button styles. Group them. Most apps have 3 to 5 of each where 1 or 2 are meant.

3. Write the tokens

Accent values live in Theme.swift. The rest get one file per group in Sources/<App>/UI/. Add each token when the app first needs it:

Surfaces adapt to light and dark. Views read the accent through .tint or Palette, so a new choice in Settings redraws the whole app.

4. Write design/DESIGN-SYSTEM.md

One section per file above. Each section says which token to use when, and the rules that go with it. Keep it under 100 lines. Rules that transfer to most apps:

• Never hard-code a hex accent. Use .tint or Palette.accent.
• Every custom color has four values: light, dark, and a stronger one of each for Increase Contrast (Color(light:dark:highContrastLight:highContrastDark:) in Theme.swift). [HIG Color]
• Never redefine or copy a semantic color (.separator as text, a label color as a fill). Their values change per release.
• A custom surface in its neutral state is a little translucent, so it picks up the desktop tint like system surfaces. A colored state is opaque.
• A custom font only for headings. Body and captions stay in the system font, and every custom font has a bold weight for the Bold Text setting.
• Accent-colored text uses Palette.accentText. Text on an accent fill uses Palette.onAccent, never a fixed white.
• Style controls with ButtonStyle and ToggleStyle. Never rebuild a control from shapes: it loses the keyboard, focus, and VoiceOver.
• Inner corners are concentric: inner radius = outer radius - inset.
• Every animation goes through Motion, so a per-feature "Full, Fast, Off" setting and Reduce Motion apply everywhere.
• Search results and switchers do not animate. Speed wins.
• Hover never moves a selection. Only a click or a key does.
• Units ("KB/s", "%") never animate. Only the number does (.contentTransition(.numericText())).
• Never animate a view's first layout. Overlays wait one frame, then animate opacity, scale, and a few points of travel.
• Leave room around glass for its shadow (about 3 times the shadow radius).
• One primary button per page or card.

5. Migrate

Replace raw values screen by screen, one commit per screen. After each, build and snapshot (build-and-verify skill). The screen looks the same or better, never worse.

6. Point agents at it

Add one line to the app's CLAUDE.md (create the file if it is missing): "Design rules: design/DESIGN-SYSTEM.md. Use its tokens; never raw colors, radii, or durations."

Done when this finds no hits outside the token files:

bashCopy code
grep -rnE 'cornerRadius: [0-9]{1,2}\b|duration: [0-9]|\.spring\(response|\.snappy\b|\.easeInOut|\.easeOut\(|Color\(hex:|Color\(red:' Sources/ \
  | grep -v 'Path(roundedRect'

(hex strings in data and comments are fine), and DESIGN-SYSTEM.md has a section for every token file.