Deskrivet · Web brand kit · Direction 5 of 5
Gothic editorial
One typeface carries the whole company: the letterforms of the wordmark become the letterforms of the site, and a single hi-vis amber marks the one thing that matters on each screen.
Deskrivet sells trust to ops and finance people who have been burned by payroll data. A site that borrows a stock UI font says nothing; a site set entirely in URW Gothic says the mark is not a logo bolted onto a template — it is the voice. The register is editorial, not app-like: large headings, long air between sections, wide-tracked small caps for labels, hairline rules doing the structure.
The amber is the colour of a field crew's hi-vis vest, and it behaves like one: it never speaks, it only marks. It cannot be read as text, it cannot fill a button, it cannot tint a surface. That restraint is what keeps a brand-forward page from drifting into decoration — and it keeps the whole page monochrome, which is what a document you will hand to an auditor should be.
The one rule
One face. The amber marks; it never speaks.
Everything on the site is URW Gothic — Demi for display, Book for body — with JetBrains Mono admitted for machine data only. The accent appears as a bar, a rule or a ring, never as a letter and never as a fill.
Black on white, always. The wordmark is the supplied outline — it is never retyped, and the amber is never underneath it.
Wordmark · hero size · on ground
The mark · rivet-d
App icon · 512 rounded tile
Clear space · b = the height of the d's bowl
bb
bb
The dashed line is the ink edge of the wordmark; the solid line is the minimum clear space. b = 209.8 units of the 1600 × 320 artboard = 0.131 × the rendered wordmark width. Nothing — type, rule, image or edge of viewport — enters that band.
Minimum sizes · wordmark 96 px · mark 16 px
Don't
Distort. The artboard is 5 : 1 and stays 5 : 1.
Sit the mark on the amber. The marker is not a ground.
Retype it. Live type loses the rivet crown and the optical fit.
URW Gothic does display and body. Book is set at 18 px / 1.62 on a 60-character measure so a geometric face stays readable at paragraph length.
Faces and roles
| Face | Role | Source |
|---|---|---|
| URW Gothic Demi | Display, headings, labels, buttons, big numerals | /brand/fonts.css · 600 |
| URW Gothic Book | Body, lead, small — the whole reading layer | /brand/fonts.css · 400 |
| JetBrains Mono | Machine data only: times, distances, hashes, IDs, tokens | Google Fonts · 400/500 |
Demi below 20 px is only ever uppercase and tracked ≥ 0.08 em. That is the single exception to the display-face rule: captions (12 px / 0.18 em), chips (11 px / 0.13 em) and buttons (14 px / 0.09 em) are set as tracked caps, where the tight geometric fit stops being a problem. Demi is never used for lowercase running text at any size.
Scale · live samples · values at ≥ 1200 px
A dependable connection.
Numerals
Every figure that a reader may compare down a column is tabular. Times, durations, distances, revision hashes and Acumatica IDs are JetBrains Mono with tnum on. Display figures in stats and headings stay in Demi, also tabular, because they are read as type, not as data.
Rendered
7h 58m
8h 04m
7h 46m
Black on white, one hi-vis amber that only ever marks, and status colour that exists solely inside product surfaces.
Measured contrast
When colour is allowed
The marker fails contrast against white by design — 1.89 : 1 is the proof that it can never be text. It is allowed in exactly four jobs: the bar under one word in a heading, the current item in navigation, the outer focus ring, and the rule beside a stated rule. Four amber events per screen is the ceiling.
Status colour is allowed only inside a product surface — a plate, a chip, a table row — never in site chrome. The deep ochre of warning is a text colour on a tint; the hi-vis marker is a bar. They are never used in the same component.
Base unit 8 px. Sections are separated by 96 px of nothing — the white space is the layout.
Scale · rendered
Structure
There are no shadows, no blur and no rounded corners in this system. Depth is expressed as a 1 px hairline or a 2 px rule, and separation is expressed as distance.
Column grid · 12 × 24 px gutter · rendered
Square, hairlined, uppercase. Hover inverts or reveals the marker; focus is always a black ring inside an amber ring.
Buttons · states side by side
Sizes
Text link
Read the approval gate spec, or the hover state, or the focus state.
Nav bar
Input and select
Status chips
Chips are the only place a coloured field is allowed, and only inside a product surface. The square 6 px marker inside the chip carries the same colour as the label, so the chip survives greyscale printing of a payroll pack.
Product plate · session detail
- Total
- 8h 19m
- Stop
- 15:32
- Geofence
- 412 m outside the fence
- Crew note
- “Walked to the van for fittings.”
- Approved
- 15:51 · M. Ropata
- Revision
- 381e…c4e2
Table · crew day · tabular numerals
| Crew | Hours | Exception | Status |
|---|---|---|---|
| Ana Ropata | 8h 19m | Outside geofence | Approved |
| Tama Wiremu | 7h 58m | — | Approved |
| Ria Kōhere | 8h 04m | — | Approved |
| Hemi Walker | 7h 46m | — | Approved |
The exception row is marked by a 3 px red rule on its leading edge, not by a tinted row. Tinting rows would put status colour on a surface; the rule keeps it on an edge.
Type never moves. Only the marker, the state of a control, and the loader move.
Durations and eases
Signature · the rivet-d loader
The d turns on its own axis. It is the only looping motion the brand owns, and it is used for one thing: waiting on the ingest path.
What moves · what never moves
Reduced motion: show the resolved state, paused, never removed. The marker is drawn full width with no transition; the loader is replaced by the static rivet-d with an accessible “Working” label. Nothing that carried information disappears.
The home fold, built only from the tokens above.
Time your payroll can defend.
Field Time captures punches offline, surfaces the exceptions, and lets nothing reach Acumatica payroll unapproved.
Built for Acumatica 2026 R1. No middleware, no mapping screens.
events accounted for after eight fault scenarios replay through the real ingest path
mapping screens. Acumatica employees, projects and appointments are the canonical IDs everywhere
gate before export. An unapproved session cannot become a Time Activity, technically
Supervisor console · exceptions first
- Geofence
- 412 m outside the fence
- Crew note
- “Walked to the van for fittings.”
- Approved
- 15:51 · M. Ropata
- Revision
- 381e…c4e2
The complete custom-property set this page is built from.
:root{
/* grounds */
--ground:#FFFFFF; /* oklch(100% 0 0) */
--ground-sunk:#F4F4F1; /* oklch(96.3% .003 106)*/
--ground-invert:#000000; /* oklch(0% 0 0) */
/* ink ramp */
--ink:#000000; /* 21.0:1 on ground */
--ink-2:#3A3A38; /* 11.4:1 */
--ink-3:#6E6E68; /* 5.13:1 */
/* lines */
--line:#000000; /* 2px structural rule */
--line-soft:#D9D9D4; /* 1px hairline */
/* interactive */
--interactive:#000000;
--interactive-hover:#3A3A38;
/* marker — never text, never a fill */
--mark:#EFB300; /* oklch(80% .17 85) */
/* status — product surfaces only */
--exception:#A81E12; --exception-tint:#FBEAE7; /* 6.30:1 */
--warning:#7A5200; --warning-tint:#FBF0D8; /* 6.12:1 */
--ok:#186B39; --ok-tint:#E7F3EA; /* 5.75:1 */
--pending:#4A4A46; --pending-tint:#EFEFEC; /* 7.73:1 */
/* faces */
--f-display:"URW Gothic",ui-sans-serif,system-ui,sans-serif; /* 600 Demi */
--f-body:"URW Gothic",ui-sans-serif,system-ui,sans-serif; /* 400 Book */
--f-data:"JetBrains Mono",ui-monospace,monospace;
/* type scale — size / line-height / tracking, at >=1200px */
--t-display-xl:92px; --lh-display-xl:.94; --tr-display-xl:-.035em;
--t-display:64px; --lh-display:.98; --tr-display:-.028em;
--t-h2:42px; --lh-h2:1.04; --tr-h2:-.022em;
--t-h3:26px; --lh-h3:1.18; --tr-h3:-.012em;
--t-lead:23px; --lh-lead:1.5; --tr-lead:-.004em;
--t-body:18px; --lh-body:1.62; --tr-body:0em;
--t-small:15px; --lh-small:1.55; --tr-small:.004em;
--t-caption:12px; --lh-caption:1.25; --tr-caption:.18em;
--t-mono:14px; --lh-mono:1.45; --tr-mono:0em;
/* spacing — base unit 8 */
--u:8px;
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
--s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
/* layout */
--container:1200px;
--measure:60ch;
--gutter:24px;
--radius:0px;
--hair:1px;
--rule:2px;
--elevation:none;
/* 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);
}