Krayon design system
I built Krayon, Teachmint's design system, from scratch in my first design job, so every product line could ship from one set of components.
- Role
- Associate Product Designer
- Timeline
- 4 months
- Platform
- Web and mobile
Tools
- Figma
Why Teachmint needed a system
Teachmint runs live classes, school management and learning content for students, teachers, school admins and parents, on the web and on phones. By 2022 the product had grown faster than its UI.
- Same screens, different styles
- Components rebuilt, not reused
- Hover, error and loading states missing in handoff
- Felt like many apps, not one
I was an Associate Product Designer at Teachmint from June to September 2022, my first design job. In that time I led the work on Krayon, from the first audit to rolling it out across the company, in about four months. My manager Malik mentored me throughout.
Where the name came from
Krayon comes from the crayon box, something every classroom has. That set the tone for the system: a pastel palette and soft UI that could colour every product line the same way.
We started with a moodboard of classroom things, like chalkboards, notebooks, crayons and graded papers, to agree on the feel before drawing a single component.
What shaped it
One brand, many people
Students, teachers, admins and parents need different density and emphasis. The palette and foundations stay the same for all of them.
Type that works on a phone
The type scale had to hold up for long reading and for dense admin data on small screens.
A contract with engineering
A Figma kit alone wouldn't stop the drift, so tokens, component APIs and states were agreed with engineering up front.
Room to grow
New product lines had to fit into the system without forking the brand again.
How I built it
I audited live screens across teams, merged duplicate patterns into one set, and tagged each component with where it belongs, such as admin tables or student cards. Then I worked with engineering on token names, component APIs and states, so hover, error and loading were specified before QA.
- Colour, type, spacing
- Components
- Usage and states
What we shipped
Foundations
Colour, type, elevation and spacing tokens.
Components
Inputs, cards, tables, navigation and feedback patterns, built for reuse.
Documentation
Usage notes and state diagrams, so engineers didn't have to guess behaviour.
Contribution rules
New work extended the system instead of splitting the brand.
We launched Krayon inside Teachmint with a walkthrough for design, product and engineering on how to migrate, contribute and ask for new patterns.
What changed
Krayon became the starting point for new Teachmint work. Teams reused components instead of drawing one-off screens, design cycles got shorter, and design, product and engineering agreed on what finished UI looks like. Student screens got calmer and more approachable, and admin and student flows finally looked like one product.