The Scenario
Your design agency is handing over a new website design for a Durban tourism booking agency. The frontend developer has received the Figma mockups but has asked for a formal specification of the primary button to avoid guess-work about hover states and padding.
The Brief
Create a developer-ready handoff specification for a standard primary button. Use clear design tokens (spacing, typography, border-radius, background-color) and define every interaction state.
Deliverables
- A specifications table detailing padding, borders, typography size/weight, and corner radius using rem or pixel values
- Visual style descriptions for 5 states: Default, Hover, Active, Focus, and Disabled
- A set of HTML/CSS code snippets representing the specified button styles
Submission Guidance
Ensure CSS class naming is logical and properties match standard web values.
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.