The Scenario
A startup is building its first design system. The lead designer asks you to define the button component — the most-used element in the system. It needs to be comprehensive enough that any designer or developer can use it consistently.
The Brief
Define a complete button component specification. Cover all visual states, sizes, variants, and usage guidelines.
Deliverables
- A state matrix: Default, Hover, Active/Pressed, Focused, Disabled, Loading — for each of 3 variants (Primary, Secondary, Ghost)
- Size specifications: Small, Medium, Large — with padding, font size, and min-width for each
- Usage guidelines: when to use each variant, icon placement rules, and maximum label length
Submission Guidance
A button spec without a disabled state or a loading state is incomplete. Developers will ask "what does the button look like while the form is submitting?" Be ready.
Submit Your Work
Your submission is graded against the rubric on the right. If you pass, you get a public Badge URL you can share on LinkedIn. There is no draft save, so work offline first and paste your finished response here.