Component library

One library, two products

This site and brain’s dashboard are built from the same package, @brain/ui: the tokens, the monogram and a handful of components. What you see below is the real code, rendered live. Use the switch in the header to see it in the dark theme.

Package: packages/ui, in the brain monorepo
Built on: Tailwind CSS v4 and shadcn/ui’s token names
Type: Alegreya Sans, one family

Colour

--background
The ground of every page
--card
Raised surfaces
--foreground
Body text
--muted-foreground
Secondary text, still 4.5:1
--primary
Actions and links: moss
--border
Hairlines and outlines
--gold
The one point that says you are here
--water
Lagoon blue, the second accent

Pillar colours

One per part of brain. They mark a stroke, a tint or a dot, never body text.

Health --health
Coaching --coaching
Finance --finance
System --system

Type

Display
Small facts, every day
Section
How I build
Title
Files are the database
Body
Plain words, first person, numbers only when measured.
Small
Last run 11 Nov, 06:30, 48 s

Monogram and map

An N that ends in a gold dot: a path, and where it arrives. <Monogram />

Contour lines of the páramo, the brand’s background texture. <ContourMap />

Components

Button

The one button: 44 px tall for a thumb, a visible focus ring. A second variant gets added when a second kind of action exists.

<Button>Save weigh-in</Button>

Badge

Status in a word. Colour repeats what the word says, never replaces it.

DefaultSecondaryOKFailedOutline

<Badge variant="success">OK</Badge>

Card

A raised surface with a title and a short description.

Used for one thing a person reads or acts on, not to box every block of a page.

Table

Routine	Status	Time
Daily	OK	48 s
Weekly	OK	2 min

The rows above are sample data, like everything else this site shows of brain.

Rules the library keeps

Every text colour passes 4.5:1 on its ground, in both themes; a test checks it.
Touch targets are at least 44 px.
Gold appears once per view, on the thing that says where you are.
Motion stays on this site. The dashboard keeps still, and both respect reduced motion.