🎯 Design
UI/UX Design System Creator: Components & Design Tokens
Build a complete UI/UX design system with reusable components, design tokens, spacing rules, and accessibility standards for web or mobile apps.
0Reviews
Prompt
Act as a senior UI/UX designer and design systems architect. Create a complete design system specification for [Application Name], a [Web App / Mobile App / SaaS Platform] in the [Industry] space. Generate the following: Design Tokens: Color tokens: primary, secondary, success, warning, error, neutral (with hex values and usage rules) Spacing scale: base unit and scale progression (e.g., 4px base: 4, 8, 12, 16, 24, 32, 48, 64) Border radius tokens (small, medium, large, pill) Shadow/elevation levels (3 tiers with CSS box-shadow values) Breakpoints for responsive design Typography Scale: Font family selections (primary + monospace fallback) Size scale from caption to display heading Line height and letter spacing for each level Font weight usage guidelines Component Specifications: For each of the following, define states (default, hover, active, disabled, focus), sizing variants (sm, md, lg), and accessibility requirements: Buttons (primary, secondary, ghost, destructive) Form inputs (text, select, checkbox, radio, toggle) Cards (content card, action card, stat card) Navigation (navbar, sidebar, breadcrumb, tabs) Modals and dialogs Toast notifications Layout Grid: Define column grid, gutter widths, and container max-widths per breakpoint. Accessibility Checklist: WCAG 2.1 AA requirements for each component. Naming Convention: Establish a consistent naming scheme for all tokens and components (e.g., BEM, atomic). Constraints: All components must meet WCAG 2.1 AA contrast ratios. Provide CSS custom properties (variables) for all tokens. Tone: Technical, precise, and implementation-ready.
Instructions
Define your project: Replace [Application Name] and [Industry] with your specific product details. Pick your platform: Specify web, iOS, Android, or cross-platform to tailor component specs. Share existing styles: If you have brand colors or fonts already, include them so the system builds around your brand. Implement progressively: Start with design tokens and buttons, then layer on additional components as your application grows.
Examples
Example Input
Act as a senior UI/UX designer and design systems architect. Create a complete design system specification for [Fluxo CRM], a [Cloud-native SaaS Platform] in the [Enterprise Resource Planning (ERP)] space. Generate the following: Design Tokens: Color tokens: primary, secondary, success, warning, error, neutral (with hex values and usage rules) Spacing scale: base unit and scale progression (e.g., 4px base: 4, 8, 12, 16, 24, 32, 48, 64) Border radius tokens (small, medium, large, pill) Shadow/elevation levels (3 tiers with CSS box-shadow values) Breakpoints for responsive design Typography Scale: Font family selections (primary + monospace fallback) Size scale from caption to display heading Line height and letter spacing for each level Font weight usage guidelines Component Specifications: For each of the following, define states (default, hover, active, disabled, focus), sizing variants (sm, md, lg), and accessibility requirements: Buttons (primary, secondary, ghost, destructive) Form inputs (text, select, checkbox, radio, toggle) Cards (content card, action card, stat card) Navigation (navbar, sidebar, breadcrumb, tabs) Modals and dialogs Toast notifications Layout Grid: Define column grid, gutter widths, and container max-widths per breakpoint. Accessibility Checklist: WCAG 2.1 AA requirements for each component. Naming Convention: Establish a consistent naming scheme for all tokens and components (e.g., BEM, atomic). Constraints: All components must meet WCAG 2.1 AA contrast ratios. Provide CSS custom properties (variables) for all tokens. Tone: Technical, precise, and implementation-ready.
Example Output
Fluxo CRM – Design System Specification 1. Design Tokens 1.1 Color Tokens Token Name Hex Value Usage --color-primary #0052CC Primary actions, links, highlights --color-primary-hover #0041A8 Hover state for primary actions --color-secondary #FF5630 Secondary accents, highlights --color-secondary-hover #E0471E Hover state for secondary actions --color-success #36B37E Success messages, confirmations --color-warning #FFAB00 Warnings, alerts --color-error #FF5630 Error states, destructive actions --color-neutral-100 #F4F5F7 Backgrounds, cards --color-neutral-200 #EBECF0 Borders, dividers --color-neutral-300 #DFE1E6 Secondary text, subtle borders --color-neutral-400 #C1C7D0 Placeholder text, icons --color-neutral-500 #A5ADBA Body text, medium emphasis --color-neutral-600 #6B778C High emphasis text --color-neutral-700 #172B4D Primary text, headers Accessibility Notes: All primary and secondary text meets WCAG 2.1 AA contrast against white and neutral backgrounds. Use hover states for interactive elements to maintain sufficient contrast. 1.2 Spacing Scale Base unit: 4px Scale progression: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128 Usage: Margins, paddings, gaps, grid spacing 1.3 Border Radius Tokens Token Value Usage --radius-sm 4px Buttons, input fields --radius-md 8px Cards, modals --radius-lg 16px Large containers, floating panels --radius-pill 9999px Pills, toggles, badges 1.4 Shadow / Elevation Tokens Elevation CSS Box-Shadow Usage --shadow-sm 0 1px 2px rgba(0,0,0,0.08) Inputs, cards, small popovers --shadow-md 0 4px 8px rgba(0,0,0,0.12) Modals, dropdowns, elevated cards --shadow-lg 0 8px 16px rgba(0,0,0,0.16) Dialogs, large overlays 1.5 Breakpoints Name Min Width Description xs 0px Mobile devices sm 576px Small tablets md 768px Tablets lg 1024px Laptops xl 1440px Desktop xxl 1920px Large displays 2. Typography Scale 2.1 Font Families Primary: Inter, sans-serif Monospace Fallback: "Fira Code", monospace 2.2 Size Scale Level Font Size Line Height Letter Spacing Weight Caption 12px 16px 0.4px 400 Body 16px 24px 0.5px 400 Body-M 18px 28px 0.5px 500 H6 20px 28px 0 500 H5 24px 32px 0 500 H4 28px 36px 0 600 H3 32px 40px -0.2px 600 H2 40px 48px -0.5px 700 H1 / Display 48px 56px -0.5px 700 3. Component Specifications 3.1 Buttons Variants: Primary, Secondary, Ghost, Destructive States: Default, Hover, Active, Disabled, Focus Sizing: Small, Medium, Large Accessibility: Minimum 4.5:1 contrast ratio for text; focus outlines 2px solid --color-primary. Example CSS Variables: --btn-padding-sm: 8px 16px; --btn-padding-md: 12px 24px; --btn-padding-lg: 16px 32px; --btn-border-radius: var(--radius-md); 3.2 Form Inputs Types: Text, Select, Checkbox, Radio, Toggle States: Default, Focus, Hover, Disabled, Error Accessibility: Labels linked via for attribute; focus ring visible; error messages in --color-error 3.3 Cards Types: Content, Action, Stat States: Default, Hover, Selected Elevation: sm or md shadow; border radius md 3.4 Navigation Types: Navbar, Sidebar, Breadcrumb, Tabs Accessibility: Keyboard navigation support, ARIA attributes, visible focus states 3.5 Modals & Dialogs Shadow: --shadow-lg Radius: --radius-lg Overlay: rgba(23, 43, 77, 0.5) Accessibility: Trap focus, close on ESC, ARIA roles 3.6 Toast Notifications Placement: Top-right or bottom-right Duration: 3–5 seconds Types: Success, Error, Info, Warning Accessibility: Announce via ARIA live region 4. Layout Grid Breakpoint Columns Gutter Width Container Max Width xs 4 16px 100% sm 8 16px 540px md 12 24px 720px lg 12 24px 960px xl 12 32px 1140px xxl 12 32px 1320px Usage: Apply consistent padding to maintain responsive rhythm. 5. Accessibility Checklist Color contrast ≥ 4.5:1 for text, ≥ 3:1 for UI components Focus indicators on all interactive elements Semantic HTML and ARIA roles for all navigation, forms, modals Keyboard navigable components Live regions for dynamic updates (toasts, notifications) 6. Naming Convention Design Tokens: --<category>-<sub-category> (e.g., --color-primary, --spacing-md) Components: BEM-style: <component>__<element>--<modifier> (e.g., btn__icon--hover, card__header--selected) CSS Variables: Use camel-case or kebab-case consistently (--btn-padding-md) This design system ensures Fluxo CRM’s interface is fully consistent, scalable, and accessible, while providing a developer-friendly structure with CSS custom properties for implementation in both web and SaaS apps.