the nalet design system
One look and one way of working for every nalet screen: a dark canvas, a blue chevron, square frames, and a monospace voice next to the reader's own. Here you find the principles, components and patterns for building calm, honest admin consoles, explained in plain words.
if a screen would look at home in a tmux pane, it is on. if it looks like a saas landing page, start over.
the guidelines
- get startedWhat the system is, who it is for, and how to start designing or building with it.
- foundationsThe principles every screen follows, and the rules underneath every component.
- stylesThe visual language: colour, type, icons, shape, motion and the brand marks.
- componentsEvery component: when to use it, its parts and states, how it behaves, and how to write its words.
- patternsProven ways to build whole pages, and to solve the problems that come up in every app.
- developThe React implementation, the tokens, apps inside a shell, and contributing.
build with it
- reactThe components in code, each with a live playground, examples and every setting: the implementation of these guidelines.
- tokensThe colours, type and spacing, ready for CSS, JavaScript and Tailwind, all from one file.
- v0.4.0The latest release, and what changed in it.
- sourceThe code on GitHub, free to use under the MIT licence.