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.