---
title: Deft
description: The OpenPerf design system. Quiet, dense interfaces for error and performance monitoring.
sidebar:
  label: Introduction
---

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

```tsx
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.