Organisation
CERN
Button
Use buttons for primary actions. Prefer one primary button per view. Map to MUI Button, variant="contained" for primary, variant="outlined" for secondary.
CERN · UI Design System
CERN UI Design System
A shared design foundation for CERN's internal applications, 30+ components, design tokens, Material UI mapping and a living documentation hub.
01 / Overview
Not a visual refresh. A shared product foundation.
CERN operates hundreds of internal web applications, administration, operations, research support, engineering workflows, organizational services. Each built by a different team. Each solving the same UI problems independently.
CERN UI created a shared design language for these products: a foundation of design tokens, 30+ reusable components, documented patterns, and implementation guidance mapped to Material UI. Together with multiple CERN teams, I identified recurring interface problems, translated them into reusable patterns, and helped integrate the system into CERN's technical stack.
The result is a living documentation hub, a single shared reference for building accessible, consistent, production-ready interfaces across CERN.
CERN UI · Application interface
02 / Challenge
Many teams. Many applications. No shared interface standard.
CERN's internal tools are built by different teams for different contexts. Over time, this created a fragmented product landscape. The same UI problems were solved repeatedly, but with different visual styles, behaviours, accessibility quality and implementation decisions.
Inconsistency
Similar components behaved differently across applications. Users had to relearn patterns for every tool.
Duplication
Teams rebuilt common UI patterns from scratch. Buttons, forms, filters, navigation, recreated repeatedly.
Accessibility gaps
Accessibility was inconsistent and often handled late. No shared standard meant uneven quality across products.
No shared reference
Designers and developers lacked a common point of truth. Every decision was made again from first principles.
Slow delivery
Without reusable patterns, teams spent time on decisions that had already been made, elsewhere, independently.
Design–code gap
Design decisions rarely carried cleanly from Figma to production. Interpretation diverged at every handoff.
03 / My role
Lead designer, full design system lifecycle.
Audit, foundations, component design, documentation, Material UI mapping, stakeholder alignment and rollout.
Leading the design direction of CERN UI end to end
Auditing existing applications and recurring UI patterns
Defining foundations: colour, type, spacing, radius, elevation
Mapping design decisions to Material UI for implementation
Designing and documenting 30+ reusable components in Figma
Collaborating with CERN teams to validate against real use cases
Publishing the CERN Design System Hub
Supporting rollout and establishing a contribution model
04 / Approach
A repeatable process, from audit to living system.
01
Audit existing interfaces
Reviewed CERN applications to identify recurring components, patterns, inconsistencies and friction points, showing where shared patterns would create immediate value.
02
Define foundations
Created the core token layer: colour, typography, spacing, radius, elevation and interaction states. Practical rules that scale across products, not abstract style choices.
03
Map design to Material UI
Because MUI was part of CERN's stack, I mapped foundations and components directly to it. Design decisions carry from Figma into production code, without manual reinterpretation.
04
Build the component library
Designed and documented 30+ reusable components based on real CERN use cases, with usage guidance, behaviour, examples and implementation notes for each.
05
Publish the documentation hub
Published the CERN Design System Hub: a living, browsable reference for designers and developers. One place for foundations, components, patterns and guidelines.
06
Support governance and adoption
Defined a contribution model so teams can propose, improve and extend patterns from real product needs, keeping the system connected to actual use cases instead of becoming static.
05 / Foundations
A shared token layer between design and code.
The token system defines visual and interaction primitives used across the entire system, and connects Figma directly to Material UI production code.
Colour
Semantic colour tokens for primary, secondary, surface, feedback and accessibility-compliant text roles.
Typography
A type scale with defined roles, display, heading, body, label, caption, mapped to MUI's typography system.
Spacing
A consistent spacing scale as tokens, applied to padding, margin, gap and layout units across all components.
Radius
Border-radius tokens for buttons, cards, inputs and dialogs, consistent rounded-corner behaviour across the system.
Elevation
Shadow tokens for layering surfaces, menus, dialogs, cards, in a clear visual hierarchy.
Interaction states
Hover, focus, active, disabled and error states defined as tokens and documented for every component.
Figma Variables — 134 palette tokens, 252 material/color values, light and dark mode. Primary states (hover 4%, selected 20%, focusVisible 30%) map directly to Material UI theme overrides.
06 / Component library
30+ components. Each documented. Each mapped to MUI.
Shaped by recurring CERN use cases, not generic UI elements, but reusable answers to problems that appeared across real products.
Alert
Button
Checkbox
Navigation Drawer
Filter
App Bar
Backdrop
CERN Login
Chips
Divider
Dropdown
Floating Action Button
Feedback
Footer
Loading
Tooltip
+ 14 more
Button — Primary / Secondary, Contained / Outlined / Text, all 5 interaction states. Each variant maps to MUI Button with a corresponding theme override.
Slider — Primary / Secondary, Medium / Small, Continuous / Discrete / Range. Interaction states, thumb sizing and track behaviour all tokenised.
07 / Documentation hub
The system as a product, browsable, living, shared.
The CERN Design System Hub is the main deliverable: a published reference that turns the design system into something teams can actually use.
08 / Outcome
A unified foundation across CERN's internal products.
30+
reusable components documented
6
foundation token categories
1
shared design system hub
∞
teams able to contribute
Unified design system for CERN internal applications
30+ reusable, documented UI components
Shared foundation layer for design and code
Full Material UI mapping for implementation
CERN Design System Hub, published and living
Patterns shaped by real use cases across teams
09 / Reflection
A design system is an organizational tool, not a component library.
The hardest part of CERN UI was not designing a button. It was creating enough clarity, trust and practical value that many teams chose the same button, without being forced to.
This project strengthened my ability to lead design at scale: working across teams, translating use cases into reusable patterns, connecting design to code, and creating documentation that helps a system survive beyond its initial launch.
CERN UI moved teams from isolated interface decisions toward a shared product foundation. That shift, from fragmentation to coherence, is what a design system is really for.
Need a design system that teams actually use?
Let's turn your product challenge into something testable.