Design system and theming tools
Sixty-plus components and one theme per brand. The foundation under our newer systems.
- Client
- In-house
- Status
- Active
- We built
- Component library, charts, and theme tooling
Overview
The systems we build now stand on the same component library: more than sixty parts, from buttons and date pickers to data tables and a command palette, built once and reused in Nexus, Formula, and the property platform.
The challenge
The systems we build should wear the customer's brand, and we didn't want to rebuild buttons and tables for every new one.
What we built
A component library where the whole look comes from a theme, with keyboard navigation and reduced motion built in, plus tools to create and switch themes.
How it's used today
Nexus, Formula, and the property platform all run on it, each with a theme of its own.
The look lives in a theme, not in the components. Colours, corners, shadows, fonts, and how fast things move all sit in one theme file, with a light and a dark mode. Switch the theme and the same system wears your brand, without a single component being rewritten. The theme file is plain CSS, so it can even be swapped while the app is running.
For the people who sit in the system all day, it shows up in other ways. Tables can be sorted, filtered, and searched, charts take their colours from the same theme as everything else, and a single value makes the whole interface denser, with tighter spacing and smaller text, when a dashboard needs to fit more on the screen.
Everything works without a mouse. Every component has keyboard navigation and a visible focus, the command palette runs on the arrow keys, Home, End, and Enter, and screen readers get the right roles and labels. Anyone who has asked their computer for reduced motion doesn't get the animations.
For you, it means a new system doesn't start from scratch. It looks like yours from the first screen, and it works the same way as everything else we build on the library.
How we built it
The components know nothing about colours or fonts. They read all of that from the theme, which is why the same button can look like Nexus in one system and like your brand in the next.
One theme drives the look
Colours, corners, shadows, fonts, and motion are tokens in one theme file, with light and dark modes. The components only ever point at the tokens, so a new brand is a new theme file and nothing else.
Themes switch at runtime
The theme file is plain CSS that can be loaded while the app is running, with nothing to rebuild.
Local themes
Part of a page can get its own colours, for example a module in a colour of its own.
Denser when it needs to be
One value scales spacing and text size across the whole interface, or just one part of it. Corners, shadows, and lines stay as they are.
Keyboard first
Keyboard navigation, visible focus, and the right ARIA roles in every component, built to WCAG 2.1 AA. Animations switch off for anyone who has asked for reduced motion.
Tables built for work
Sorting, filtering, search, and paging in the data table, and long lists that stay smooth.
Charts that follow the theme
Time series, stacked bars, heatmaps, treemaps, and sparklines take their colours from the same tokens as everything else.
The theme tool
It reads the theme files, generates typed colours for the code, and works out whether text on each colour should be black or white to meet the contrast requirements.
- SvelteKit
- TypeScript
- Tailwind CSS
Gallery
Key metrics
- Components in the library
- 60+
- From buttons and date pickers to data tables, a command palette, and a number pad for PIN codes.
- Theme file per look
- 1
- Colours, corners, shadows, fonts, and motion, in a light and a dark mode.
- Components rewritten for a new brand
- 0
- A new brand gets a new theme. The components stay exactly as they are.
Got a system everyone's waiting on?
Tell us what you want to build and we'll take it from there.
Next project
Manufacturing · Real-time systems
