At No Country, a team of 6 across 3 countries, 5 weeks, we designed a multibrand Design System that lets multiple EdTech products share a common base without losing identity: 70% mandatory core, 30% customizable.
The challenge
Defining what belonged in the 70% core (immutable) vs the 30% customizable. Each brand wanted creative freedom, but too much customization breaks the educational consistency the system had to guarantee.
How I solved it
- 01
Research before tokens
Before defining the system, we analyzed 4 real EdTech platforms (Coursera, edX, Udemy, Platzi) to identify common patterns. The personas weren't students, they were the designers and devs who would use the system.
- 02
Core as a brand invariant, not a visual style
The 70% core covers grid, spacing, radii, shadows, component behavior, AA accessibility, and UX patterns (onboarding, errors, progress). What's customizable: only primary/secondary/accent color, typography (3 pre-approved options), and iconography.
- 03
UX Writing as a system, not decoration
Voice and tone codified with full guidelines: clear, human, motivating without being over the top. Standardized microcopy ('Loading…', 'Saved'), empathetic error messages, and a brand adaptation system that adjusts tone without changing the fundamental voice.
What was delivered
- Tokens (color, typography, spacing, radii, shadows, motion) in Figma Variables with light/dark
- UI library: buttons, inputs, cards, navigation, modals, alerts, tables, progress bars
- Governance system + Notion documentation for non-technical teams
Closing
Designing a Design System is 30% visual design and 70% governance and documentation. Beautiful components are useless if nobody knows when to use them. Multicultural collaboration taught me to justify every decision: you can't just say 'I like it better this way'. If I were to redo it: fewer components, better documented.