overview

The nalet design system is a design system: a shared set of rules, building blocks and examples for our admin consoles, the screens people use to keep things running. It gives all of them the same identity, and the same calm, honest way of working.

if a screen would look at home in a tmux pane, it is on. if it looks like a saas landing page, start over.

In other words: a screen should feel like a well-kept terminal window, quiet and to the point, and not like a website that is trying to sell something.

the identity

The look is easy to recognise:

• A dark canvas, and only dark. Panels sit on a few slightly lighter steps of it, with four greys for text on top.
• The blue chevron. The › is the brand's mark, always in one blue: the same blue as links and the one emphasized action.
• Two typefaces. JetBrains Mono, a monospace face, names things: headings, labels, numbers, codes and the brand. Inter carries what people read.
• One scale for space. Every gap is a step of one scale: 4, 8, 12, 16, 24, 32, 48 or 64 pixels.
• Square frames. No rounded corners anywhere.
• Two voices. The monospace chrome, such as titles, buttons, navigation and statuses, is lowercase. The text people read is in sentence case, in their own language. Both are short, with no emoji and no exclamation marks.

There is no light theme yet; light and high-contrast themes are planned. Styles and content & voice have the details.

who it is for

• Admin consoles inside a portal shell. This is the main audience: tools for operators, such as lists of things that need doing, settings and status, that run as federated modules inside one shell. The components are plain React and CSS. They add nothing global beyond the tokens and the page's base styles, need nothing set up around them, and work with React 18 or 19. See apps in a shell.
• Apps that only need the identity. An app can take just the design tokens, the colours, fonts and spacing, and keep its own components. See tokens.
• The people who design and build them. Designers start at designing with it, developers at developing with it.

how this site is organised

The guidelines live here; the code lives on the React subsite. The six sections in the top bar are:

• Get started: this page, designing with it, developing with it, versioning & changelog, resources and the glossary.
• Foundations: the principles every screen follows, and the rules underneath every component: accessibility, content & voice, interaction and layout.
• Styles: the visual language. Colour, with the contrast of every pair worked out from the tokens, typography, iconography, shape, motion and the brand.
• Components: every component as design guidance, grouped by what it is for. Each page follows the same order: what it is for, with a live example; when to use it, and when to use something else; its parts; its kinds and states; how it behaves; accessibility; how to write its words; do and don't; related pages; and, at the end, its exact specs. A link at the top of each page leads to its React implementation. Start at the components index.
• Patterns: whole page layouts, and the problems that come up again and again across them: the worklist, navigation from the top bar to the home page, the status vocabulary, message handling, empty states, selection and bulk actions and forms and settings.
• Develop: the React implementation, the tokens, apps in a shell and contributing.

The React subsite holds every component's playground, its examples, its settings and the notes on how it is built. Each guidance page links to its React page, and each React page links back.

Words with a dotted underline are explained in the glossary. Hover over one, or tap it on a phone, to read the explanation right where you are.

what this site promises

This site describes what the code really does. Where a component falls short of the principles today, its page says so after “Today:”: a known limitation, not a feature. Anything still to come is marked as planned, and a page marked “draft — under review” is a proposal that may still change.

The source is public on GitHub, under the MIT licence.