open-design/design-systems
chaoxiaoche b68e4d3252
feat(design-systems): add tokens.css + components.html for 9 AI product brands (#1841)
* feat(design-systems): add tokens.css + components.html for 9 AI product brands

Compiles DESIGN.md prose into machine-consumable agent artifacts for
claude, cohere, elevenlabs, huggingface, mistral-ai, nvidia, opencode-ai,
replicate, and together-ai.

Each brand adds:
- tokens.css  — :root block of CSS custom properties derived from the brand's
                DESIGN.md; agents paste this directly into generated HTML <style> tags
- components.html — reference fixture embedding the token block inline and
                    demonstrating buttons, inputs, cards, and badges styled
                    with var(--token-name) calls

Key brand decisions encoded:
- claude: warm parchment canvas, terracotta accent, Anthropic Serif display
- cohere: pure white, 22px signature radius, CohereText + Unica77
- elevenlabs: achromatic + warm stone, Waldenburg weight 300, pill-shaped
- huggingface: IBM Plex Mono headings/tags, HF Yellow (#ffd21e), 4-6px radius
- mistral-ai: golden amber palette, Arial weight 400, near-zero radius
- nvidia: true black, NVIDIA Green as border/outline signal only, teal hover
- opencode-ai: Berkeley Mono sole typeface, flat depth (ring-only elevation)
- replicate: pill-shaped everything (9999px), rb-freigeist-neue heavy
- together-ai: "The Future" font, -0.03em tracking, white/midnight dual world

openai tokens.css + components.html were merged to main separately.

Co-authored-by: Cursor <cursoragent@cursor.com>

* fix(design-systems): sync :root token blocks with tokens.css for opencode-ai and together-ai

opencode-ai: add missing "Liberation Mono" to all three font-stack fallbacks.
together-ai: remove --lavender declaration absent from tokens.css (guard requires byte-identical :root blocks).
Co-authored-by: Cursor <cursoragent@cursor.com>

---------

Co-authored-by: chaoxiaoche <chaoxiaoche@chaoxiaochedeMacBook-Pro.local>
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-18 11:54:50 +08:00
..
_schema feat(design-systems): add structured tokens for notion, linear, github, figma, slack, discord, openai, shopify, spotify, uber (#1794) 2026-05-15 17:21:27 +08:00
agentic update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
airbnb feat(design-systems): add structured tokens for cursor, apple, stripe, airbnb, vercel brands (#1652) 2026-05-15 16:53:51 +08:00
airtable Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
ant update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
apple feat(design-systems): add structured tokens for cursor, apple, stripe, airbnb, vercel brands (#1652) 2026-05-15 16:53:51 +08:00
application update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
arc feat(web): add brand design systems, card thumbnails, and DESIGN.md side-by-side preview (#289) 2026-05-02 23:19:00 +08:00
artistic update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
atelier-zero feat(skills): open-design-landing rename, kami skills, landing OG (#428) 2026-05-04 19:22:46 +08:00
bento update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
binance Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
bmw Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
bmw-m Add BMW M design system (#579) 2026-05-08 12:49:32 +08:00
bold update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
brutalism update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
bugatti Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
cafe update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
cal Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
canva feat(web): add brand design systems, card thumbnails, and DESIGN.md side-by-side preview (#289) 2026-05-02 23:19:00 +08:00
cisco Add Cisco and Webex design systems (#991) 2026-05-09 09:02:19 +08:00
claude feat(design-systems): add tokens.css + components.html for 9 AI product brands (#1841) 2026-05-18 11:54:50 +08:00
clay Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
claymorphism update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
clean update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
clickhouse Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
cohere feat(design-systems): add tokens.css + components.html for 9 AI product brands (#1841) 2026-05-18 11:54:50 +08:00
coinbase Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
colorful update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
composio Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
contemporary update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
corporate update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
cosmic update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
creative update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
cursor feat(design-systems): add structured tokens for cursor, apple, stripe, airbnb, vercel brands (#1652) 2026-05-15 16:53:51 +08:00
dashboard update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
default feat(design-systems): add structured tokens.css schema (default + kami) (#1231) 2026-05-11 22:23:34 +08:00
discord feat(design-systems): add structured tokens for notion, linear, github, figma, slack, discord, openai, shopify, spotify, uber (#1794) 2026-05-15 17:21:27 +08:00
dithered update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
doodle update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
dramatic update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
duolingo feat(web): add brand design systems, card thumbnails, and DESIGN.md side-by-side preview (#289) 2026-05-02 23:19:00 +08:00
editorial update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
elegant update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
elevenlabs feat(design-systems): add tokens.css + components.html for 9 AI product brands (#1841) 2026-05-18 11:54:50 +08:00
energetic update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
enterprise update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
expo Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
expressive update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
fantasy update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
ferrari Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
figma feat(design-systems): add structured tokens for notion, linear, github, figma, slack, discord, openai, shopify, spotify, uber (#1794) 2026-05-15 17:21:27 +08:00
flat update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
framer Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
friendly update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
futuristic update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
github feat(design-systems): add structured tokens for notion, linear, github, figma, slack, discord, openai, shopify, spotify, uber (#1794) 2026-05-15 17:21:27 +08:00
glassmorphism update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
gradient update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
hashicorp Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
hud feat(design-systems): add hud, loom, trading-terminal with locale coverage (#1069) 2026-05-09 19:28:19 +08:00
huggingface feat(design-systems): add tokens.css + components.html for 9 AI product brands (#1841) 2026-05-18 11:54:50 +08:00
ibm Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
intercom Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
kami feat(design-systems): add structured tokens.css schema (default + kami) (#1231) 2026-05-11 22:23:34 +08:00
kraken Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
lamborghini Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
levels update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
linear-app feat(design-systems): add structured tokens for notion, linear, github, figma, slack, discord, openai, shopify, spotify, uber (#1794) 2026-05-15 17:21:27 +08:00
lingo update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
loom feat(design-systems): add hud, loom, trading-terminal with locale coverage (#1069) 2026-05-09 19:28:19 +08:00
lovable Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
luxury update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
mastercard Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
material update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
meta Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
minimal update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
minimax Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
mintlify Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
miro Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
mission-control feat(design-systems): add Mission Control design system (#858) 2026-05-08 12:32:51 +08:00
mistral-ai feat(design-systems): add tokens.css + components.html for 9 AI product brands (#1841) 2026-05-18 11:54:50 +08:00
modern update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
mongodb Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
mono update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
neobrutalism update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
neon update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
neumorphism update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
nike Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
notion feat(design-systems): add structured tokens for notion, linear, github, figma, slack, discord, openai, shopify, spotify, uber (#1794) 2026-05-15 17:21:27 +08:00
nvidia feat(design-systems): add tokens.css + components.html for 9 AI product brands (#1841) 2026-05-18 11:54:50 +08:00
ollama Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
openai feat(design-systems): add structured tokens for notion, linear, github, figma, slack, discord, openai, shopify, spotify, uber (#1794) 2026-05-15 17:21:27 +08:00
opencode-ai feat(design-systems): add tokens.css + components.html for 9 AI product brands (#1841) 2026-05-18 11:54:50 +08:00
pacman update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
paper update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
perplexity add perplexity design system (#1747) 2026-05-16 16:00:37 +08:00
perspective update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
pinterest Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
playstation Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
posthog Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
premium update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
professional update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
publication update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
raycast Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
refined update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
renault Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
replicate feat(design-systems): add tokens.css + components.html for 9 AI product brands (#1841) 2026-05-18 11:54:50 +08:00
resend Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
retro update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
revolut Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
runwayml Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
sanity Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
sentry Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
shadcn update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
shopify feat(design-systems): add structured tokens for notion, linear, github, figma, slack, discord, openai, shopify, spotify, uber (#1794) 2026-05-15 17:21:27 +08:00
simple update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
skeumorphism update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
slack feat(design-systems): add structured tokens for notion, linear, github, figma, slack, discord, openai, shopify, spotify, uber (#1794) 2026-05-15 17:21:27 +08:00
sleek update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
spacex Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
spacious update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
spotify feat(design-systems): add structured tokens for notion, linear, github, figma, slack, discord, openai, shopify, spotify, uber (#1794) 2026-05-15 17:21:27 +08:00
starbucks Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
storytelling update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
stripe feat(design-systems): add structured tokens for cursor, apple, stripe, airbnb, vercel brands (#1652) 2026-05-15 16:53:51 +08:00
supabase Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
superhuman Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
tesla Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
tetris update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
theverge Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
together-ai feat(design-systems): add tokens.css + components.html for 9 AI product brands (#1841) 2026-05-18 11:54:50 +08:00
totality-festival feat(skills): add social-media-dashboard skill + Totality Festival design system (#678) 2026-05-06 21:50:23 +08:00
trading-terminal feat(design-systems): add hud, loom, trading-terminal with locale coverage (#1069) 2026-05-09 19:28:19 +08:00
uber feat(design-systems): add structured tokens for notion, linear, github, figma, slack, discord, openai, shopify, spotify, uber (#1794) 2026-05-15 17:21:27 +08:00
urdu feat(design-systems): add Urdu Modern (Indus Script) system (#714) 2026-05-08 13:05:55 +08:00
vercel feat(design-systems): add structured tokens for cursor, apple, stripe, airbnb, vercel brands (#1652) 2026-05-15 16:53:51 +08:00
vibrant update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
vintage update: add 57 DESIGN.md files from awesome-design-skills (#92) 2026-05-01 16:57:25 +08:00
vodafone Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
voltagent Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
warm-editorial Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
warp Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
webex Add Cisco and Webex design systems (#991) 2026-05-09 09:02:19 +08:00
webflow Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
wechat feat: add WeChat design system, login-flow skill, and fix API mode tool_calls bug (#1083) 2026-05-10 20:38:33 +08:00
wired Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
wise Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
x-ai Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
xiaohongshu docs(xiaohongshu): address review feedback from #24 (#54) 2026-05-01 10:38:19 +08:00
zapier Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
README.md Add Cisco and Webex design systems (#991) 2026-05-09 09:02:19 +08:00

Design Systems

Each subfolder is a portable design system in DESIGN.md format. Pick one in the top-bar Design system dropdown and every skill will read it as part of its system prompt.

What's bundled

  • default/ — Neutral Modern. Hand-authored starter for the OD spec.
  • warm-editorial/ — Warm Editorial. Hand-authored serif starter.
  • atelier-zero/ — Atelier Zero. Hand-authored magazine-grade collage system: warm paper canvas, plaster-and-architecture imagery, oversized italic-mixed display type, Roman-numeral section markers, side rails of rotated micro-text, coordinate annotations, single coral accent. Pairs with skills/open-design-landing/ and skills/open-design-landing-deck/ for the canonical landing-page and slide-deck renderings.
  • kami/ — 紙 / 纸. Editorial paper system distilled from tw93/kami (MIT). Warm parchment canvas, ink-blue accent, serif at one weight, no italic, no cool grays. Pairs with the templates/kami-deck.html starter for slide work.
  • 57 design skills, sourced from bergside/awesome-design-skills and added directly as normalized 9-section DESIGN.md files.
  • 72 product systems, including 70 imported from VoltAgent/awesome-design-md (the getdesign@latest npm package, MIT-licensed), plus two hand-authored additions (cisco, webex). This table covers that imported product-system subset only; the full bundled catalog is larger once you include the hand-authored starters and the separate design-skill systems listed above. One folder per brand:
    Category Systems
    AI & LLM claude · cohere · elevenlabs · minimax · mistral-ai · ollama · opencode-ai · replicate · runwayml · together-ai · voltagent · x-ai
    Developer Tools cursor · expo · lovable · raycast · superhuman · vercel · warp
    Productivity & SaaS cal · intercom · linear-app · mintlify · notion · resend · webex · zapier
    Backend & Data cisco · clickhouse · composio · hashicorp · mongodb · posthog · sanity · sentry · supabase
    Design & Creative airtable · clay · figma · framer · miro · webflow
    Fintech & Crypto binance · coinbase · kraken · mastercard · revolut · stripe · wise
    E-Commerce & Retail airbnb · meta · nike · shopify · starbucks
    Media & Consumer apple · ibm · nvidia · pinterest · playstation · spacex · spotify · theverge · uber · vodafone · wired · xiaohongshu
    Automotive bmw · bugatti · ferrari · lamborghini · renault · tesla

Folders use ASCII slugs — dotted brands are normalized (linear.applinear-app, x.aix-ai, etc.).

File shape

The first H1 is the title shown in the picker. The line immediately after the H1 is parsed for > Category: <name> and used to group the dropdown:

# Design System Inspired by Cohere

> Category: AI & LLM
> Enterprise AI platform. Vibrant gradients, data-rich dashboard aesthetic.

## 1. Visual Theme & Atmosphere
...

Both the boilerplate prefix Design System Inspired by and the > Category: ... line are stripped from the dropdown label and the summary preview at runtime — they're only metadata.

Adding your own

Drop a new folder containing a DESIGN.md and it shows up on next refresh. Add a > Category: <Group> line to slot it under an existing group, or use any new label and it lands at the bottom of the dropdown.

Refreshing the bundled set

The 70 imported product systems are pulled from the upstream npm package. To re-sync to the latest hashes:

curl -sL $(npm view getdesign dist.tarball) -o /tmp/getdesign.tgz
tar -xzf /tmp/getdesign.tgz -C /tmp
node --experimental-strip-types scripts/sync-design-systems.ts

For now, the original importer lives at the top of the excessive-climb branch — re-run it against a fresh tarball.

Attribution

The 70 imported product systems are sourced from VoltAgent/awesome-design-md (MIT, © VoltAgent contributors). They are aesthetic inspirations — none of them are official assets of the brands they reference.

The cisco/ and webex/ systems are hand-authored additions based on the current public Cisco and Webex / Momentum visual languages.

The kami/ system adapts tokens, type rules, and the "ten invariants" from tw93/kami (MIT, © Tw93 and contributors), a Claude skill for typesetting professional documents and slide decks.

The 57 design skills are sourced from bergside/awesome-design-skills.