# Sandworm Design System

> AuthZed's Sandworm design system. Use when designing or building any AuthZed marketing site, product UI, brand material, system diagram, or chart — generates on-brand interfaces that are technical, warm, and distinctly AuthZed (magenta-600 + sand-300 over a purple-tinted near-black, dark by default, font-light with magenta emphasis, the gradient checkpoint motif for authorization diagrams, and the Rakis value-count chart palettes). Covers color tokens, typography, layout, components, dataviz, diagrams, motion, and accessibility.

- Skill: `authzed/sandworm-design-system` (Agent Skill, multi-file: 25 files)
- Install (CLI): `npx skillmds@latest add authzed/sandworm-design-system`
- Raw SKILL.md: https://api.skillmd.com/api/skills/authzed/sandworm-design-system/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: authzed (https://skillmd.com/u/authzed)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/authzed/sandworm-design-system

---


# Sandworm Design System

This skill makes Claude design on-brand for AuthZed. The canonical spec is the hub at **`../DESIGN.md`**
plus its spokes under **`../design/`** (this kit lives at `kit/` inside the spec directory — the whole
`sandworm/` folder ships as one bundle). The token files here are **generated from** that spec — the spec
is the source of truth, the kit is its machine-readable export.

## How to use

1. **Always read `../DESIGN.md` first** — it holds the primitive tokens (color, type, spacing, motion) and
   the foundational rules. It's the hub.
2. **Load the relevant spoke** for the surface you're designing:
   - `../design/palette.md` — the full color table (hexes; token refs resolve here)
   - `../design/components.md` — buttons, cards, callouts, terminal, section labels
   - `../design/dataviz.md` — Rakis chart palettes (value-count-indexed, 1-20 series, both surfaces)
   - `../design/diagrams.md` — nodes, scope containers, connectors, the **checkpoint beam**
   - `../design/logo-brand.md` — logo/wordmark usage, mark colors, clear space, sizes
   - `../design/accessibility.md` — contrast ratios, focus/disabled states, vendor-prefix gotchas
   - `../design/animation.md` — motion patterns, keyframes, reduced-motion
   - `../design/web-ui.md` — *(draft)* page-level composition for authzed.com
   - `../design/typography.md` — *(draft)* weight pairing, emphasis contract, display metrics, the two scales
   - `../design/social.md` — *(draft)* feed tier: canvas formats, the 32px legibility floor, logo-wall rules
   - `../design/print.md` — *(draft)* print one-pagers, icon tiles, the print-media contract
   - `../design/slides.md` — *(draft)* 16:9 deck language: type scale, agenda capsule, layout recipes
> **Draft policy**: spokes marked *(draft)* are code-grounded but pending review — design against them,
> and verify stamped claims when the stakes are high. Spokes marked ON HOLD are internal and excluded
> from this skill entirely.

3. **Pull tokens from the kit** when you need machine-readable values:
   - `colors_and_type.css` — CSS custom properties (`var(--magenta-600)`, `var(--gradient-warm-hero)`)
   - `tailwind.tokens.json` — drop into `theme.extend`
   - `tokens.dtcg.json` — W3C DTCG format for token tooling
   - `assets/` — the brand SVGs (wordmarks, logomarks, stacked variants) under stable filenames

## The fingerprint (read before generating)

- **Warm-technical, never cold-enterprise** — magenta + sand over purple-tinted near-black; no bank-blue.
- **Dark by default**; light mode is the deliberate minority.
- **`font-light` everything**; bold is reserved for `magenta-600` in-prose emphasis.
- **A gradient family, used sparingly** — the warm `sand → red → violet` 3-stop is primary.
- **4/8 asymmetric composition**; symmetric 6/6 reads as generic SaaS.
- **Restrained motion** — 200/300/500ms, `ease-in-out`, no bounce.
- **Diagrams**: solid node, dashed scope-container, teal=allowed / red=denied connectors, and the
  gradient **checkpoint beam** as the signature "authorization happens here" device.

## Do not

- Use generic Tailwind palette (`gray-500`, `blue-600`) or arbitrary hex for brand surfaces.
- Reach for the brand gradient beyond primary actions — primary CTAs ARE `button-primary` (gradient); the overuse warning is about gradient-washing secondary buttons and decorative surfaces.
- Invent chart palettes — Rakis IS the dataviz system.
- Use dashed lines for diagram connectors — dashed = scope container only.

> Voice & tone is **out of scope** — it lives in AuthZed's separate messaging repo, not this design system.