Home

Colours

The palette: one near-black ink in five softer steps for text, warm off-white grounds, fills of the ink at a few percent, and four state colours.

ui.coloursconsistency/tokens.css

Use case

For the AI

Read this before colouring anything a layout draws itself. Text takes the ink steps by importance (a client's name in the ink, body text in ink 2, a column's label in ink 4), grounds take the page white or the warm surfaces (a side column, a well), and a quiet fill or hairline is the ink at a few percent rather than a grey of its own. Success, warning, destructive and info are kept for states such as paid, due soon, overdue and a note to read. What is on (a tick, a filled radio, a switch turned on, how far a progress bar has come) is the blue `selected`, never the ink, which stays the one button that matters.

Use it when

  • Colouring text by importance: the ink, then ink 2 to ink 5
  • Choosing the ground of a page, a well or a side column
  • A quiet fill or hairline that has to read on white
  • Showing a state such as paid, late or failed

Use something else when

  • A status word on a row (Paid, Overdue): Badge
  • A tinted message about the page or a form: Alert
  • The corner and shadow of a block: Corners and shadows

Examples

Ink--inkTitles, values, the primary button
Ink 2--ink-2Body text
Ink 3--ink-3Secondary text
Ink 4--ink-4Labels, hints
Ink 5--ink-5Placeholders, captions
Background--backgroundThe page
Surface--surfaceWells, stages, side columns
Surface 2--surface-2A well inside a surface
Surface 3--surface-3Pressed, selected ground
Fill--secondaryInk at 6%: quiet buttons, fields
Success--success
Warning--warning
Destructive--destructive
Info--info
Selected--selected

Code

Import

/* the tokens load once, in app/globals.css */
@import "../consistency/tokens.css";

Usage

<section className="grid gap-1 rounded-[20px] bg-background p-5 shadow-(--shadow-rest)">
  <p className="text-[12px] text-ink-4">Balance due</p>
  <p className="text-[22px] font-medium tabular-nums text-foreground">$1,204.60</p>
  <p className="text-[15px] text-ink-2">Invoice 2041 for Atelier Nord.</p>
  <p className="text-[12px] text-destructive-foreground">Overdue by 4 days</p>
</section>

<aside className="bg-surface p-4">
  <div className="rounded-[14px] bg-secondary p-3 text-[13px] text-ink-3">
    Three orders are waiting for pickup.
  </div>
  <div className="my-3 h-px bg-border" />
  <p className="text-[12px] text-success-foreground">All invoices sent</p>
</aside>

Rules

  • Colours come from the tokens only (consistency/tokens.css), never a hex in a piece or a layout, so a client's brand is that one file.
  • The ink itself is text-foreground or bg-primary; its steps are text-ink-2 to text-ink-5 (there is no text-ink utility).
  • A fill or an edge is the ink at a few percent (bg-secondary, border-border, bg-[rgb(var(--ink-rgb)/0.09)]), never a grey of its own.
  • On a white ground, text in a state colour uses its -foreground token (text-destructive-foreground); the plain token is for a fill (bg-destructive).
  • The chrome-* tokens belong to the showcase's frame and are never used in a client's tool.