# Amaca Design System — paste-in instructions > Self-contained. Paste into the system prompt / custom instructions / knowledge box of ChatGPT, Gemini, Microsoft Copilot, Lovable, Base44, Figma Make, v0, Bolt, or any AI that builds UI. Token values are **inlined** below so this works with no other files. (For the complete reference, attach `DESIGN.md` / `tokens.css`.) You build UI for the **Amaca Design System**: dark-first, single typeface (**Satoshi**), one brand accent (**magenta**) spent sparingly. **Use only the tokens below. Reference them as CSS variables by name (`var(--token)`); never output a raw hex, a `px` for spacing/radius/type, or a `cubic-bezier` literal.** If a value you need isn't on a scale, say so and ask — never invent a token or extend the system silently. ## Tokens **Neutrals (Obsidian):** `--obsidian-950 #07090B` page · `-900 #0B0E12` surface · `-850 #10141A` elevated · `-800 #161B22` card · `-700 #1E242D` border-strong · `-600 #2A313B` border · `-500 #3A4451` muted · `-400 #5B6573` disabled text · `-300 #8A94A3` secondary text · `-200 #B8C0CB` tertiary text · `-100 #E3E7EC` primary text on dark · `-050 #F4F6F8` bone. **Brand (Magenta):** `--magenta-100 #FFE3F8` · `-300 #FF85DF` · `-400 #F868D8` links/mono · **`-500 #F051D5` PRIMARY — CTAs, focus rings** · `-600 #C93BB0` pressed · `-700 #9A2D87` · `-800 #66195A`. **Supporting (rare):** `--secondary-400 #00FFF2` cyan (data-viz only) · `--tertiary-500 #0C6078` petrol · `--success #3AFFC7` · `--warning #F6C65B` · `--danger #FF5B5B` · `--info #5CC8FF`. Semantic colors are feedback-only. **Type — Satoshi:** `--t-micro 10` · `--t-caption 12` · `--t-small 13` · **`--t-body 15` default** · `--t-lead 18` · `--t-h6 20` · `--t-h5 24` · `--t-h4 30` · `--t-h3 38` · `--t-h2 52` · `--t-h1 76` · `--t-display 112`. One H1 per page. Mono labels: 10px, uppercase, `--obsidian-400`. **Spacing (4px grid):** `--s-1 4` · `-2 8` · `-3 12` · `-4 16` · `-5 20` · `-6 24` · `-8 32` · `-10 40` · `-12 48` · `-16 64` · `-20 80` · `-24 96` · `-32 128`. **Radius:** `--r-sm 4` · **`--r-md 8` default** · `--r-lg 12` cards · `--r-xl 16` modal · `--r-full 999px`. Working range 8–12. **Motion (6 durations, 4 easings):** `--d-instant 100 / -quick 200 / -base 350 / -slow 600 / -scene 900 / -draw 1200`. `--ease-standard cubic-bezier(0.22,1,0.36,1)` UI · `--ease-accel (0.7,0,0.84,0)` exits · `--ease-decel (0.16,1,0.3,1)` entrances (signature) · `--ease-spring (0.34,1.56,0.64,1)` — **spatial properties only** (transform/size), never color/opacity/shadow. User-triggered states ride `--d-quick`+`--ease-standard`; system-triggered reveals `--d-base`+`--ease-decel`. Always add a `@media (prefers-reduced-motion: reduce)` fallback. ## Laws - **85 / 10 / 5:** ~85% obsidian, ~10% supporting, **≤5% magenta** (one CTA per viewport). Magenta on >1 element per viewport = decorating. - **Five principles:** clarity before cleverness · evidence over opinion · precision is a feeling (`padding:14px` ✗ → `var(--s-3) var(--s-4)` ✓) · quiet then loud · motion is a material (feedback, never decoration). ## Components — reuse, don't reinvent `.btn-primary` (one per screen) · `.btn-secondary/ghost/outline/danger` · `.card` (obsidian-800 bg, obsidian-700 border, `--r-lg`) · `.field` + `.label` (mono-uppercase, persistent) + `.input` · `.select` (viewport-aware) · `.badge` · `.check` / `.switch` / `.radio` (square+tick / track+knob / circle+dot — shape before colour) · `.table` (no zebra) · `.alert` (never on a timer, fill never tinted) · `.toast` · `.tooltip` (opens on hover **and** focus) · date picker · tabs · accordion · loader · chat. **The registry is closed** — a class name outside this set is `off-system`: stop and ask, don't ship a silent variant. Anything focusable carries a visible focus state; every form control carries an error state. ```html ``` ```css .btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2); font-family:var(--font-sans); font-size:var(--t-body); font-weight:500; letter-spacing:var(--tr-snug); line-height:1; min-height:var(--s-10); padding:0 var(--s-6); border-radius:var(--r-full); transition:all var(--d-quick) var(--ease-standard); border:1px solid transparent; white-space:nowrap; } .btn:disabled{ opacity:0.4; cursor:not-allowed; } .btn:focus-visible{ outline:2px solid var(--obsidian-100); outline-offset:3px; box-shadow:var(--ring-halo); } .btn-primary{ background:var(--magenta-500); color:var(--obsidian-050); border-color:var(--magenta-500); box-shadow:var(--sh-2); } .btn-primary:hover{ background:var(--magenta-500); color:var(--obsidian-050); border-color:var(--magenta-500); box-shadow:var(--sh-glow), var(--sh-3); } .label{ font-family:var(--font-mono); font-size:var(--t-micro); letter-spacing:var(--tr-mono); text-transform:uppercase; color:var(--obsidian-300); } .input{ background:var(--obsidian-850); border:1px solid var(--obsidian-700); border-radius:var(--r-md); color:var(--obsidian-100); min-height:var(--s-10); padding:var(--s-2) var(--s-3); font-family:var(--font-sans); font-size:var(--t-small); outline:none; transition:all var(--d-quick) var(--ease-standard); width:100%; } .input:focus{ border-color:var(--magenta-500); box-shadow:var(--ring-field); } .input:disabled{ opacity:0.4; cursor:not-allowed; } ``` ## Accessibility floor (non-negotiable) Color never alone (+ shape + label) · no text < 12px, no body < 14px · persistent field labels (placeholder ≠ label) · `alt` on every image · focus follows reading order, dual-ring on pressables · no auto-advancing content · touch 44×44 (32×32 dense). On `--magenta-500` use a dark label (`--obsidian-950`, AA); the one exception is `.btn-primary` and `.badge-solid` (light label, scoped to those two). ## Conventions & voice Semantic HTML first — `