Design System From Scratch
By Amara Diallo · Published · Updated
Defines a new design system in one document: tokens, components, states, and the rules for using them so teams build the same way.
Prompt template
## Design System From Scratch Create the foundation document for a new design system. - Product and brand personality: [textarea: What it is and how it should feel] - Platforms covered: [multi: Web, iOS, Android, Flutter, Email] - Starting colours: [text: Brand hex values or none] - Team using it: [text: Designers and developers and how many] - Component set: [multi: Buttons, Forms, Navigation, Cards, Modals, Tables, Alerts, Tabs] - Output format: [dropdown: Markdown, Design tokens JSON plus Markdown] Build the document in layers. Foundations: colour roles, type scale, spacing, radius, elevation, and motion timings, all as named tokens. Components: for each chosen component give anatomy, variants, sizes, and every state (default, hover, focus, active, disabled, loading, error). Usage rules: when to use each component, when not to, and the one most common misuse. Accessibility: contrast targets, focus rings, minimum touch size, and keyboard behaviour. Governance: how a new component is proposed, reviewed, and versioned. Keep each component entry to a short block that a developer could implement from. End with a list of the ten decisions the team must confirm before adoption.