Patterson Design System

Not the canonical published system

This is the claude.ai/design authoring project, not the canonical published design system. patterson-design-plugins (and its fork design-plugins/) ships the published marketplace, generated from an earlier state of this project. The two have materially diverged since — tokens/colors.css is close to a full rewrite here, and this project carries net-new tokens (tokens/icons.css) the published marketplace does not have. Which one supersedes which is an open decision. Do not treat this site as the source of truth for the published Patterson brand plugins without resolving that decision first.

What this is

The authoring project behind Patterson’s design system: design tokens, a small component library with usage prompts, brand guideline reference cards, framework integrations (Tailwind, UnoCSS, shadcn, theme-ui), and page/deck/site templates. This site republishes that project as documentation — the design guide carries the full system rationale, the tokens reference is generated straight from the token stylesheets, and components, icons, and specimens render the rest live.

Design guide

DESIGN.md, split into pages: colors, typography, layout, elevation and motion, shapes, components, do’s and don’ts, and verification against production.

Tokens

Every custom property in tokens/*.css — name, value, and a swatch for colors — generated by a re-runnable script, never hand-copied.

Components

Twelve components across core, feedback, and forms, each documented from its own .prompt.md contract, with a link to the live kitchen sink.

Icons and specimens

The 93-glyph icon library rendered inline, plus every brand guideline card and template demo, live and passthrough.

Layout

Path	What it is
tokens/	Design tokens: base, colors, effects, fonts, icons, spacing, typography
components/	core/, feedback/, forms/ — each ships a .jsx, .d.ts, and a .prompt.md
guidelines/	Brand reference cards (.card.html) — logo, icons, palette, type, interaction states
integrations/	Tailwind, UnoCSS, shadcn, theme-ui adapters
templates/	Page/deck/site scaffolds — canvas, corporate page, corporate website, deck, docs site, executive deck, file manager, purpose/vision/values, storefront
site/	The design system’s own documentation and demo site (this site, plus the legacy static kitchen sink)
DESIGN.md, SKILL.md, CLAUDE.md	System rationale, skill invocation, agent conventions

Provenance

Imported from the claude.ai/design “patterson-design-system” handoff export. See README.md in the repository for the full provenance note, exclusions, and the brand asset re-encode history.