Skip to main content

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:

RoleDark (default)Light
Background#050505#f5f4f1
Foreground / text#f3f3f1#1a1a1c
Surface#0e0e0f#ffffff
Accentcream #d8d2c8muted-green #446355
Borderrgba(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.

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​

styles/drape-tokens.css
cream / muted-green

Drape-brand
@import tokens

Drape-admin-v1
@import tokens

Drape-/frontend
COLORS — Design System v4
near-black + cream

Drape-Marketing
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​

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 philosophy: the identity is settled, so the work is consistency, not redesign.