@dustin-riley/design 0.1.0

package/DESIGN.md

@@ -0,0 +1,219 @@
+# Design system — @dustin-riley/design
+
+This file is the source of truth for visual / interaction decisions. If you are an agent or contributor about to add UI, **read this file first**, then follow the pointers into the package's CSS for the actual tokens and component styles.
+
+This doc is the source of truth; the bundled `dustinriley-design` skill mirrors it.
+
+---
+
+## Tl;dr — non-negotiables
+
+- **One primary** (burnt orange `#B8541C`), **two accents** (ochre, teal). Don't invent colors.
+- **Three radii only**: `8px` (inputs/chips), `16px` (cards/modals), `999px` (buttons/toggles). Nothing else.
+- **Three shadows only**: `sm`, `md`, `lg` — all warm-tinted (`rgba(74, 52, 28, …)`), never gray or black.
+- **Sentence case everywhere.** No Title Case. No ALL CAPS for emphasis. Even nav: "experiments", "writing", "about".
+- **First person.** Address the reader as "you". No marketing puffery.
+- **No emoji.** Use Lucide icons or unicode arrows (`→ ↗ ↓ ←`).
+- **Color is never the only state signal.** Pair it with elevation, motion, or an icon.
+- **Motion is feedback, not decoration.** Spring-based, resolves under 300ms.
+- **WCAG AA throughout.** For burnt-orange text-as-link, use `--ds-link` (`#9E4615`), not `--ds-primary` — primary doesn't clear 4.5:1 against the canvas.
+
+---
+
+## Where things live
+
+| Concern | File |
+|---|---|
+| Design tokens (color, type, spacing, radius, shadow, motion) | `@dustin-riley/design/tokens.css` |
+| Component / primitive styles (buttons, container, panel, typographic helpers, etc.) | `@dustin-riley/design/core.css` |
+| Tailwind v4 base + theme bridge + shadcn bridge | `@dustin-riley/design/tailwind.css` |
+
+**All design tokens are CSS custom properties prefixed `--ds-*`.** Always reference the token, never hard-code a hex / px value. If you need something the token set doesn't cover, that's a signal to push back on the design, not invent a one-off value.
+
+---
+
+## Voice & content
+
+The voice is personal but not confessional. A builder showing his work, not a brand selling something. Curious, plainspoken, slightly dry.
+
+- **Casing:** sentence case, always.
+- **First person:** "I built this", "I'm Dustin".
+- **Address the reader as "you":** "drag the slider", "try changing the seed".
+- **Verb-first button labels:** "open it", "try the demo", "read the notes" — lowercase, no ceremony.
+- **Punctuation:** em-dashes ok, oxford commas on, sentence fragments fine. Avoid semicolons in UI copy.
+- **Numbers:** spell out one through nine in prose; numerals for ten and up, and always for measurements/dates. Dates as "April 2026", not "04/18/26".
+- **Empty states:** terse. e.g. "Nothing here yet. Check back."
+- **Avoid:** marketing puffery ("revolutionary", "seamless"), exclamation points in running copy, onboarding-speak ("welcome aboard!"), placeholder copy ("your content here"), emoji.
+
+---
+
+## Color
+
+Warm-neutral canvas with one primary and two accents. Color is reserved for interaction and emphasis — chrome stays neutral.
+
+| Token | Hex | Use |
+|---|---|---|
+| `--ds-bg` | `#FAF6F0` | Page canvas |
+| `--ds-surface` | `#F3ECE0` | Cards, raised surfaces, nav-link hover |
+| `--ds-surface-sunken` | `#EDE4D3` | Insets, code, segmented "off" track |
+| `--ds-border` | `#E0D5C2` | 1px hairlines (never heavier) |
+| `--ds-text` | `#1F1A14` | Body text (warm-shifted near-black) |
+| `--ds-text-muted` | `#6B5F50` | Captions, secondary, mono meta |
+| `--ds-primary` | `#B8541C` | Brand surfaces (button bg, brand dot, focus ring). **Not for text.** |
+| `--ds-primary-hover` | `#9E4615` | Hover state for primary surfaces |
+| `--ds-primary-pressed` | `#85390F` | Active/pressed state |
+| `--ds-link` | `#9E4615` | Text-as-link (passes AA on bg + surface) |
+| `--ds-link-hover` | `#85390F` | Link hover |
+| `--ds-accent-ochre` | `#C9922B` | Accent + warning |
+| `--ds-accent-teal` | `#2E7D7A` | Accent |
+| `--ds-success` | `#5C7A3E` | Warm olive |
+| `--ds-error` | `#A8392E` | Warm brick red |
+
+**Backgrounds:** flat warm neutrals only. No gradients behind content, no photo backgrounds, no repeating patterns, no noise/grain. A soft warm "blob" radial is permitted in empty states / large heading areas built per project — never behind anything that needs focus.
+
+**Shadows are warm-tinted**, never gray:
+```
+--ds-shadow-sm   resting cards
+--ds-shadow-md   hover lift, dropdowns
+--ds-shadow-lg   modals, popovers
+```
+
+**Borders disappear when elevation replaces them.** Cards use shadow, not border, unless they sit on a same-color surface.
+
+**Transparency / blur:** modal scrims only (`rgba(31, 26, 20, 0.4)` over a blur). No glassmorphism, no frosted chrome.
+
+---
+
+## Type
+
+Outfit (display) × DM Sans (body) — geometric × rounded — JetBrains Mono for code and meta only. No italics in UI chrome.
+
+| Token | Family | Use |
+|---|---|---|
+| `--ds-font-display` | Outfit | h1–h6, brand wordmark, post titles, large headings |
+| `--ds-font-body` | DM Sans | Paragraph, buttons, inputs |
+| `--ds-font-mono` | JetBrains Mono | Captions, dates, tags, eyebrow labels (`.grid-label`), code |
+
+Scale (1.25 ratio, 16px root) — see `tokens.css` for the full set. h1=36, h2=28, h3=22, h4=18, h5=16, h6=14. h4–h6 land at body sizes intentionally — they read as headings via the display font + 600 weight, not via raw size, and are rare in practice. Tracking tightens as type grows: `-0.02em` at display, `0` at body. Body weight 400; display 500–600.
+
+**Mono is the "meta" face.** Anything date-y, tag-y, or label-y belongs in mono with `text-transform: uppercase` and `letter-spacing: 0.06em` (see `.grid-label`).
+
+---
+
+## Spacing
+
+Strict 4px base scale: `--ds-space-{0..9}` = `0, 4, 8, 12, 16, 24, 32, 48, 64, 96`.
+
+- `16 → 24 → 32` is the "room rhythm" inside components.
+- `48+` is reserved for section-level breaks.
+- Two density modes: comfortable (default) and compact.
+
+---
+
+## Radius
+
+Three values. **No others allowed.**
+
+| Token | Value | Use |
+|---|---|---|
+| `--ds-radius-sm` | `8px` | Inputs, chips, code, inline keys |
+| `--ds-radius-md` | `16px` | Cards, modals, panels, hero images |
+| `--ds-radius-pill` | `999px` | Buttons, toggles, segmented controls, tag chips |
+
+Corners are continuous / squircle-adjacent — that's why `16px` and `999px` feel right.
+
+---
+
+## Motion
+
+Spring easing over linear. **Everything resolves under 300ms.**
+
+For CSS, use `--ds-ease-standard` (`cubic-bezier(0.2, 0.8, 0.2, 1)`) at one of:
+- `--ds-duration-fast` (120ms) — color shifts, tiny chrome moves
+- `--ds-duration-base` (200ms) — most transitions, hover lifts
+- `--ds-duration-slow` (280ms) — layout, modal in/out
+
+For framework motion (Framer Motion etc.), use spring presets:
+- `spring-snappy` — stiffness 400, damping 30 — buttons, toggles, presses
+- `spring-smooth` — stiffness 260, damping 26 — cards, modals, layout
+- `spring-gentle` — stiffness 180, damping 24 — page transitions
+
+---
+
+## Interactive states
+
+| State | Effect |
+|---|---|
+| Hover (cards, buttons) | `translateY(-1px)` + elevation bump `sm → md`. Color shift secondary. |
+| Hover (text links) | Color shift only — no underline toggling. |
+| Press / active | `scale(0.97)` snappy spring. Buttons may shift to `--ds-primary-pressed`. Elevation drops to resting. |
+| Focus | `--ds-focus-ring` (2px primary at 40% opacity, 2px offset). Always visible. **Never `outline: none` without a replacement** — wire `:focus-visible` to the ring globally. |
+| Disabled | 40% opacity, no pointer events, no hover lift. Never communicated by color alone. |
+
+---
+
+## Layout
+
+- The page container tops out at **960px** (`.ds-container`, `max-width: 960px` + `--ds-space-5` horizontal padding).
+- Long-form articles should narrow to ~**680px** so the reading measure stays ~65–75ch — build that per project.
+- Headers are static; **no sticky/blur-over-content navs.** If a header needs to be sticky later, it must remain neutral chrome — never tinted glass.
+
+---
+
+## Iconography
+
+- **Set:** [Lucide](https://lucide.dev). Lucide's clean line style matches the type pairing. If you swap to another set, swap the whole set, not one icon at a time.
+- **Stroke:** `1.5px`. Never 1 (spindly), never ≥2 (cartoonish).
+- **Sizes:** 20px inline with body, 24px standalone, 16px caption minimum, never above 32px outside empty-state illustrations.
+- **Color:** `currentColor`. Inherit `--ds-text` in chrome, `--ds-text-muted` for supporting rails, `--ds-link` only when the icon itself is a CTA / active marker.
+- **Unicode arrows are fair game** in button labels and footer links: `→ ↗ ↓ ←`. Set in the body face so they align with adjacent text. No other unicode substitutions (use Lucide `star`, not `★`).
+- **No emoji. Anywhere.**
+- **No custom illustrations** at the system level. Per-experiment illustrations are scoped to that experiment.
+
+---
+
+## Component anchors
+
+When building or modifying UI, prefer extending these existing patterns over inventing parallel ones. They're all defined in `@dustin-riley/design/core.css`:
+
+| Pattern | Class |
+|---|---|
+| Page container | `.ds-container` |
+| Section spacing | `.ds-section` |
+| Headings | `.h1`–`.h6` |
+| Display headline | `.ds-display` |
+| Lede paragraph | `.ds-lede` |
+| Mono caption / label | `.ds-caption`, `.grid-label`, `.ds-mono-note` |
+| Page header (eyebrow + h1 + lede) | `.ds-page-header` |
+| Buttons | `.ds-btn`, `.ds-btn-primary`, `.ds-btn-secondary`, `.ds-btn-ghost` |
+| Back link | `.ds-back-link` |
+| Panel / card surface | `.ds-panel` |
+| Inline key chip | `.kbd` |
+
+Site-specific furniture (nav, footer, hero, content grids, article body, pagers, search) is intentionally **not** in the package — build it per project from these primitives and tokens.
+
+---
+
+## Anti-overdesign checklist
+
+If you are about to do any of the following, stop and reconsider:
+
+- Adding a new color token, accent, or semantic shade
+- Adding a fourth radius
+- Adding a fourth shadow, or any cool-toned / pure-gray shadow
+- Reaching for italics in UI chrome
+- Using gradients behind content
+- Title-casing something
+- Adding an emoji
+- Removing a focus outline without replacing it
+- Communicating state with color alone
+- Hard-coding a hex / px value instead of a `--ds-*` token
+
+The system is intentionally lean. **Cohesion is the product; novelty is a liability.**
+
+---
+
+## Caveats
+
+- `--ds-*` tokens are the contract. If you self-host fonts later, drop `.woff2` files into a `fonts/` dir and update `tokens.css`; the family tokens stay the same.
+- There is no real logo asset yet — the wordmark is a brand-dot + name lockup built per project.

package/README.md

@@ -0,0 +1,35 @@
+# @dustin-riley/design
+
+Warm mid-century-modern design system: tokens, base resets, and a curated set of
+reusable CSS primitives. Framework-neutral, with an optional Tailwind v4 +
+shadcn bridge.
+
+## Install
+
+```bash
+npm i @dustin-riley/design
+```
+
+## Use
+
+```css
+/* any project */
+@import "@dustin-riley/design/tokens.css";
+@import "@dustin-riley/design/core.css";
+
+/* Tailwind v4 + shadcn projects instead just need: */
+@import "@dustin-riley/design/tailwind.css"; /* pulls in core + tokens */
+```
+
+## What's in / out
+
+In: `--ds-*` tokens, base element resets, focus ring, and generic primitives
+(`.ds-btn*`, `.ds-container`, `.ds-panel`, typographic helpers, `.kbd`, …).
+
+Out by design: site furniture (nav, footer, hero, content grids). Build those
+per project from the tokens. See `DESIGN.md`.
+
+## Maintaining the bridge
+
+`src/tailwind.css` is generated. Never edit it by hand. After changing
+`src/tokens.css`, run `npm run generate && npm test`.

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@dustin-riley/design",
+  "version": "0.1.0",
+  "description": "Dustin Riley design system — warm mid-century modern tokens and primitives.",
+  "license": "MIT",
+  "type": "module",
+  "files": ["src", "DESIGN.md", "skill", "README.md"],
+  "exports": {
+    "./tokens.css": "./src/tokens.css",
+    "./core.css": "./src/core.css",
+    "./tailwind.css": "./src/tailwind.css",
+    "./DESIGN.md": "./DESIGN.md"
+  },
+  "scripts": {
+    "generate": "node scripts/generate-bridge.mjs",
+    "test": "node --test"
+  },
+  "publishConfig": { "access": "public" },
+  "keywords": ["design-system", "css", "design-tokens"]
+}

package/skill/dustinriley-design/SKILL.md

@@ -0,0 +1,31 @@
+---
+name: dustinriley-design
+description: Use when building or modifying any UI in a project that consumes @dustin-riley/design — enforces the warm mid-century-modern token system, the three-radii/three-shadow rules, sentence-case voice, and the curated .ds-* primitive vocabulary.
+---
+
+# dustinriley design system
+
+Apply this whenever you add or change UI in a project importing `@dustin-riley/design`.
+
+## Non-negotiables
+- One primary (burnt orange `#B8541C`), accents ochre + teal. Never invent colors.
+- Three radii only: 8 / 16 / 999px. Three warm-tinted shadows only: sm / md / lg.
+- Sentence case everywhere. First person. No emoji. Lucide icons or unicode arrows.
+- Color is never the only state signal. Motion resolves under 300ms.
+- For text-as-link in burnt orange use `--ds-link`, never `--ds-primary` (WCAG AA).
+- Never hard-code a hex/px value — reference a `--ds-*` token.
+
+## How to consume
+- Always: `@import "@dustin-riley/design/tokens.css"; @import "@dustin-riley/design/core.css";`
+- Tailwind v4 + shadcn projects additionally: `@import "@dustin-riley/design/tailwind.css";`
+
+## Vocabulary (prefer extending these over inventing parallels)
+Buttons `.ds-btn` + `.ds-btn-primary|secondary|ghost`; layout `.ds-container`,
+`.ds-section`; type `.ds-display`, `.ds-lede`, `.ds-caption`, `.ds-mono-note`,
+`.grid-label`, `.h1`–`.h6`; chrome bits `.ds-page-header`, `.ds-back-link`;
+surfaces `.ds-panel`, `.kbd`.
+
+Site-specific furniture (nav, footer, hero, grids) is NOT in the package by
+design — build it per project from these primitives and tokens.
+
+See the full rationale in `@dustin-riley/design/DESIGN.md`.

package/src/core.css

@@ -0,0 +1,231 @@
+@import "./tokens.css";
+
+/* ============================================================
+   @dustin-riley/design — core primitives
+   Curated, reusable component classes copied verbatim from the
+   canonical dustinriley.com design-system.css and scorigami
+   globals.css. Site furniture (nav, footer, hero, content
+   grids, article, chart bits) is intentionally excluded.
+   ============================================================ */
+
+/* ----- Type helpers ----- */
+h1,
+.h1 {
+  font-size: var(--ds-fs-h1);
+  line-height: var(--ds-lh-h1);
+  letter-spacing: var(--ds-tracking-h1);
+}
+
+h2,
+.h2 {
+  font-size: var(--ds-fs-h2);
+  line-height: var(--ds-lh-h2);
+  letter-spacing: var(--ds-tracking-h2);
+}
+
+h3,
+.h3 {
+  font-size: var(--ds-fs-h3);
+  line-height: var(--ds-lh-h3);
+  letter-spacing: var(--ds-tracking-h3);
+  font-weight: 500;
+}
+
+h4,
+.h4 {
+  font-size: var(--ds-fs-h4);
+  line-height: var(--ds-lh-h4);
+}
+
+h5,
+.h5 {
+  font-size: var(--ds-fs-h5);
+  line-height: var(--ds-lh-h5);
+}
+
+h6,
+.h6 {
+  font-size: var(--ds-fs-h6);
+  line-height: var(--ds-lh-h6);
+}
+
+.ds-display {
+  font-family: var(--ds-font-display);
+  font-size: var(--ds-fs-display);
+  line-height: var(--ds-lh-display);
+  letter-spacing: var(--ds-tracking-display);
+  font-weight: 600;
+}
+
+@media (max-width: 640px) {
+  .ds-display {
+    font-size: 2.25rem;
+  }
+}
+
+.ds-lede {
+  font-size: var(--ds-fs-body-lg);
+  line-height: var(--ds-lh-body-lg);
+  color: var(--ds-text-muted);
+}
+
+.ds-caption {
+  font-size: var(--ds-fs-caption);
+  line-height: 1.4;
+  font-weight: 500;
+  color: var(--ds-text-muted);
+}
+
+/* ----- Layout ----- */
+.ds-container {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 0 var(--ds-space-5);
+}
+
+.ds-section {
+  padding-top: var(--ds-space-7);
+  padding-bottom: var(--ds-space-7);
+}
+
+/* ----- Buttons ----- */
+.ds-btn {
+  font-family: var(--ds-font-body);
+  font-weight: 500;
+  font-size: 14px;
+  padding: 10px 20px;
+  border-radius: var(--ds-radius-pill);
+  border: none;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  transition:
+    transform var(--ds-duration-fast) var(--ds-ease-standard),
+    box-shadow var(--ds-duration-base) var(--ds-ease-standard),
+    background var(--ds-duration-fast) var(--ds-ease-standard);
+  text-decoration: none;
+  line-height: 1.2;
+}
+
+.ds-btn-primary {
+  background: var(--ds-primary);
+  color: var(--ds-on-primary);
+  box-shadow: var(--ds-shadow-sm);
+}
+
+.ds-btn-primary:hover {
+  background: var(--ds-primary-hover);
+  color: var(--ds-on-primary);
+  transform: translateY(-1px);
+  box-shadow: var(--ds-shadow-md);
+}
+
+.ds-btn-primary:active {
+  background: var(--ds-primary-pressed);
+  transform: scale(0.97);
+  box-shadow: var(--ds-shadow-sm);
+}
+
+.ds-btn-secondary {
+  background: var(--ds-surface);
+  color: var(--ds-text);
+  border: 1px solid var(--ds-border);
+}
+
+.ds-btn-secondary:hover {
+  color: var(--ds-text);
+  transform: translateY(-1px);
+  box-shadow: var(--ds-shadow-sm);
+}
+
+.ds-btn-secondary:active {
+  transform: scale(0.97);
+}
+
+.ds-btn-ghost {
+  background: transparent;
+  color: var(--ds-text);
+}
+
+.ds-btn-ghost:hover {
+  background: var(--ds-surface);
+  color: var(--ds-text);
+}
+
+/* ----- Section labels ----- */
+.grid-label {
+  font-family: var(--ds-font-mono);
+  font-size: var(--ds-fs-caption);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--ds-text-muted);
+  margin: 0 0 var(--ds-space-4);
+}
+
+/* ----- Back link ----- */
+.ds-back-link {
+  font-family: var(--ds-font-body);
+  font-size: 13px;
+  color: var(--ds-text-muted);
+  text-decoration: none;
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+  margin-bottom: var(--ds-space-4);
+}
+
+.ds-back-link:hover {
+  color: var(--ds-link);
+}
+
+/* ----- Page header (eyebrow + h1 + lede) ----- */
+.ds-page-header {
+  padding-top: var(--ds-space-7);
+}
+
+.ds-page-header > .grid-label {
+  margin: 0 0 var(--ds-space-2);
+}
+
+.ds-page-header > h1 {
+  margin: 0 0 var(--ds-space-3);
+}
+
+.ds-page-header > .ds-lede {
+  margin: 0 0 var(--ds-space-6);
+  max-width: 620px;
+}
+
+/* ----- Small mono note (inline meta text) ----- */
+.ds-mono-note {
+  font-family: var(--ds-font-mono);
+  font-size: 12px;
+  color: var(--ds-text-muted);
+}
+
+/* ----- Panel (cards that don't need shadcn's internal structure) ----- */
+.ds-panel {
+  background: var(--ds-surface);
+  border-radius: var(--ds-radius-md);
+  padding: var(--ds-space-5);
+  box-shadow: var(--ds-shadow-sm);
+  transition: transform var(--ds-duration-base) var(--ds-ease-standard),
+              box-shadow var(--ds-duration-base) var(--ds-ease-standard);
+}
+.ds-panel.interactive:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--ds-shadow-md);
+}
+
+/* ----- kbd chip ----- */
+.kbd {
+  font-family: var(--ds-font-mono);
+  font-size: 11px;
+  padding: 2px 6px;
+  background: var(--ds-surface);
+  border: 1px solid var(--ds-border);
+  border-radius: var(--ds-radius-sm);
+  color: var(--ds-text);
+}

package/src/tailwind.css

@@ -0,0 +1,94 @@
+/* GENERATED by scripts/generate-bridge.mjs from src/tokens.css.
+   Do not edit by hand. Run `npm run generate`. */
+@import "./core.css";
+
+@theme {
+  /* Design system only allows three radii (8px / 16px / 999px).
+     Map every Tailwind rounded-* utility into one of them, treating 8px
+     as the "input/chip" default and 16px as the "card/panel" default.
+     Anything that should be a pill uses rounded-full explicitly. */
+  --radius-sm:  8px;
+  --radius-md:  8px;
+  --radius-lg:  16px;
+  --radius-xl:  16px;
+  --radius-2xl: 16px;
+  --radius-3xl: 16px;
+
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-chart-1: hsl(var(--chart-1));
+  --color-chart-2: hsl(var(--chart-2));
+  --color-chart-3: hsl(var(--chart-3));
+  --color-chart-4: hsl(var(--chart-4));
+  --color-chart-5: hsl(var(--chart-5));
+
+  --font-display: "Outfit", system-ui, sans-serif;
+  --font-body:    "DM Sans", system-ui, sans-serif;
+  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
+
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+
+  @keyframes accordion-down {
+    from { height: 0; }
+    to   { height: var(--radix-accordion-content-height); }
+  }
+  @keyframes accordion-up {
+    from { height: var(--radix-accordion-content-height); }
+    to   { height: 0; }
+  }
+}
+
+@layer base {
+  *, ::after, ::before, ::backdrop, ::file-selector-button {
+    border-color: hsl(var(--border));
+  }
+
+  html { font-size: 16px; }
+}
+
+/* shadcn HSL bridge — derived from --ds-* tokens */
+:root {
+  --background: 36 50% 96%;
+  --foreground: 33 22% 10%;
+  --card: 36 50% 96%;
+  --card-foreground: 33 22% 10%;
+  --popover: 36 50% 96%;
+  --popover-foreground: 33 22% 10%;
+  --primary: 22 74% 42%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 38 44% 92%;
+  --secondary-foreground: 33 22% 10%;
+  --muted: 39 42% 88%;
+  --muted-foreground: 33 14% 37%;
+  --accent: 38 44% 92%;
+  --accent-foreground: 33 22% 10%;
+  --destructive: 5 57% 42%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 38 33% 82%;
+  --input: 38 33% 82%;
+  --ring: 22 74% 42%;
+  --chart-1: 22 74% 42%;
+  --chart-2: 39 65% 48%;
+  --chart-3: 178 46% 34%;
+  --chart-4: 90 33% 36%;
+  --chart-5: 5 57% 42%;
+  --radius: 1rem;
+}

package/src/tailwind.head.css

@@ -0,0 +1,63 @@
+@import "./core.css";
+
+@theme {
+  /* Design system only allows three radii (8px / 16px / 999px).
+     Map every Tailwind rounded-* utility into one of them, treating 8px
+     as the "input/chip" default and 16px as the "card/panel" default.
+     Anything that should be a pill uses rounded-full explicitly. */
+  --radius-sm:  8px;
+  --radius-md:  8px;
+  --radius-lg:  16px;
+  --radius-xl:  16px;
+  --radius-2xl: 16px;
+  --radius-3xl: 16px;
+
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-chart-1: hsl(var(--chart-1));
+  --color-chart-2: hsl(var(--chart-2));
+  --color-chart-3: hsl(var(--chart-3));
+  --color-chart-4: hsl(var(--chart-4));
+  --color-chart-5: hsl(var(--chart-5));
+
+  --font-display: "Outfit", system-ui, sans-serif;
+  --font-body:    "DM Sans", system-ui, sans-serif;
+  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
+
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+
+  @keyframes accordion-down {
+    from { height: 0; }
+    to   { height: var(--radix-accordion-content-height); }
+  }
+  @keyframes accordion-up {
+    from { height: var(--radix-accordion-content-height); }
+    to   { height: 0; }
+  }
+}
+
+@layer base {
+  *, ::after, ::before, ::backdrop, ::file-selector-button {
+    border-color: hsl(var(--border));
+  }
+
+  html { font-size: 16px; }
+}

package/src/tokens.css

@@ -0,0 +1,178 @@
+/* ============================================================
+   Dustin Riley Design System — Colors & Type tokens
+   Digital mid-century modern. Warm neutrals + restrained color.
+   Fonts are loaded via <link> tags in Base.astro.
+   ============================================================ */
+
+:root {
+  /* Color: Warm Neutrals */
+  --ds-bg: #faf6f0;
+  --ds-surface: #f3ece0;
+  --ds-surface-sunken: #ede4d3;
+  --ds-border: #e0d5c2;
+  --ds-text: #1f1a14;
+  --ds-text-muted: #6b5f50;
+
+  /* Color: Primary (burnt orange) — used for surfaces, buttons, the brand mark.
+     --ds-primary itself does NOT meet 4.5:1 against --ds-bg, so for
+     text-as-brand (links, active nav, hover titles) use --ds-link instead. */
+  --ds-primary: #b8541c;
+  --ds-primary-hover: #9e4615;
+  --ds-primary-pressed: #85390f;
+
+  /* Color: Link — darker burnt orange shades that clear WCAG AA (~5.9:1
+     and ~7.5:1 respectively) on both --ds-bg and --ds-surface. */
+  --ds-link: #9e4615;
+  --ds-link-hover: #85390f;
+
+  /* Color: Accents */
+  --ds-accent-ochre: #c9922b;
+  --ds-accent-teal: #2e7d7a;
+  --ds-accent-plum: #8b5e83;
+
+  /* Color: Semantic */
+  --ds-success: #5c7a3e;
+  --ds-warning: #c9922b;
+  --ds-error: #a8392e;
+
+  /* On-color foregrounds */
+  --ds-on-primary: #ffffff;
+
+  /* Typography: families */
+  --ds-font-display: "Outfit", system-ui, sans-serif;
+  --ds-font-body: "DM Sans", system-ui, sans-serif;
+  --ds-font-mono: "JetBrains Mono", ui-monospace, monospace;
+
+  /* Typography: scale (1.25 ratio, 16px root) */
+  --ds-fs-display: 3rem;
+  --ds-fs-h1: 2.25rem;
+  --ds-fs-h2: 1.75rem;
+  --ds-fs-h3: 1.375rem;
+  --ds-fs-h4: 1.125rem;
+  --ds-fs-h5: 1rem;
+  --ds-fs-h6: 0.875rem;
+  --ds-fs-body-lg: 1.125rem;
+  --ds-fs-body: 1rem;
+  --ds-fs-body-sm: 0.875rem;
+  --ds-fs-caption: 0.75rem;
+
+  --ds-lh-display: 1.1;
+  --ds-lh-h1: 1.15;
+  --ds-lh-h2: 1.2;
+  --ds-lh-h3: 1.3;
+  --ds-lh-h4: 1.35;
+  --ds-lh-h5: 1.4;
+  --ds-lh-h6: 1.4;
+  --ds-lh-body-lg: 1.5;
+  --ds-lh-body: 1.5;
+
+  --ds-tracking-display: -0.02em;
+  --ds-tracking-h1: -0.02em;
+  --ds-tracking-h2: -0.01em;
+  --ds-tracking-h3: -0.01em;
+
+  /* Spacing: 4px base */
+  --ds-space-0: 0;
+  --ds-space-1: 4px;
+  --ds-space-2: 8px;
+  --ds-space-3: 12px;
+  --ds-space-4: 16px;
+  --ds-space-5: 24px;
+  --ds-space-6: 32px;
+  --ds-space-7: 48px;
+  --ds-space-8: 64px;
+  --ds-space-9: 96px;
+
+  /* Radius (3 only) */
+  --ds-radius-sm: 8px;
+  --ds-radius-md: 16px;
+  --ds-radius-pill: 999px;
+
+  /* Shadow (warm-tinted) */
+  --ds-shadow-sm: 0 1px 2px rgba(74, 52, 28, 0.06),
+    0 1px 1px rgba(74, 52, 28, 0.04);
+  --ds-shadow-md: 0 4px 8px rgba(74, 52, 28, 0.08),
+    0 2px 4px rgba(74, 52, 28, 0.05);
+  --ds-shadow-lg: 0 16px 32px rgba(74, 52, 28, 0.12),
+    0 4px 8px rgba(74, 52, 28, 0.06);
+
+  /* Motion */
+  --ds-duration-fast: 120ms;
+  --ds-duration-base: 200ms;
+  --ds-duration-slow: 280ms;
+  --ds-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
+
+  /* Focus ring */
+  --ds-focus-ring:
+    0 0 0 2px var(--ds-bg), 0 0 0 4px rgba(184, 84, 28, 0.4);
+}
+
+:focus-visible {
+  outline: none;
+  box-shadow: var(--ds-focus-ring);
+  border-radius: var(--ds-radius-sm);
+}
+
+/* ============================================================
+   Base element resets
+   (sourced from scorigami globals.css @layer base, layer-neutral)
+   ============================================================ */
+
+html { font-size: 16px; }
+
+body {
+  background: var(--ds-bg);
+  color: var(--ds-text);
+  font-family: var(--ds-font-body);
+  font-size: var(--ds-fs-body);
+  line-height: var(--ds-lh-body);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  overflow-x: clip;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--ds-font-display);
+  color: var(--ds-text);
+  font-weight: 600;
+}
+
+h1, .h1 {
+  font-size: var(--ds-fs-h1);
+  line-height: var(--ds-lh-h1);
+  letter-spacing: var(--ds-tracking-h1);
+}
+h2, .h2 {
+  font-size: var(--ds-fs-h2);
+  line-height: var(--ds-lh-h2);
+  letter-spacing: var(--ds-tracking-h2);
+}
+h3, .h3 {
+  font-size: var(--ds-fs-h3);
+  line-height: var(--ds-lh-h3);
+  letter-spacing: var(--ds-tracking-h3);
+  font-weight: 500;
+}
+
+a {
+  color: var(--ds-link);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+  transition: color var(--ds-duration-fast) var(--ds-ease-standard);
+}
+a:hover { color: var(--ds-link-hover); }
+
+code, pre, kbd, samp {
+  font-family: var(--ds-font-mono);
+  font-size: 0.9em;
+}
+
+code {
+  background: var(--ds-surface-sunken);
+  padding: 2px 6px;
+  border-radius: var(--ds-radius-sm);
+  border: 1px solid var(--ds-border);
+}
+
+::selection { background: rgba(184, 84, 28, 0.2); }