# Design system

Drape has one visual identity — **dark editorial** — expressed through a shared
token file that the brand and admin portals import directly. This documentation
site is themed from the same values, so what you are reading matches the product.

## The token system

`styles/drape-tokens.css` is the canonical source, copied byte-for-byte into both
`Drape-brand` and `Drape-admin-v1` and mapped into Tailwind v4 via `@theme inline`.
It defines both modes with a `[data-theme]` toggle:

| Role | Dark (default) | Light |
|---|---|---|
| Background | `#050505` | `#f5f4f1` |
| Foreground / text | `#f3f3f1` | `#1a1a1c` |
| Surface | `#0e0e0f` | `#ffffff` |
| **Accent** | **cream `#d8d2c8`** | **muted-green `#446355`** |
| Border | `rgba(255,255,255,0.08)` | `rgba(0,0,0,0.08)` |

Supporting hues: `--muted-sage #8a9a8c`, `--graphite #2a2a2e`, and a status set
(pending amber `#c9a227`, success/live green, danger `#c45c5c`). Spacing
(`--space-1..7`), radius (`--radius-sm..xl`), and motion (`--duration-*`,
`--ease-out`) round it out.

:::info[Why this docs site is green in light mode and cream in dark]
The accent flips by mode — muted-green reads well on light backgrounds, cream reads
well on dark. This site's PokeDocs theme is configured with
`brandColor: { light: '#446355', dark: '#d8d2c8' }`, which is exactly the token
system's two accents. The theme you see here is Drape's theme.
:::

## Where the identity lives

```mermaid
graph TB
    Tokens["styles/drape-tokens.css<br/>cream / muted-green"]
    Tokens --> Brand["Drape-brand<br/>@import tokens"]
    Tokens --> Admin["Drape-admin-v1<br/>@import tokens"]
    Mobile["Drape-/frontend<br/>COLORS — Design System v4<br/>near-black + cream"]
    Mkt["Drape-Marketing<br/>own @theme: cream + warm accents"]
```

- **Brand + admin portals** import the shared tokens directly — identical `@theme`
  headers, the same `ThemeProvider` / `ThemeScript` / `ThemeToggle`, Inter
  throughout, and the same `DRAPE` wordmark with a portal eyebrow.
- **The mobile app** (`Drape-/frontend`) has its own `COLORS` object ("Design
  System v4 — Dark Editorial") — the same near-black-plus-cream identity, expressed
  in React Native tokens. Fonts: Bebas Neue (display), Inter (UI), Space Grotesk
  (legacy).
- **The marketing site** defines its own extended palette inline: the same dark
  base and cream accent, plus warm marketing hues (`#ff4d00`, amber `#e8a045`, sage
  `#8fa88a`, copper `#c58c60`) and light "paper" chapter overrides for its
  scroll-storytelling landing. It is the most visually elaborate surface.

## The aspirational brief that isn't shipped

:::warning[MASTER.md is not the implemented system]
`Drape-brand/design-system/drape-brand/MASTER.md` is an **auto-generated** design
brief (dated 2026-08-15) describing a "Luxury/Premium" system — Cormorant +
Montserrat fonts and a gold `#A16207` accent. **The shipped code uses none of
that** — it uses Inter and the cream/muted-green tokens above. Treat MASTER.md as
an aspirational artifact for one brand-landing page (it self-declares that page
files override it), not the design system. If future work adopts it, that is a
deliberate rebrand, not the current state.
:::

## Brand guardrails (from the master brief)

Where MASTER.md is still useful is its **anti-patterns**, which are good hygiene
regardless of palette and worth keeping:

- SVG icons only (Heroicons / Lucide) — no emoji as icons.
- `cursor: pointer` on every clickable element.
- Smooth transitions (150–300ms); no instant state changes.
- Light-mode text contrast at least 4.5:1; visible keyboard focus states.
- Respect `prefers-reduced-motion`; no horizontal scroll on mobile; responsive at
  375 / 768 / 1024 / 1440.

These map cleanly onto the [audit](../audit/overview.md) philosophy: the identity
is settled, so the work is consistency, not redesign.