Design System
Accent color and design system for a macOS app, from the app's accent and the accent...
Install
npx skills add daveebbelaar/bama --skill design-system -g -a claude-code -y- Repository
- daveebbelaar/bama1.3k
- Category
- Design
- Updated
- 3d ago
- License
- MIT
- Context cost
- Mediumabout 1,640 tokens
- Runs scripts
- No, instructions only
What it does
Accent color and design system for a macOS app, from the app's accent and the accent picker in Settings to Swift tokens in code plus a design/DESIGN-SYSTEM.md that says which token to use when. Use when the user wants a brand or accent color, wants people to pick a color, when an app has more than a few screens, when screens drift apart or animations feel inconsistent, or when the user asks for themes, a style guide, or design tokens.
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 tokensPalette.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 thelayout-gridskill).
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]
