## source-verified design systems
Real design systems, translated for coding agents.
Use Carbon, Material 3, Primer, Fluent 2, Cloudscape, and more from their published token sources—not a visual guess. AgentDS turns each one into a verified DESIGN.md your agent can follow.
npx skills add System-Desgin/AgentDS --skill design-systems42 published files · free API · no account
See what the file controls.
This dashboard is rendered directly from Carbon's published DESIGN.md: its real palette, type scale, spacing, radii, and status roles—not a screenshot theme or a guessed blue.
## choose a source
Official Systems
Real open-source design systems, distilled from their published tokens. Every entry records provenance, compares its colors with the cited source, passes the official linter, and requires human QA before publication.
browse official →source: public CSSBrand Looks
Independent, clearly disclaimed analyses of publicly observable product-site patterns. Use them as inspiration for an original visual system.
browse brand looks →Find the right system for the work.
Start with the interface you are building. Each category combines Official Systems and clearly labeled Brand Looks that fit the same job.
## most fetched
full catalog →Carbon
IBM · official system
IBM's open-source design system — precise, functional, and built for enterprise at scale.
Spectrum
Adobe · official system
Adobe's cross-product design system — Spectrum blue accents on a meticulous gray ramp, built for creative-pro tools.
Paste
Twilio · official system
Twilio's design system for building customer experiences — accessible, calm, and token-driven.
Garden
Zendesk · official system
Zendesk's open-source design system — calm service-desk clarity in a cool blue and kale palette, with disciplined accessibility.
Semi Design
ByteDance · official system
ByteDance's open-source design system — blue-accent minimalism, high information clarity, and first-class light/dark theming.
OpenAI
OpenAI · brand look
OpenAI's observed look — editorial monochrome minimalism, white fields, near-black type and pill CTAs, airy text, gradient art.
## how it works
- 01
Pick a system
Start with an Official System extracted from its published token source. Brand Looks are available when you want observed visual inspiration.
- 02
Give it to your agent
Copy the DESIGN.md into your repo, fetch it from the API, or install the skill. Every agent — Claude Code, Cursor, Kiro, Windsurf, Codex, OpenCode, Pi — reads the same file.
- 03
Ship on-system UI
Your agent follows source-grounded palettes, type scales, spacing, and component defaults instead of inventing them.