FOUNDATIONS

A few choices.
Used consistently.

The shared language underneath the components. Change the tokens to make the library feel at home in another product.

01 / Colour

Quiet surfaces. A clear accent.

White panels sit on a light grey canvas, without an outer border. Near-black anchors the type and primary actions. Warm yellow adds emphasis, always paired with dark text. Neutral greys keep the surrounding surfaces quiet.

Canvas--bui-canvas

Panel--bui-bg

Primary--bui-primary

Yellow accent--bui-accent

Light grey--bui-surface

Soft yellow--bui-soft

SuccessNeeds attentionError

02 / Typography

Clear at every size.

The showcase uses Manrope for headings and DM Sans for reading. Components inherit the configured font, so applications can bring their own.

The details matter.

Labels that make sense. Space where it helps.

Small text is still something someone needs to read.

03 / Shape & space

Enough structure.

Controls use 4 px corners. Panels use 12 px. Shared page gutters and 24 px grid gaps keep the header, cards and footer aligned. Spacing follows a 4 px rhythm, with 8 px or 12 px between text and supporting icons.

4

8

12

16

24

32

48

04 / Motion

A response, not a distraction.

Feedback settles over 160 ms, colour over 280 ms, and larger movements over 440 ms. The same ease runs through tabs, switches and overlays. Reduced-motion preferences remove transitions and stop the loading spinner.

Try the motion studies

05 / Your theme

Start with the variables.

Apply data-ui-theme="dark" to the document root to switch themes. Root-level tokens also reach portaled menus, dialogs and notifications.

:root {
  --bui-primary: #171717;
  --bui-primary-ink: #ffffff;
  --bui-accent: #ffe24a;
  --bui-accent-ink: #171717;
  --bui-radius: 4px;
  --bui-panel-radius: 12px;
  --bui-font: "Your font", sans-serif;
}