For makers, product teams and their AI
A design system
you can read and take.
Every decision is an answered question, with its options and its reason in plain view. Then the whole system is yours: tokens, components, Storybook and docs, delivered in one command or through your AI, as code you own.
Scheme
Reasons
why this scheme exists
Product
Runs daily operations, onePeople
Daily experts, AAContent
Numbers and records, a lotTasks
Scan and compare, constantlyHuman factors
People keep their place, they learn it and recognise itOutcome
Time on task, acting on the wrong recordScenarios
At a desk, all dayTeam
A small team, every month
Every scheme answers the same reason questions. Different answers here lead to different design answers below.
Brand
Precise, quiet
How it should feel. It pulls color, type and shape answers.
Voice and tone
Terse and exact
Toast
12 alerts exported.Error
Alert ALR-2042 not saved. Threshold must be between 0 and 100.How it speaks. It answers the words in every component.
Answers
same questions for every scheme
Dense data’s answers, chosen because of the reasons above:
| Roles | How many | How defined | Values | Lands in | |
|---|---|---|---|---|---|
| Typography | Core and data | Only the steps the screens need | A ratio, line heights on the grid | Small | Tables and inputs |
| Color | Surface, text, action and status | Three | Neutrals and one brand ramp | Muted | Status in tables |
| Spacing | Gaps, insets and row heights | Two | A fine base unit | Compact | Rows and cells |
| Shape | Controls, badges and containers | Three | Fixed for the product | Slightly rounded | Controls in dense rows |
| Motion | Feedback only | One | Standard ease-out | Fast | State changes only |
| Voice | Labels and messages | One | Rules and a word list | Terse | Errors and empty states |
Where the answers land
Open alerts
| ALR-2041 | api-gateway-01 | Resolved |
| ALR-2042 | llm-inference-02 | Escalated |
| ALR-2043 | vpn-edge-03 | Breach confirmed |
| ALR-2044 | model-registry | False positive |
Because: people scan rows and compare values. Speed on repeated tasks is the measure.
How it works
Start from a scheme. Deploy it your way.
1 · Pick a scheme
Start from a ready-made design system for a product like yours: dense data, content, accessibility first, multi-brand, or an expressive brand.
- Dense data
- Content first
- Accessible first
2 · Deploy it
Connect your AI through MCP and it deploys the scheme, keeping every answer and its reason, so it builds the way the system would. Or run the CLI and do it yourself.
- “Deploy Dense data”
- open-ds init
- get_answer(id)
3 · Change what differs
When your product is different, change that one answer. See what moves, and keep it as your own flavour of the scheme.
- accessibility.values → Touch
- See what moves
- Compare schemes
Schemes
Pick a scheme.
All schemes →- Dense dataCompact, exact and quiet, for analysts who scan alerts and compare signals all day.6 sizes14px body32px targets
- Content firstLarge, calm type and generous space, for people who come to read.6 sizes18px body48px targets
- Accessible firstLarge text, large targets and AAA contrast, so everyone can finish the task.6 sizes19px body52px targets
- Multi-brandOne shared system with three brands as themes. Components never change; brand primitives do.6 sizes16px body3 brands
- Brand expressiveBig display type, vivid color and springy motion, for launches that must be remembered.6 sizes17px body52px targets
- Compare schemesThe same questions, side by side, with what differs lit.5 schemessame questionslit cells
Take a scheme · A full design system
Take a whole design system.
- Agent
Connect your AI: “Deploy the Dense data scheme.” - CLI
open-ds init dense-data - Link
/schemes/dense-data
Not a token file. Every scheme delivers a fully working design system, built from its answers:
- shadcn/ui componentsThe scheme's components, themed by its tokens and copied into your project.
- A StorybookEvery component, rendered in your scheme, in light and dark and every brand.
- Docusaurus docsA docs site for your system: reasons, voice, foundations and components.
- Style Dictionary tokensDTCG source files, built into CSS, the Tailwind theme and JSON.
- Agent skill
- AGENTS.md
- CI checks
- The answer map
Built for AI agents: an MCP server, AGENTS.md and llms.txt, so agents get the reasons, not just the values.
How to install →Built on open source
Standing on good work.
Open DS decides and explains; these projects do the building. Every design system we deliver uses them as their authors intend, keeps their licences, and credits them here and in its own files.
- shadcn/ui ↗The component patterns our components start from.
- Radix UI ↗Accessible primitives under the components.
- Tailwind CSS ↗The styling layer that reads the tokens.
- Style Dictionary ↗Builds the tokens into CSS, Tailwind and JSON.
- Storybook ↗Shows every component in every scheme and mode.
- Docusaurus ↗Publishes the docs of each delivered system.
- TanStack Table ↗Powers the data table.
- Lucide ↗The icons.
Contribute
Add your answers.
Publish your design system as a scheme: same questions, your answers, your reasons. Missing a question in a scope? Propose it.