Dark theme

Design system

As part of a team, I've created new design systems from templates. I've inherited, optimised and maintained design systems. But I've never created one from scratch. Until now.

My dream design system: dark mode by default but with a light option (accessible contrast of course), responsive, fun, but above all, easy to use and change for my inevitable bi-annual style refresh.

Foundation

For colour I wanted accessible contrast. For type I wanted a contrast of styles and weights.

Components

Each of the components needed a default (dark) and inverted (light) mode. Prototyping is baked in at the component level where useful, for instance, button hover and pressed styles. Sizes / breakpoints are included too: more on that below.

Layouts

I've started with one breakpoint for a large, portrait mode phone. I may need to add responsive navigation as the number of items scales.