Kolibri Design System & Brand
Building and scaling the Kolibri design system — a cross-platform component library used by a distributed open-source team across multiple applications.
Overview
When I joined Learning Equality, Kolibri had inconsistent design patterns across features, no centralized component library, and brand guidelines that lived in various scattered documents. I built a comprehensive design system that brought coherence to a product serving 220+ countries.
Foundation Layer
Typography, color, spacing, elevation, motion — all defined as tokens.
Pattern Library
Reusable interaction patterns and layouts across the full product.
Component Library
Buttons, inputs, cards, navigation, data viz — all documented with usage guidelines.
Documentation
Usage guidelines, accessibility specs, code snippets for each component.
The Logo System Problem
One of the most interesting challenges: redesigning the horizontal lockup to solve excessive vertical height when the LE logo appeared alongside partner logos.
Learning Equality frequently appears alongside partner organisations (UNESCO, UNICEF, etc.) in multi-party communications. The original horizontal lockup had the icon and wordmark at similar heights, causing the entire logo to take up excessive vertical space.
The Solution: Golden Ratio
Applied the golden ratio (1.618:1) to the relationship between icon height and wordmark height. This created a more compact lockup that maintained visual balance while reducing vertical footprint by ~30%.
Brand Guidelines
Logo Usage
Clear space requirements, minimum sizes, don't examples, color variations for different backgrounds.
Voice & Tone
Educational, accessible, empowering. Writing guidelines for product copy, marketing materials, and community communications.
Content Style Guide
Grammar, terminology, localization considerations for content reaching 220+ countries.
Accessibility Standards
WCAG 2.1 AA compliance, color contrast ratios, keyboard navigation patterns, screen reader optimization.
Website Design System
Extended the design system to Learning Equality's website and marketing materials, ensuring brand consistency across all touchpoints.
- Responsive component library for marketing pages
- Template system for blog posts, case studies, documentation
- Icon system for feature illustrations and navigation
- Accessibility-first: all components tested for WCAG 2.1 AA compliance
Community Assets
As an open-source project, Kolibri has contributors from around the world. I created contribution guidelines and design resources to support the community.
Impact
Lessons Learned
A design system is never "finished." It's a living document that evolves with the product and the team. The most successful systems aren't the most comprehensive — they're the ones teams actually use. That means clear documentation, accessible tooling, and constant iteration based on feedback.
Outcome
Built a cross-platform component library and brand system for a product reaching 13M+ learners across 220+ countries and territories.
