One file rebrands the kit.

DESIGN.md holds your light theme; DESIGN-DARK.md holds dark. Both define colors, rounded, and the typography families. gen:tokens (scripts/tokens-to-css.mjs) compiles them into src/styles/tokens.css, which Tailwind utilities read. Never hand-edit tokens.css, it's generated.

# 1. edit DESIGN.md + DESIGN-DARK.md  (colors, rounded, typography)
# 2. compile tokens
npm run gen:tokens
# 3. the whole kit is now in your brand

Because every surface uses token utilities and never a raw hex, one edit re-skins all screens at once. For typeface specifically, follow agent-skills/swap-font.md.

Change the token at the source rather than reaching for a raw value, so the kit stays consistent and re-brandable from one file. The vocabulary:

• Surfaces: bg-canvas, bg-surface, bg-surface-raised
• Text: text-ink, text-body, text-muted
• Brand / state: bg-primary, text-on-primary, text-accent, text-success, text-danger
• Lines & shape: border-hairline, rounded-sm/md/lg
• Type: font-display (display), font-mono

The single Forest-green accent is for primary actions only, keep it scarce.

Rebranding the visuals is step one. To finish turning the demo into your product:

• App name + icons in public/manifest.json, favicon.ico, and the logos.
• Replace hero copy in the route files and demo records in src/data/mock/*.ts.
• Wire each seam, then remove that screen's StarterNote and 🔌 INTEGRATION comment.

"Make it yours" is done when these three greps come back empty:

grep -rn  "🔌 INTEGRATION" src/      # every seam wired
grep -rni "StarterNote" src/        # component + usages removed
grep -rni "duply launch kit" src/   # starter naming gone

The agent playbook for all of this is agent-skills/make-it-yours.md.