Deft

The OpenPerf design system. Quiet, dense interfaces for error and performance monitoring.

Deft is the set of base components every OpenPerf screen is built from. Feature components live in the app and are composed from these, never styled from scratch.

Setup

import "@openperf/deft/styles.css";
import { Button } from "@openperf/deft";

const example = <Button.Root>Resolve</Button.Root>;

styles.css brings Tailwind, Manrope and the tokens. An app that already imports Tailwind should import @fontsource-variable/manrope separately, use @openperf/deft/theme.css instead of styles.css and add @source for packages/deft/src.

The theme follows data-theme on any ancestor, usually <html>: light, dark, or system to follow the OS. data-palette picks the palette (Foundations → Colors → Palettes). Strings go through Lingui, so render inside an I18nProvider.

Principles

1. Light first. Design the light theme, then derive the dark one.
2. Neutral greys, one accent. Greys have no hue. Colour is only the Cobalt accent and state.
3. Dark borrows the accent. Dark surfaces mix 5–12% of the accent into near-black; text stays neutral.
4. No borders. Areas are set apart by tone and spacing. The only outlines are the hairline on floating surfaces and the ring of an unchecked checkbox.
5. 14px is the working size. Hierarchy in lists, controls, nav and menus comes from weight and colour, not size.
6. Dense, not cramped. Controls use the xs–lg scale. Content never touches the edge of its area: rows are inset and rounded.
7. One typeface. Manrope everywhere, numbers and IDs included, with tabular figures in columns. Monospace is for code only.
8. Less on screen. No page titles on list pages, no status tabs: search and the list toolbar do that job.