# Design System

Accent color and design system for a macOS app, from the app's accent and the accent...

- Repository: https://github.com/daveebbelaar/bama (1284 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add daveebbelaar/bama --skill design-system -g -a claude-code -y`
Codex: `npx skills add daveebbelaar/bama --skill design-system -g -a codex -y`
Cursor: `npx skills add daveebbelaar/bama --skill design-system -g -a cursor -y`
Gemini CLI: `npx skills add daveebbelaar/bama --skill design-system -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add daveebbelaar/bama`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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]

The rest: https://github.com/daveebbelaar/bama/blob/HEAD/skills/design/design-system/SKILL.md