§ Generative

/foundations

Generate design tokens and primitives.

What it does

AI tools generate the same baseline for every product — Inter on white, blue accents, 8px radii, Tailwind’s default scale. /foundations replaces the inheritance with a starter system calibrated to your project’s character: color tokens, type scale, spacing, radius, motion, plus the primitive components everything else composes from.

/foundations is the commit-to-specifics step. It reads `.spruce.md` for context and `.sketch.md` for visual direction, then picks the specific values that express the character /sketch established — which typeface from the candidates, what specific OKLCH values for the color families /sketch named, what scale, what spacing rhythm, what specific durations within /sketch’s motion bands, what primitive components anchor the system. The creative work at this stage is selection and codification, not character discovery — that already happened in /sketch.

The output is end-to-end: design tokens across all domains, three to five primitive components implementing the system, plus a brief system guide. Significant decisions inside the codification step (accent strategy, type pairing, spacing base) are surfaced for your approval before commitment. When `.sketch.md` doesn’t exist, /foundations can still run — it makes the character calls inside itself but flags them clearly so they’re easy to redirect.

Specimen

/foundations · Stillpoint

Type

Find your stillpoint.

Lora·  Editorial serif·  48 px · 1.2 line-height · weight 400--stp-font-serif · --stp-text-4xl · --stp-leading-tight

A few minutes for yourself, when it’s right. Mindfulness for real life — practices designed to fit into the spaces of an ordinary day.

Söhne·  Humanist sans·  18 px · 1.7 line-height · weight 400--stp-font-sans · --stp-text-lg · --stp-leading-relaxed

Color

Cream

Sand

Sage

Indigo

Lavender

Peach

Creamoklch(96% 0.018 75)Background--stp-color-bgSandoklch(93% 0.024 75)Surface--stp-color-surfaceSageoklch(58% 0.065 145)Primary accent--stp-color-sageIndigooklch(28% 0.060 270)Text + depth--stp-color-textLavenderoklch(72% 0.055 295)Warmth--stp-color-lavenderPeachoklch(80% 0.090 50)Energy--stp-color-peach

Composed

5 min · Breath

Morning Grounding

Five minutes of breath to begin the day.

Space

--stp-space-1 · 4px
--stp-space-2 · 8px
--stp-space-4 · 16px
--stp-space-6 · 24px
--stp-space-8 · 32px
--stp-space-12 · 48px

Tokens and primitives /foundations generated for Stillpoint, reading from .spruce.md and .sketch.md. Every other command in the Stillpoint thread composes within this system.

When to use it

  • Starting a new project after /spruce-up has captured context and /sketch has captured visual direction.
  • The project has no design tokens or primitive components yet.
  • Existing tokens are arbitrary — no scale, no system, just one-off values.
  • A project’s existing design system needs regenerating for a new direction.
  • Another command flagged that there’s no foundation to work with.

How to use it

/foundations

By default /foundations runs the full pass — color tokens, type scale, spacing, radius, motion, plus a small set of primitive components (button, card, link, heading). Pass a scope to focus on one layer, or describe what you need. Significant character shifts within each layer are surfaced for your approval rather than applied silently.

  • /foundations color
  • /foundations type

Anti-patterns it addresses

  • Inter, blue accents, and 8px radii shipped because the AI didn’t have anything else to draw from. Tokens by inheritance, not by choice.
  • Arbitrary spacing values (15px, 22px, 31px) with no underlying scale — visual wobble accumulating across the system.
  • Primitives that don’t reference tokens — colors hardcoded inline, sizes set in pixels rather than scale steps. The system has tokens, but components ignore them.
  • Three different type families because no decision was made about the typographic voice — geometric sans for headings, system-ui for body, a serif somewhere for variety.
  • Six different corner radii across components. The shape system was never established; each component picks its own.
  • “Custom” tokens that just rename Tailwind defaults without character consideration — `color.primary = blue-500`.

See also