01 / Thesis

Paper and
one signal.

A white page, black ink, and exactly one blue — spent only where the reader is allowed to act.

At a glance

Ground: Paper #FFFFFF
Ink: Black #000000 · 21.0:1
Signal: #005BD2 · oklch(50% 0.2 258)
Display: URW Gothic Demi, 20 px and up
Body: Inter
Data: JetBrains Mono, tabular
Depth: 1 px rules. No shadow, no gradient.

Option 1 proves the identity can live in pure monochrome. This option asks the next question: does a single signal colour help the mark, or dilute it? The answer here is that it helps, because it is never decoration. Blue never fills a card, never tints a header, never sits behind a headline. It appears on links, on the primary button, on the focus ring, and under one word. That scarcity is the point: an ops manager scanning a page for “what do I press” finds it in one glance, and the wordmark stays the only black-and-white thing on screen.

For a company selling an approval gate to finance, restraint is the argument. Colour that means something everywhere means nothing anywhere. Here it means two things and two only: you can act on this, or this is a fact about a record.

The one rule

Colour is permission to act. Everything else is ink on paper.

The signal blue is allowed on links, the primary button, the focus ring, and the underline under “defend”. Nowhere else. Status colour (exception / warning / ok) is allowed only inside product surfaces, where it is a fact about a record, never a brand accent.

02 / Logo

Outlined URW Gothic Demi, black on paper.

Wordmark on this option’s ground

#000000 on #FFFFFF · 21.0:1

The mark and its minimum sizes

Below 96 px use the mark, not the wordmark

Mark. The rivet-d alone — the same outline as the d in the wordmark, crown included. Favicon, app tile, avatar, loader.

Minimum — wordmark 96 px

Minimum — mark 16 px

Minimum sizes. Below a 96 px wordmark the rivet crown closes up. The crown survives on the mark alone down to 16 px.

Clear space

= the height of the d’s bowl

bowl
13.1 % of
wordmark width

Clear space. The minimum margin on all four sides is the height of the d’s bowl — 78.1 % of the d, or 13.1 % of the wordmark’s width. At a 400 px wordmark that is 52 px; at the 96 px minimum it is 13 px. The dashed line is the clear-space boundary; the solid line is the wordmark’s own box.

App icon and don’ts

Rendered, not described

App icon, 512 px source. The only place the mark is reversed out of black in brand chrome.

Don’t — colour the mark

Don’t — weak ground

Don’t — distort

03 / Typography

One display face, one text face, one data face.

Faces and roles

Source in the right column

Deskrivet

Display — URW Gothic Demi 600

Headlines, stat numbers, section headings, buttons’ ancestors. Never below 20 px, never for running text. Tracking tightens as size grows.

/brand/fonts.css · self-hosted woff2

Deskrivet

Body — Inter 400 / 500 / 600

All running text, labels, form fields, table cells, captions and eyebrows. 400 for prose, 500 for cells that carry a name, 600 for anything clickable.

Google Fonts · Inter

8h 19m

Data — JetBrains Mono 400 / 500

Times, durations, distances, revision hashes, Acumatica IDs, tokens and code. Anything a reader may need to compare character by character.

Google Fonts · JetBrains Mono

Type scale

size / line-height / tracking

Token	Spec	Role	Live sample
display-xl	76 / 72 / −.035	Hero H1	Time your payroll can defend.
display	52 / 52 / −.030	Page opener	Paper and one signal.
h2	34 / 36 / −.022	Section head	Exception-first approval.
h3	22 / 28 / −.012	Sub-head	The gate before export.
lead	20 / 32 / −.011	Hero lead	Field Time captures punches offline and surfaces the exceptions.
body	16 / 26 / 0	Prose	An unapproved session cannot become a Time Activity, technically.
small	14 / 22 / 0	UI, meta	Built for Acumatica 2026 R1. No middleware, no mapping screens.
caption	11 / 12 / +.14	Eyebrow, label	03 / Typography · Exception
mono-data	13 / 20 / 0	Data cell	8h 19m · Stop 15:32 · 412 m · 381e…c4e2 · EP00012

At ≤1024 px display-xl drops to 60/58 and display to 42/44. At ≤720 px they drop to 40/42 and 30/34. Nothing else in the scale changes.

Numerals

Tabular everywhere. Mono for anything a payroll clerk would read aloud.

Right — tabular, columns align

Tama Wiremu	7h 58m
Ria Kōhere	8h 04m
Ana Ropata	8h 19m
Hemi Walker	7h 46m

Wrong — proportional body figures

Tama Wiremu	7h 58m
Ria Kōhere	8h 04m
Ana Ropata	8h 19m
Hemi Walker	7h 46m

Rule: every figure in a column, a stat, or a total is tabular. Times, durations, distances, revision hashes and Acumatica IDs are JetBrains Mono. A figure inside a sentence stays in Inter.

04 / Colour

Two neutrals, one signal, three facts.

Grounds and ink ramp

Contrast measured against the ground it sits on

ground / paper

#FFFFFF

oklch(100% 0 0)

the only page ground

ground / sunk

#F7F7F7

oklch(97.5% 0 0)

wells, table heads, code

ground / invert

#000000

oklch(0% 0 0)

app tile, loader only

line / hairline

#DCDCDC

oklch(90% 0 0)

rows, wells, plates

ink

#000000 · oklch(0% 0 0)

21.0:1 on paper — AAA

body, display, rule

ink-2

#4D4D4D · oklch(42% 0 0)

8.45:1 on paper — AAA

lead, secondary prose

ink-3

#6F6F6F · oklch(54% 0 0)

5.02:1 on paper — AA

captions, meta, ticks

line / rule

#000000 · oklch(0% 0 0)

structural: section tops, table heads

0.5 px at ≥2dppx

The signal

Interactive only. Never a surface, never decoration.

signal

#005BD2

oklch(50% 0.2 258)

6.13:1 on paper

6.13:1 white on it

signal-press

#0043B1

oklch(42% 0.19 258)

8.61:1 white on it

hover, pressed

signal-tint

#E8F3FF

oklch(96% 0.025 258)

5.46:1 signal on it

focus halo only

When colour is allowed

Signal blue — four places. Text links. The primary button. The focus ring. The underline under “defend”. That is the closed list.
Status colour — inside product surfaces. A chip, a row marker, a badge. It states a fact about a record, not a brand mood.
Everywhere else — none. No tinted sections, no coloured headings, no coloured icons, no coloured rules. If it is not clickable and not a record, it is black, grey, or paper.

Status — product surfaces only

Ink on its own tint, measured

Outside geofence 5.78:1

Late submission 5.69:1

Approved 5.54:1

exception #B71824 / oklch(50% 0.19 25) · warning #8A5200 / oklch(49% 0.13 75) · ok #197037 / oklch(48% 0.12 150). Each also carries a shape — the chip dot, the left rule on an exception row — so the state survives a monochrome print-out and colour-blind readers.

05 / Spacing and layout

A 4 px unit and a 12-column field.

Spacing scale

base unit 4 px

--s-1 4

--s-2 8

--s-3 12

--s-4 16

--s-6 24

--s-8 32

--s-12 48

--s-16 64

--s-24 96

--s-32 128

Radii, rules, elevation

Depth is a rule, not a shadow

--r-0 0

--r-1 2

--r-2 4

--r-pill

--line

--rule

Elevation — none

A plate is paper with a 1 px hairline. This is the only card treatment.

Depth — ground change

A well is --sunk with the same hairline. No shadow exists in this system.

Container and grid

1200 px · 12 × 24 px gutter · 32 px page pad

Content maxes at 1200 px with 32 px page padding (24 at ≤1024, 20 at ≤720). Prose sets to a 68 ch measure. The grid collapses 12 → 6 → 1.

06 / Components

Every state rendered, side by side.

Buttons — kinds × states

Hover and focus shown as live states and as forced classes

RestHoverFocusDisabled Primary Rest Hover Focus Disabled Secondary Rest Hover Focus Disabled Ghost Rest Hover Focus Disabled

Sizes Only the primary button is blue. Secondary is a black outline; ghost has no chrome until hover.

Text link, inputs, select

Hover and focus states rendered in place

Sessions are held in the console until a supervisor clears them. Read the approval gate spec before you configure export.

Hover state: Read the approval gate spec

Focus state: Read the approval gate spec

Supervisor email Focused Disabled

Pay period

Placeholder

Chips

Exception Warning Approved Pending

Nav bar

The one place brand chrome and the signal meet

Product plate

The console’s session detail. Status colour lives here and only here.

Ana Ropata — Tue 8 Sep 2026 Outside geofence Session 4471 · 8h 19m

Duration: 8h 19m
Exception: Stop 15:32 · 412 m outside the fence
Crew note: “Walked to the van for fittings.”
Approved: 15:51 · M. Ropata
Revision: 381e…c4e2

Approved Released to Acumatica 16:00

Draft Time Activity EP00012

The gate is the product. An unapproved session cannot become a Time Activity, technically — not by policy, not by convention.

Crew table

Tabular numerals. Ana’s row carries the exception rule.

Crew	Status	Duration	Stop	Revision
Ana Ropata	Outside geofence	8h 19m	15:32	381e…c4e2
Tama Wiremu	Approved	7h 58m	16:04	a10f…9b73
Ria Kōhere	Approved	8h 04m	16:11	7c22…01de
Hemi Walker	Approved	7h 46m	15:58	e4b8…5a06

07 / Motion

Short, flat, and never on a number.

Durations

Bars drawn to scale

--m-fast 120Hover, focus, chip

--m-base 200Buttons, inputs, rows

--m-med 280Panel, drawer, sheet

--m-slow 400Page and route change

--m-story 600Gate confirmation, once

--ease-out
.22,1,.36,1

--ease-inout
.65,0,.35,1

--ease-emph
.2,0,0,1

Signature loader

The rivet-d, spinning

The rivet-d mark rotating: Field Time’s loading state

96 px on black. The only piece of brand motion. It appears while the handset drains its offline queue — the one moment the user is genuinely waiting on the ingest path, never as a page-load flourish.

What moves

Interactive state: colour and border, 120 ms, --ease-out.
Panels and drawers: transform only, 280 ms, --ease-emph.
A row entering a queue: 8 px rise and fade, 200 ms, staggered 30 ms.
The loader, while real work is happening.

What never moves

The wordmark and the mark. They never animate in chrome.
Numbers. A duration or a total never counts up; it arrives settled.
The approval gate’s confirmation. It states, it does not celebrate.
Anything on scroll. No parallax, no reveal-on-scroll.

Reduced motion

Show the resolved state, paused, never removed. Transitions collapse to 1 ms; the loader above is replaced in place by the static mark on the same black tile, so the page never loses an element. This page implements it — set the OS preference and the tile stops without going blank.

Rest of crew	Status	Duration
Tama Wiremu	Approved	7h 58m
Ria Kōhere	Approved	8h 04m
Hemi Walker	Approved	7h 46m

09 / Tokens

Copy this block and you have the option.

:root{
  /* grounds */
  --paper:#FFFFFF;              /* oklch(100% 0 0)    the only page ground */
  --sunk:#F7F7F7;               /* oklch(97.5% 0 0)   wells, table heads, code */
  --ground-invert:#000000;      /* oklch(0% 0 0)      app tile, loader ground */

  /* ink ramp */
  --ink:#000000;                /* oklch(0% 0 0)      body + display   21.0:1 on paper */
  --ink-2:#4D4D4D;              /* oklch(42% 0 0)     secondary         8.45:1 */
  --ink-3:#6F6F6F;              /* oklch(54% 0 0)     meta, captions    5.02:1 */

  /* lines */
  --line:#DCDCDC;               /* oklch(90% 0 0)     hairline: rows, wells, plates */
  --rule:#000000;               /* oklch(0% 0 0)      structural: sections, table heads */
  --hair:1px;                   /* 0.5px at min-resolution:2dppx */

  /* signal - interactive only: link, primary button, focus ring, the "defend" underline */
  --signal:#005BD2;             /* oklch(50% 0.2 258)   6.13:1 on paper, 6.13:1 white on it */
  --signal-press:#0043B1;       /* oklch(42% 0.19 258)  hover + pressed */
  --signal-tint:#E8F3FF;        /* oklch(96% 0.025 258) focus halo only, never a surface */

  /* status - product surfaces only */
  --exception:#B71824;          /* oklch(50% 0.19 25)    5.78:1 on its tint */
  --exception-tint:#FFEBE9;     /* oklch(95.5% 0.022 25) */
  --warning:#8A5200;            /* oklch(49% 0.13 75)    5.69:1 on its tint */
  --warning-tint:#FBF1DC;       /* oklch(96% 0.03 85) */
  --ok:#197037;                 /* oklch(48% 0.12 150)   5.54:1 on its tint */
  --ok-tint:#E5F8E8;            /* oklch(96% 0.028 150) */

  /* faces */
  --face-display:"URW Gothic","Century Gothic",Futura,sans-serif;   /* Demi 600 only, never below 20px */
  --face-body:"Inter",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --face-data:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* type scale - size / line-height / tracking */
  --fs-display-xl:76px;  --lh-display-xl:72px;  --tr-display-xl:-0.035em;
  --fs-display:52px;     --lh-display:52px;     --tr-display:-0.030em;
  --fs-h2:34px;          --lh-h2:36px;          --tr-h2:-0.022em;
  --fs-h3:22px;          --lh-h3:28px;          --tr-h3:-0.012em;
  --fs-lead:20px;        --lh-lead:32px;        --tr-lead:-0.011em;
  --fs-body:16px;        --lh-body:26px;        --tr-body:0em;
  --fs-small:14px;       --lh-small:22px;       --tr-small:0em;
  --fs-caption:11px;     --lh-caption:12px;     --tr-caption:0.14em;
  --fs-mono:13px;        --lh-mono:20px;        --tr-mono:0em;

  /* spacing - base unit 4px */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px;
  --s-8:32px; --s-12:48px; --s-16:64px; --s-24:96px; --s-32:128px;

  /* layout */
  --container:1200px; --gutter:24px; --pad:32px; --cols:12;

  /* radii */
  --r-0:0px; --r-1:2px; --r-2:4px; --r-pill:999px;

  /* elevation */
  --elev:none;                  /* there is none. depth = one rule + one ground change */

  /* motion */
  --m-fast:120ms; --m-base:200ms; --m-med:280ms; --m-slow:400ms; --m-story:600ms;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
  --ease-emph:cubic-bezier(.2,0,0,1);
}

Paper and
one signal.

Outlined URW Gothic Demi, black on paper.

Wordmark on this option’s ground

The mark and its minimum sizes

Clear space

App icon and don’ts

One display face, one text face, one data face.

Faces and roles

Type scale

Numerals

Two neutrals, one signal, three facts.

Grounds and ink ramp

The signal

Status — product surfaces only

A 4 px unit and a 12-column field.

Spacing scale

Radii, rules, elevation

Container and grid

Every state rendered, side by side.

Buttons — kinds × states

Text link, inputs, select

Nav bar

Product plate

Crew table

Short, flat, and never on a number.

Durations

Signature loader

The fold, built from the tokens above.

Time your payroll can defend.

The console shows you the four sessions you need to look at, not the four hundred you don’t.

Copy this block and you have the option.

Paper andone signal.

Outlined URW Gothic Demi, black on paper.

Wordmark on this option’s ground

The mark and its minimum sizes

Clear space

App icon and don’ts

One display face, one text face, one data face.

Faces and roles

Type scale

Numerals

Two neutrals, one signal, three facts.

Grounds and ink ramp

The signal

Status — product surfaces only

A 4 px unit and a 12-column field.

Spacing scale

Radii, rules, elevation

Container and grid

Every state rendered, side by side.

Buttons — kinds × states

Text link, inputs, select

Nav bar

Product plate

Crew table

Short, flat, and never on a number.

Durations

Signature loader

The fold, built from the tokens above.

Time your payroll can defend.

The console shows you the four sessions you need to look at, not the four hundred you don’t.

Copy this block and you have the option.

Paper and
one signal.