Brand

How Blackprint looks

Every color, font and shape Blackprint is built from. The values come straight from one file — change a token there and the whole app follows.

app/globals.css

01 — Type

A serif to lead, a sans to work

Three faces, each with one job. The names below are the fonts the app is using right now.

Operations intelligence

The blueprint for your modern operation

Every system, every tool, every team. In one view.

Body copy sits in the sans. It stays quiet next to the serif headline. Buttons, tables and navigation use this face too.

Primary actionSecondary01 — Discovery

Display

—

Headlines, wordmark, big numbers

font-serif

UI / body

—

Running text, buttons, tables, nav

font-sans

Mono

—

Eyebrows, labels · uppercase, wide tracking

font-mono

02 — Color

White, ink, one clay

No grey surfaces: the canvas is white with a breath of clay, recessed fills and borders are clay tints. Grey is only for secondary text.

ivory

—

Page background

--bm-ivory

ivory-deep

—

Recessed fill

--bm-ivory-deep

paper

—

Cards / raised

--bm-paper

ink

—

Primary text

--bm-ink

ink-soft

—

Body text

--bm-ink-soft

muted

—

Captions

--bm-muted

muted-soft

—

Meta / faint

--bm-muted-soft

hairline

—

Borders

--bm-hairline

clay

—

Accent

--bm-clay

clay-deep

—

Accent emphasis

--bm-clay-deep

clay-soft

—

Accent tint

--bm-clay-soft

03 — Shape

Hairlines do the work of shadows

Buttons rounded-md, cards rounded-2xl, large panels rounded-3xl, nav pills rounded-full. Elevation is a 1px warm border; hover may add shadow-sm.

md — buttons

xl — icon chips

2xl — cards

3xl — panels

04 — Components

Recipes, not a kit

The building blocks used across the app. They are made from the tokens above, so a token change shows up here too. Icons are lucide, sitting in a clay-soft chip.

Buttons

Choices

Never a native select. Two to four fixed options get a segmented control; longer or searchable lists get a popover picker with search, grouped rows and keyboard support.

<select> App (interface) ▾

Status

Five tones: green only for live, brand orange for everything else. No black status, no amber or red, and teams get no colour of their own; they're told apart by name.

Live

AutomatedConnected

live

Ready

AI readyAI ready

done

In progress

Partly ready—

progress

Needs you

Not readyConnection failing

attention

Not started

No blueprintsNot AI ready

open

Nav pills

TeamsOverview

Stat tiles

Company map

8teams

departments mapped

Blueprints

24flows

review-ready

Live

3tools

running with Blackprint

Relevant

151leads

this week’s scan

Icon chip + badge

VerifiedData

Paper panel

Commercial operations

12 blueprints

Open

Finance

8 blueprints

Open

People

5 blueprints

Open

Form

Company