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
. 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
. To copy the look of an app the user names, call it with
.
The template already has the base in
:
- : the accent colors (), the saved choice
(), the tokens , ,
, and , which tints every scene.
- : 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]
- : spacing (see the skill).
1. Pick the accent
Read
in
. With no color named, keep
: it
follows the accent color the person set for their Mac.
For a brand color, set
to a
with three shades:
(accent text in dark mode),
(fills and tint), and
(accent text in light mode). Set
when white text on
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
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:
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
. The rest get one file per group in
. Add each token when the app first needs it:
| File | Holds |
|---|
| the accents, , , and : , (text and symbols on accent fills), (accent-colored text: deep shade in light mode, light shade in dark mode) |
| the spacing scale () and the layout probes |
| , , , one warning color |
| chips and key caps, controls, row hover fills, cards, widgets, floating glass |
| , fixed column and sheet widths |
| , (presses, small flips), , (selection moving through a live list), , , , , , loops () that stop under Reduce Motion |
| more control styles: , , toggles, chips |
| one panel builder, one entrance, one exit |
Surfaces adapt to light and dark. Views read the accent through
or
, 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 or .
- Every custom color has four values: light, dark, and a stronger one of
each for Increase Contrast (
Color(light:dark:highContrastLight:highContrastDark:)
- Never redefine or copy a semantic color ( 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 . Text on an accent fill
uses , never a fixed white.
- Style controls with and . 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 , 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 (
skill). The screen looks the same or
better, never worse.
6. Point agents at it
Add one line to the app's
(create the file if it is missing):
"Design rules:
. Use its tokens; never raw colors,
radii, or durations."
Done when this finds no hits outside the token files:
bash
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.