--- prompt-id: "03" name: Foundation components — Button, Input, Badge, Card, Alert, Dialog, Table, Form, Empty state status: live mcp: none model: Sonnet 4.6 environment: Claude.ai or Claude Code inputs: - output/tokens.css - specs/governance.spec.md - specs/.spec.md outputs: - output/components/foundation.css chains: [3, 9] prereqs: ["01", "02"] documented-in: Ch05 — Foundation Components --- # Prompt 03 — Foundation components Generates the full foundation component set from `tokens.css` + governance + archetype spec. Every variant, every interactive state, every token reference in place from the first pass. --- ``` ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ META-HEADER — run before generating any CSS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ STEP -2 — DETECT ENVIRONMENT Check whether you have file-write access (Claude Code / IDE) or are in a chat session (Claude.ai). Claude Code: outputs will be saved automatically to output/components/foundation.css Claude.ai: at save points, provide copy-paste instructions with the exact filename and target path. STEP -1 — CONTEXT CHECK Verify the following files exist and read them before proceeding: output/tokens.css → REQUIRED; stop and ask if missing. This is the contract — every CSS custom property referenced below must exist in tokens.css. specs/governance.spec.md → REQUIRED; governs naming, state conventions, spacing rules. specs/.spec.md → REQUIRED; governs component aesthetics — radius, shadow, weight, palette choices. output/chain-state.md → if present, read — confirms which archetype is active. output/components/ → if foundation.css already exists, ask "overwrite or extend?" If any required file is missing, stop and ask the user before generating a single line of CSS. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ MAIN PROMPT BODY ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PROMPT 03 — FOUNDATION COMPONENT CSS YOUR ROLE You are a design-system CSS engineer. You translate three pasted inputs (tokens.css, governance spec, archetype spec) into a complete, production-grade foundation.css containing every foundation component with every variant and every interactive state. You never invent design decisions — you derive them from the specs. Every value you emit must trace back to a token. RULE: ZERO hardcoded values Every colour, size, radius, shadow, weight, and spacing value must reference a CSS custom property defined in tokens.css. If a value is not covered by tokens.css, note the gap and use the closest semantic token — never emit raw hex, px literals, or magic numbers. THE FOUNDATION COMPONENT SET Generate CSS for these nine components in this order: 1. Button 2. Input (text, textarea) 3. Badge (label, tag, status pill) 4. Card (content container) 5. Alert (info, warning, error, success) 6. Dialog (modal overlay) 7. Table (data rows + header) 8. Form (fieldset, label, helper text, error state) 9. Empty state (zero-content placeholder) For EACH component generate: — Base class (the default / resting state) — All semantic variants (primary, secondary, ghost, danger, etc.) as defined in the archetype COMPONENTS section — All interactive states: :hover, :focus, :focus-visible, :active, :disabled — using tokens where available — All size variants the governance spec defines (small / medium / large or equivalent) — Dark-mode overrides inside [data-theme="dark"] selector, but only if the archetype is dark-first (Harbor, Lattice); for light-first archetypes (Sentinel, Current, Meridian) emit light as default and provide a [data-theme="dark"] block BUTTON — SPECIFIC RULES Read the archetype spec BUTTON section precisely: — Primary CTA uses --color-cta-bg / --color-cta-text — Secondary uses --color-surface-raised / --color-text-primary — Ghost/outline: transparent background, 1px border — Disabled: opacity-40 equivalent using token; pointer-events:none — Loading state: show spinner, set pointer-events:none — Icon-only variant: square, equal padding, aria-label required (annotate with a CSS comment) — Size variants: map to --spacing-* and --font-size-* tokens INPUT — SPECIFIC RULES — Default: border-color --color-border, bg --color-surface-base — Focus: border-color --color-focus-ring, box-shadow focus ring using token (2px spread, colour from --color-focus-ring) — Error state: border-color --color-error, adds error icon slot — Disabled: --color-surface-subtle bg, --color-text-disabled — Read-only: no border highlight, cursor:default — Textarea: same states, min-height via --spacing token — Label above: font-weight semibold, --color-text-secondary — Helper text below: --font-size-sm, --color-text-tertiary BADGE — SPECIFIC RULES — Inline, tight padding, border-radius pill — Variants: neutral, info, success, warning, error — Each uses a surface + text token pair from the spec — Dot-badge variant (notification count): position:absolute CARD — SPECIFIC RULES — Uses --radius-card, --shadow-card, --color-surface-raised — Hover: slight elevation increase (shadow token step up) — Clickable card variant: cursor:pointer, focus ring — Header / body / footer sub-regions with dividers using --color-border ALERT — SPECIFIC RULES — Four semantic variants: info, success, warning, error — Icon slot on the left (16px, colour matches variant) — Dismissible variant adds x-button — Colour pairs: use archetype SEMANTIC COLORS section (--color-info-bg, --color-info-text, etc. if defined) or derive from --color-primary / --color-error tokens DIALOG — SPECIFIC RULES — Overlay: rgba using --color-overlay token or equivalent — Panel: --color-surface-raised, --radius-dialog, max-width from governance spec COMPONENTS section — Header/body/footer regions; footer right-aligns actions — Transition: fade + slide-up, respects @media (prefers-reduced-motion) TABLE — SPECIFIC RULES — Striped rows using --color-surface-subtle alternate — Sticky header: position:sticky top:0, z-index token — Sort indicator: chevron icon slot, --color-text-tertiary — Row hover: --color-surface-hover — Dense variant: reduce row height by one spacing step — Responsive: at mobile breakpoint, switch to card-list layout (annotate with a CSS comment — no JS needed in CSS prompt) FORM — SPECIFIC RULES — Fieldset: no browser default border, uses --spacing-* gap — Required indicator: * character, --color-error — Error message below input: --color-error, --font-size-sm — Inline form layout variant: label + field on one row — Validation icons in input suffix slot EMPTY STATE — SPECIFIC RULES — Centred vertically + horizontally in its container — Illustration slot (SVG icon): 48px, --color-text-disabled — Headline + subtext + optional CTA button — Maintain archetype text sizing and colour tokens ARCHETYPE-SPECIFIC OVERRIDES After reading the archetype spec, apply any component-level directives listed under COMPONENTS or VISUAL LANGUAGE: Harbor: dark surface cards, teal focus rings, editorial typography in card headers Sentinel: high contrast borders, explicit state colours, orange CTA token only, 0 decorative shadows Current: 44px minimum touch targets on all interactive elements, large tap area padding Lattice: compact density, monospace labels, green accent only for data-positive states Meridian: generous whitespace, 17-19px body references in form helper text, soft radius (--radius-lg) OUTPUT FORMAT Emit one continuous CSS file. Organise with section comments: /* ── 03 FOUNDATION COMPONENTS ─────────────────────────────── */ /* ── Button ─────────────────────────────────────────────────── */ ... /* ── Input ──────────────────────────────────────────────────── */ ... (and so on for each component) No inline HTML. No JavaScript. No @import. CSS custom properties only — no Sass variables. The file should work standalone when tokens.css is loaded first in the document. BEFORE EMITTING Do a pre-flight check: 1. List every token you intend to reference. 2. Confirm each one exists in the pasted tokens.css. 3. Flag any missing tokens as a comment block at the top of the file: /* MISSING TOKENS: --token-name, ... */ 4. Only then emit the full CSS. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ META-FOOTER — after generating CSS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SAVE INSTRUCTION Save the output as: output/components/foundation.css If Claude Code: write the file directly. If Claude.ai: display the save path and paste-ready block. OPTIONAL HTML PREVIEW Offer: "Want an HTML preview page that renders all components in both light and dark mode?" — generate on request; do not auto-generate to keep the output focused. CHAIN-STATE LOG Append the following to output/chain-state.md: ## Prompt 03 — Foundation components Date: Archetype: Components generated: Button, Input, Badge, Card, Alert, Dialog, Table, Form, Empty state Output: output/components/foundation.css Token gaps flagged: HANDOFF Announce to the user: "Foundation components done. Next → Prompt 04 — Composite components (Modal, Drawer, Popover, Tabs, Accordion, Combobox). Paste your governance spec + archetype spec again before running Prompt 04, along with foundation.css." ```