Background
Design systems let teams ship faster without visual drift. Even a "mini" kit shows you understand tokens, component states, and documentation — core skills for product design and design-engineering hybrids.
Your mission
Create a compact design system in Figma covering foundational tokens and four core components: Button, Text Input, Card, and Alert (toast or inline).
Requirements
Foundations
- Color roles — primary, surface, border, text primary/secondary, success, warning, error (hex + usage note).
- Type scale — at least 4 levels (e.g. display, heading, body, caption) with font family, size, weight, line-height.
- Spacing scale — 4px or 8px base; show on a spacing sheet.
Components (each as Figma component with variants)
| Component | Variants / states |
|---|
| Button | primary, secondary, ghost; default, hover, focus, disabled, loading |
| Text Input | default, focus, error, disabled; with label + helper text |
| Card | default, elevated; with header/body/footer slots |
| Alert | info, success, warning, error; with icon + dismiss |
- Cover artboard showing all components in realistic combinations (login form, settings row, notification stack).
- Component spec notes — when to use each variant, do/don't examples (1–2 pages).
Evaluation criteria
- Token discipline — components use variables/styles, not one-off hex values.
- State completeness — focus rings visible; disabled not just lower opacity without cursor cue.
- Scalability — another designer could extend with Table or Modal using your tokens.
- Documentation — spec notes answer "which button for destructive action?"
Tips
- Align with BoardingPass palette (ink navy
#0f172a, royal blue #1d6fe8) for bonus cohesion.
- Name layers and variants consistently (
Button/Primary/Default).
- Include auto-layout on components for responsive padding.
Submission checklist
