You don’t have enough points to run this tool（9 pts）。 Buy points →
📐 Design Handoff Spec
Describe a screen or component and get a developer-ready handoff spec — layout & spacing, type, color, every state, interactions, responsive, a11y and dev notes.
- Every state covered. Default, hover, focus, active, disabled, loading, error and empty — so engineers never have to ask "what about…?"
- Concrete defaults. 8pt spacing scale, WCAG-AA contrast, exact px and tokens — and anything assumed is clearly marked "(suggested)".
- Respects your system. Give it your brand color, grid or font and it builds on them instead of inventing conflicting values.
See the quality — a real example
Sample only · no credits usedInput — screen / component
"Login card, 360px wide, 16px padding. Email + password fields, a primary 'Sign in' button, and a 'Forgot password?' link."
Context: 8pt grid, brand primary #5E6AD2, Inter font.
Output — handoff spec
Layout & spacing
- Card max-width 360px, padding 16px, radius 12px
- Vertical rhythm: 24px title → fields, 8px label → input, 16px between fields
Typography
- Title Inter 600 / 20px / 28px · Label 500 / 13px · Input 400 / 14px
Button states & tokens
--btn-bg: #5E6AD2; /* default */ --btn-bg-hover: #4F5ABF; /* -8% L */ --btn-bg-active: #454FAD; --btn-fg: #FFFFFF; /* AA 8.6:1 */ --btn-disabled: #5E6AD2 @ 40% opacity; height: 40px; radius: 8px; focus: 2px ring #5E6AD2 @ 60%
Accessibility
- Inputs need <label for>; error text wired via aria-describedby
- Visible focus ring on all controls; tab order top→bottom
Sign in to use this tool
Sign in to use (30 free points on signup). Signed-in users run every tool on their account points — nothing to paste.
Sign in →