Design Systems

Brand DESIGN.md files from VoltAgent/awesome-design-md, and how to theme any MotionFoundry component with them.

MotionFoundry ships 11 brand design systems as DESIGN.md files: Vercel, Cursor, Claude, Framer, Apple, Airbnb, Expo, ElevenLabs, Runway, Resend, and Spotify. A DESIGN.md is a plain-text design system — color tokens, type ramp, radii, component specs, and do's and don'ts — written so both people and AI coding agents can follow it. Browse them on the Design Systems page.

Where they live

  • design-md/<id>/DESIGN.md — the vendored files, unchanged from VoltAgent/awesome-design-md (MIT, see design-md/LICENSE).
  • design-md/themes.json — a curated MotionFoundry theme per brand: canvas, surfaces, text, borders, accent, radius, and font stacks, picked from each file's tokens.
  • registry/designs.json — generated by node scripts/build-designs.mjs, which parses both DESIGN.md formats (YAML frontmatter tokens, or prose color bullets plus a type hierarchy table).

Theming components

Every component CSS Module reads its palette from CSS custom properties with the original value as the fallback, for example background: var(--mf-surface, #141419). Nothing changes until you set a variable, and setting them on any wrapper re-skins everything inside it:

  • --mf-bg and --mf-fg — page background and primary text (solid buttons invert these).
  • --mf-surface, --mf-surface-raised — cards, inputs, and raised layers.
  • --mf-muted, --mf-subtle — secondary and tertiary text.
  • --mf-border, --mf-border-strong — hairlines and hover borders.
  • --mf-accent — the default accent; color props such as accentColor still win when passed.

Using a preset

On any component page, open the Design picker above the preview to apply a brand: the stage switches to the brand canvas and every color control is recolored from its palette. Each design page also shows a token-built landing sketch, live components, swatches, a type specimen, and copy-ready CSS.

Adding another design system

  1. Copy design-md/<id>/DESIGN.md from awesome-design-md (or write your own in the same format).
  2. Add an entry to design-md/themes.json with the theme fields — accent and secondary must be #rrggbb hex values.
  3. Run node scripts/build-designs.mjs; the gallery, sidebar, search, and component Design pickers pick it up automatically.
terminal
# regenerate registry/designs.json after editing design-md/node scripts/build-designs.mjs # CI verifies it is up to datenode scripts/build-designs.mjs --check