# Product — brand system

Generated by the branding-agent engine from a single **seed** (20 fields).
Everything below is *derived* — no token here was hand-authored.

- **slug:** `product`
- **source:** designmd://product
- **primary seed color:** `#1677ff`
- **derived tokens per theme:** 218
- **themes:** default · dark · compact (same seed, different algorithm)

## Files

| Path | What it is |
| --- | --- |
| `seed.json` | The ~20-field SeedToken — the only authored surface. |
| `tokens.default.json` | Full derived DesignTokens (light). |
| `tokens.dark.json` | Same seed, dark algorithm. |
| `tokens.compact.json` | Same seed, compact (dense) algorithm. |
| `variables.css` | `:root{}` + `.dark{}` CSS custom properties (`--brand-*`). |
| `variables.dark.css` | Standalone `:root{}` for the dark theme. |
| `theme.json` | antd `ConfigProvider` theme (token + algorithm). |
| `kit.html` | Themed component showcase (light). |
| `kit.dark.html` | Themed component showcase (dark). |
| `artifacts/landing.html` | Full landing page (hero → features → pricing → FAQ → CTA). |
| `artifacts/deck.html` | 9-slide 16:9 pitch deck with keyboard navigation. |
| `artifacts/poster.html` | 3:4 print-style poster. |
| `artifacts/email.html` | A marketing email. |
| `artifacts/newsletter.html` | Multi-story digest email. |
| `artifacts/form.html` | Split-screen contact / signup page. |
| `index.html` | Gallery linking everything + live component preview. |

## How to re-theme

The whole system traces back to `seed.json`. To re-brand, change one field and
re-run the engine — every downstream token, component and artifact follows.

- **Change the brand color:** edit `colorPrimary` in the seed (e.g. `"#1677ff"`).
  The 10-step palette, all interaction states, the primary background/border and
  every component that references `var(--brand-color-primary)` update together.
- **Light → dark:** the dark theme is the same seed run through the `"dark"`
  algorithm — load `variables.dark.css` (or add the `.dark` class).
- **Density:** the `"compact"` algorithm tightens spacing & control heights
  while keeping colors identical.

## Add a new artifact type

`renderArtifact(kind, brand, tokens)` already accepts every `AssetKind`
(`landing | deck | poster | email | newsletter | form`). Add the kind to the
build's artifact list to ship it in the bundle; kinds without a bespoke layout
fall back to a sensible card+button page.