UI UX Designer project
Build a design system foundation with tokens and one full component
Color, type, and spacing tokens plus one fully-specced button — the deliverable an engineer could actually build from without guessing.
The brief
Build a small design system foundation in Figma: color tokens split into primitives and semantic roles (e.g. gray-500 mapped to a text-secondary token), a systematic type scale, a systematic spacing scale, and one component (a button) fully specced across every state — default, hover, disabled, and loading — built entirely from your tokens. Include a one-page usage doc.
Suggested stack
What you hand in
- A Figma link, set to viewable without requiring a Figma account
- Token pages for color, type, and spacing, and a component page for the button showing all states
- A one-page usage doc explaining how another designer would apply the tokens
Grading happens against the rubric below, so read it before you start — not after.
How this is graded
Published in advance and weighted out of 100. Nothing here is a surprise.
Primitive and semantic layers are genuinely separate (a semantic token like text-secondary references a primitive, rather than the semantic layer just being a renamed color list).
The type and spacing scales follow a real, consistent ratio or step system, not a handful of sizes picked because they looked nice.
The button covers every required state and every value (color, spacing, type) traces back to a token, with no hardcoded one-off values.
Another designer could read the doc and correctly apply the token system to a new component without asking follow-up questions.
No console errors or crashes, no broken layout, no leftover placeholder text or commented-out code.
Why this project is worth your weekend
- Tokens are how design and engineering actually stay in sync past a handful of people, and most junior portfolios show pretty screens with no system underneath.
- A component specced across every state is what an engineer actually needs to build it without guessing at the missing ones.
- This is the project that proves a candidate can think in systems, not just individual screens.
Where people lose points
- Naming colors by their literal value instead of role, so a color used in fifty places has to be hunted down and changed individually if it's ever updated.
- A "type scale" that's really just a handful of font sizes chosen to look nice with no consistent ratio behind them.
- A button component missing the disabled or loading state that engineering will need to build on day one.
Other UI UX Designer projects
Two or three of these turn an empty resume into a portfolio.
Built it? Get it scored against this rubric.
Submit your work and get a score on every criterion above, written feedback, and three resume bullets you can use straight away.