@dustin-riley/design 0.3.0 → 0.5.0

package/DESIGN.md

@@ -8,9 +8,10 @@ This doc is the source of truth; the bundled `dustinriley-design` skill mirrors
 
 ## Tl;dr — non-negotiables
 
-- **One primary** (burnt orange `#B8541C`), **two accents** (ochre, teal). Don't invent colors.
+- **One primary** (burnt orange `#B8541C`), **two accents** (ochre, teal), **plum** as a tertiary accent — also the basis of the AI treatment (§ AI content). 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.
+- **One border weight**: `--ds-border-width` (`1px`), never heavier — emphasis is shadow / elevation, not a thicker border.
 - **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 (`→ ↗ ↓ ←`).
@@ -67,6 +68,9 @@ Warm-neutral canvas with one primary and two accents. Color is reserved for inte
 | `--ds-link-hover` | `#85390F` | Link hover |
 | `--ds-accent-ochre` | `#C9922B` | Accent + warning |
 | `--ds-accent-teal` | `#2E7D7A` | Accent |
+| `--ds-accent-plum` | `#8B5E83` | Tertiary accent (decorative use ok) |
+| `--ds-surface-ai` | `#F1E9EF` | AI-content surface (`.ds-ai`) |
+| `--ds-on-surface-ai` | `#6A4763` | AI mark text/glyph (`.ds-ai-mark`; AA on AI surface, bg, surface) |
 | `--ds-success` | `#5C7A3E` | Warm olive |
 | `--ds-error` | `#A8392E` | Warm brick red |
 
@@ -85,6 +89,38 @@ Warm-neutral canvas with one primary and two accents. Color is reserved for inte
 
 ---
 
+## AI content
+
+A first-class, on-brand way to mark model-generated content. It is built on
+plum but **plum is not reserved** — a decorative plum accent elsewhere is
+fine. AI is signalled by the **`.ds-ai` surface + `.ds-ai-mark` mark
+together**, never by colour alone.
+
+| Token / class | Role |
+|---|---|
+| `--ds-surface-ai` | Faint plum surface for an AI block |
+| `--ds-on-surface-ai` | Mark text/glyph colour (WCAG AA on AI surface, bg, surface) |
+| `.ds-ai` | Surface-only modifier — compose with `.ds-panel` for chrome |
+| `.ds-ai-mark` | The byline mark; composes independently (block or inline) |
+
+**The mark.** Lucide `cpu` (canonical; `bot` is the only sanctioned
+alternative — swap the whole system, not one use) + the plainspoken byline
+`the model says · <model>`. Naming the model is encouraged — transparency is
+the character. Markup: `<span class="ds-ai-mark"><Cpu/> the model says ·
+sonnet</span>` (the package ships the class; the consumer renders the Lucide
+icon, same contract as the rest of iconography). Write the byline in
+sentence case in source — `.ds-ai-mark` renders it uppercase, the mono-meta
+carve-out (see § Type), not an ALL-CAPS exception to the voice rule.
+
+**Sub-states inside a constant AI block.** Keep the `.ds-ai` surface and mark
+constant; differentiate sub-states (e.g. a verdict) by tinting the state's
+Lucide icon with an existing semantic token (`--ds-success`,
+`--ds-accent-ochre`/warning, `--ds-error`, `--ds-primary`, `--ds-text-muted`)
+— icons are non-text (3:1), so no per-state surface or border. Never a
+heavier border (see the border non-negotiable).
+
+---
+
 ## Type
 
 Outfit (display) × DM Sans (body) — geometric × rounded — JetBrains Mono for code and meta only. No italics in UI chrome.
@@ -125,6 +161,18 @@ Corners are continuous / squircle-adjacent — that's why `16px` and `999px` fee
 
 ---
 
+## Border
+
+One weight. **No others allowed.**
+
+| Token | Value | Use |
+|---|---|---|
+| `--ds-border-width` | `1px` | Every border — panels, inputs, dividers, hairlines |
+
+Borders are always this single hairline; the system has no heavier border. When something needs more separation or emphasis, use **shadow / elevation** (see Shadow), not a thicker border. Reference `--ds-border-width` for the width and `--ds-border` for the color — never hard-code `1px`.
+
+---
+
 ## Motion
 
 Spring easing over linear. **Everything resolves under 300ms.**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dustin-riley/design",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Dustin Riley design system — warm mid-century modern tokens and primitives.",
   "license": "MIT",
   "type": "module",

package/skill/dustinriley-design/SKILL.md

@@ -14,6 +14,7 @@ Apply this whenever you add or change UI in a project importing `@dustin-riley/d
 - 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.
+- AI-generated content uses `.ds-ai` (surface) + `.ds-ai-mark` (Lucide `cpu` + "the model says · <model>") together — never plum colour alone. Plum stays a usable tertiary accent. Write the byline sentence-case in source; `.ds-ai-mark` renders it uppercase (mono-meta carve-out, not an ALL-CAPS exception).
 
 ## How to consume
 - Always: `@import "@dustin-riley/design/tokens.css"; @import "@dustin-riley/design/core.css";`
@@ -29,7 +30,7 @@ Apply this whenever you add or change UI in a project importing `@dustin-riley/d
 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`.
+surfaces `.ds-panel`, `.kbd`; AI `.ds-ai`, `.ds-ai-mark`.
 
 Site-specific furniture (nav, footer, hero, grids) is NOT in the package by
 design — build it per project from these primitives and tokens.

package/src/core.css

@@ -130,7 +130,7 @@ h6,
 .ds-btn-secondary {
   background: var(--ds-surface);
   color: var(--ds-text);
-  border: 1px solid var(--ds-border);
+  border: var(--ds-border-width) solid var(--ds-border);
 }
 
 .ds-btn-secondary:hover {
@@ -220,13 +220,42 @@ h6,
   box-shadow: var(--ds-shadow-md);
 }
 
+/* ----- AI content -----
+   .ds-ai is a surface-only modifier (compose with .ds-panel for chrome).
+   It pins color:var(--ds-text) (not just background) so the light plum
+   surface keeps a safe foreground even nested in an inverted region —
+   same surface/foreground contract as .ds-btn-secondary.
+   .ds-ai-mark is the mono "the model says" byline; composes independently
+   (inside .ds-ai or inline in ordinary content). It intentionally restates
+   the .grid-label mono-meta recipe (mono + caption + 500 + uppercase +
+   0.06em) as a distinct role with the plum AI foreground — same precedent
+   as .ds-caption vs .grid-label; do NOT factor it into a shared base.
+   Both use the plum AI tokens. AI is signalled by surface + mark TOGETHER,
+   never plum alone. */
+.ds-ai {
+  background: var(--ds-surface-ai);
+  color: var(--ds-text);
+}
+
+.ds-ai-mark {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-1);
+  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-on-surface-ai);
+}
+
 /* ----- 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: var(--ds-border-width) solid var(--ds-border);
   border-radius: var(--ds-radius-sm);
   color: var(--ds-text);
 }
@@ -297,7 +326,7 @@ h6,
   background: var(--ds-surface-sunken);
   padding: 2px 6px;
   border-radius: var(--ds-radius-sm);
-  border: 1px solid var(--ds-border);
+  border: var(--ds-border-width) solid var(--ds-border);
 }
 
 ::selection { background: rgba(184, 84, 28, 0.2); }

package/src/tokens.css

@@ -88,6 +88,17 @@
   --ds-radius-md: 16px;
   --ds-radius-pill: 999px;
 
+  /* Border width (1 only — never heavier; emphasis is shadow, not thickness) */
+  --ds-border-width: 1px;
+
+  /* AI content (plum-derived; the AI surface + mark together signal AI —
+     plum itself stays a usable tertiary accent). --ds-on-surface-ai is the
+     paired foreground for --ds-surface-ai (cf. --ds-on-primary) and clears
+     WCAG AA: ~6.55:1 on --ds-surface-ai, ~7.24:1 on --ds-bg, ~6.64:1 on
+     --ds-surface (measured), mirroring the --ds-link precedent. */
+  --ds-surface-ai: #f1e9ef;
+  --ds-on-surface-ai: #6a4763;
+
   /* Shadow (warm-tinted) */
   --ds-shadow-sm: 0 1px 2px rgba(74, 52, 28, 0.06),
     0 1px 1px rgba(74, 52, 28, 0.04);