Tab · Build

Design

Stop reinventing buttons — the tokens, type ramp, and motion are right here. The design system reference: every color, every spacing token, every type size, light + dark variants, motion curves — one source-of-truth doc the whole team (humans and agents) reads before adding a hex.

See it in motion

Where to find it

  • Localhost: http://localhost:4000/design.html?repo=<id>
  • On disk: .claude/brain/design.md (source) + public/theme/repoops-theme.css (live tokens)
  • Mirror: website/remotion/tokens.ts — same tokens, used by the video walkthroughs
  • Keyboard: ⌘ K then design
  • Sidebar: Build → Design

What it does for you

Tokens, not magic numbers.Every color, spacing, radius, and shadow is a named token. Use the token; never hand-type a hex. The doc lists every token with its light + dark value, the reasoning behind the ramp, and the failure modes the system is designed to prevent.
Light + dark always ship together.Every token has both values. No half-implemented dark mode; no “light support coming soon.” The doc enforces the pair — a CI brain-drift gate flags any token added without its sibling.
Motion is curated, not improvised.A handful of named easings + durations. The doc tells you when to use which; consistent motion is half of feeling polished. Remotion shares the same tokens so the marketing videos move in the same idiom as the product.
Your AI uses the system without being told.Because the tokens live in .claude/brain/design.md, every agent that reads the brain inherits them. Copilot, Cursor, Claude Code — they all stop inventing colors once this doc is on disk.

Configure

Tokens live in public/theme/repoops-theme.css and mirror in website/remotion/tokens.ts. Change one → change both in the same PR. The brain doc at .claude/brain/design.md is the prose source; npm run sync-brain regenerates the HTML twin.

  • --surface / --surface-2 — base + raised surfaces.
  • --text / --text-2 / --muted — three text weights.
  • --accent / --accent-glow — primary action + halo.
  • --radius-sm / --radius-md / --radius-lg — three radii, no others.

Use it well

  1. Search the doc before adding a token.

    The token probably already exists. The cost of a duplicate token is permanent: every consumer has to choose, and the choice rots.

  2. Add the light + dark pair atomically.

    A new token without its sibling fails the brain-drift gate. Light and dark ship together — no “dark mode coming soon” phase.

  3. Update both CSS and Remotion mirrors.

    public/theme/repoops-theme.css drives the product surfaces; website/remotion/tokens.ts drives the videos. They are mirrors — not siblings.

  4. Document the use case.

    Every new token gets a one-line “when to use” in .claude/brain/design.md. Three similar one-offs is fine; a fourth means you needed a token.

Examples

✓
Adding a new accent color
Add --accent-warn + --accent-warn-glow to public/theme/repoops-theme.css with both light + dark values; mirror in website/remotion/tokens.ts; document the use case in .claude/brain/design.md; run npm run sync-brain; commit all four files together.
⚠
When you're tempted to hand-type a hex
That's the moment to stop and grep the brain doc. If the token doesn't exist, the question isn't “what color” — it's “what semantic role.” Name it by role (--accent-warn), not by hue (--orange).

Read more