Deskrivet · web brand kit · option 1 of 5
Ink on paper.
A monochrome system for a company whose product exists to be checked. White ground, black ink, hairline rules, and one display face used only where it is big enough to be a signature.
01Thesis
Ink on paper
Deskrivet is set like a document, not like software: pure white ground, pure black ink, and structure carried entirely by rules and space.
A payroll add-on is bought by the person who has to defend the number in an audit. That buyer reads a timesheet, a contract, a variance report — printed things where black on white means “this is the record” and any colour means “look here, something is off.” Ink on paper inherits that reflex. It costs the brand no attention budget, so when the product does put a red triangle next to Ana Ropata’s session, it is the only saturated thing on the screen and it is unmissable. It also matches the identity board exactly: solid black or solid white, generous space, fine grey rules that are dividers and never a third brand colour.
The one rule
Colour is product data, never brand chrome.
Nothing in the marketing site, navigation, buttons, links or footer is anything but black, white or grey. The only hues that exist live inside product surfaces, where they carry meaning a person can act on: exception, warning, ok, and the single blue of an interactive control. If a colour cannot be traced to a row of data, it is not allowed on the page.
02Logo
Wordmark, black on ground, hero size. Outlined URW Gothic Demi with the rivet-d. Always the supplied asset — never retyped.
The mark alone
The rivet-d, lifted from the wordmark and the app tile. One signature for company and product.
App icon
The rounded tile is a presentation treatment; platform masks may override it. It is the only rounded surface Deskrivet ships.
Clear space — one bowl height on every side
Clear space equals the height of the d’s bowl — the round of the letter, crown excluded. The keep-out is the same on all four sides and scales with the mark: clear space = 0.655 × wordmark height, which is 52 px when the wordmark is set 400 px wide.
Minimum sizes
Below 96 px wide the wordmark’s counters close up; below 16 px the rivet crown stops reading as a fastening and becomes a bump. Under those sizes, use the mark, not the wordmark.
Don’t
Stretch or condense. The optical spacing is drawn; scale it uniformly or not at all.
Sit the mark on a mid tone. Black or white only, on a ground that keeps it at full contrast.
Retype the wordmark in another face. The rivet-d and the i dot are custom; only the supplied outlines are the logo.
03Typography
Defend Aa 8h
Display — URW Gothic Demi
Weight 600 only. Self-hosted from /brand/fonts.css. Never below 20 px, never used for body copy. Tracking tightens as size grows: −0.02 em at 22 px to −0.035 em at 76 px.
Defend Aa 8h
Body — Inter 400 / 500 / 600
Google Fonts. Carries every sentence a reader has to actually read: leads, paragraphs, labels, buttons, nav. Set at −0.006 em; unset tracking at 14 px and below.
Defend Aa 8h
Data — JetBrains Mono 400 / 500
Google Fonts. Every figure a person may have to reconcile: durations, timestamps, distances, revision hashes, IDs, hex values, tokens.
| Token | Live sample | Size / line / track |
|---|---|---|
| display-xl | Time your payroll can defend. | 76 / 0.94 / −0.035em URW Gothic Demi |
| display | The approval gate | 52 / 1.02 / −0.030em URW Gothic Demi |
| h2 | Exceptions come to you | 32 / 1.12 / −0.025em URW Gothic Demi |
| h3 | Offline is the normal case | 22 / 1.28 / −0.020em URW Gothic Demi |
| lead | Field Time captures punches offline, surfaces the exceptions, and lets nothing reach Acumatica payroll unapproved. | 20 / 1.50 / −0.011em Inter 400 |
| body | A supervisor opens the console at 15:40 and sees four crew, one flag. Ana Ropata stopped 412 m outside the fence; her note explains it; the approval is recorded against her supervisor’s name and a revision hash. | 16 / 1.60 / −0.006em Inter 400 |
| small | Built for Acumatica 2026 R1. No middleware, no mapping screens. | 14 / 1.50 / 0 Inter 400 |
| caption | Released to Acumatica | 11 / 1.40 / +0.14em Inter 600, uppercase |
| mono-data | 8h 19m · 15:32 · 412 m · 381e…c4e2 · EP00012 | 13 / 1.40 / 0 JetBrains Mono 400 |
Sizes given are the 1440 step. The four display steps use clamp() and land at 44 / 34 / 26 / 22 px at 390 px wide; body, small, caption and mono-data never change size.
Numerals
Tabular everywhere, without exception. Inter runs font-variant-numeric:tabular-nums for any figure inside prose; JetBrains Mono takes over for anything a person may reconcile — durations, clock times, distances, revision hashes, Acumatica IDs. Columns of numbers must align on the digit, so a total can be scanned rather than read.
Measure and rhythm
Body copy is capped at 68 ch, leads at 34 em, stat captions at 32 ch. Vertical rhythm is a 4 px base: every heading, rule and block edge lands on it, which is what makes an all-hairline page look set rather than assembled.
Display type is the only place the brand face appears. It is a face with a small x-height and wide counters — it opens up at 32 px and above and collapses under 20 px, so 20 px is a hard floor and 22 px is the practical one.
04Colour
Ground and ink
Status — inside product surfaces only
| Contrast | Pair | Ratio | Verdict |
|---|---|---|---|
| Body ink on ground | #000000 / #FFFFFF | 21.00 : 1 | AAA |
| Secondary ink on ground | #3D3D3D / #FFFFFF | 10.86 : 1 | AAA |
| Muted ink on ground | #5C5C5C / #FFFFFF | 6.69 : 1 | AA — captions and metadata only |
| Exception ink on its tint | #A8231F / #FDF0EF | 6.46 : 1 | AA |
| Warning ink on its tint | #7A5200 / #FBF3E0 | 6.26 : 1 | AA |
| Ok ink on its tint | #1B6B3A / #EEF6F0 | 5.94 : 1 | AA |
| White on product control | #FFFFFF / #005BD2 | 6.13 : 1 | AA |
When colour is allowed
Only when it is a fact about a record. A hue may appear if and only if it is (a) a status a supervisor can act on — exception, warning, ok — rendered as ink on its own tint inside a product surface, or (b) the single blue on the one control that commits a change inside that surface. Marketing chrome, navigation, buttons, links, footers, illustrations and section furniture stay black, white or grey. There is no brand accent to reach for, which is the point: the first colour a reader ever sees on a Deskrivet page is a flagged timesheet row.
Status is never colour alone
Every status carries a glyph and a word as well as a hue, so it survives greyscale printing, colour-blindness and a photocopied audit pack.
▲ Outside geofence Missing break Approved
Tints are the only non-white fills permitted in a table row. They are never used decoratively, and never on the marketing page except inside a rendered product plate like the one in section 08.
05Spacing and layout
Scale — base unit 4 px
Component padding uses s-2 to s-5. Block separation uses s-6 to s-7. Section separation is s-9 at 1440 and s-8 below 720. Nothing between the steps.
Radii, rules, elevation
Elevation: none. No shadows, no layers, no glass. Depth is expressed by a rule and by white space. A modal, if one is ever needed, is a full-bleed white sheet with a 1 px black edge.
Container 1200 px · 12 columns · 24 px gutters · 24 px page margin
Content maxes at 1200 px with 24 px margins (20 px under 520 px). The grid collapses 12 → 4 columns below 720 px and to a single column below 560 px. Prose never spans more than 8 of 12 columns.
06Components
Buttons — states side by side
Three sizes: 48 / 40 / 32 px tall, with 24 / 18 / 13 px horizontal padding. Primary is a solid black block, secondary is a 1 px black outline, ghost has no edge until hover. Hover darkens to ink-2 rather than tinting — nothing here has a hue to shift. Focus is a 2 px black ring at 2 px offset and is never suppressed.
Text link
Every exception is resolved before export — see how the approval gate works — and the audit trail keeps the supervisor’s name and a revision hash.
Links are ink with a 1 px underline at 3 px offset, thickening to 2 px on hover. Underline is never removed: in a monochrome system it is the only thing that says “this is a link”.
Form controls
Status chips
▲ Outside geofence Missing break Approved 15:51 Draft
Product plate
- Stop
- 15:32
- Distance
- 412 m outside the fence
- Crew note
- “Walked to the van for fittings.”
- Approved
- 15:51 · M. Ropata
- Revision
- 381e…c4e2
- Released
- 16:00 · Time Activity EP00012
The plate is the one place the system spends colour: an exception tint, and the blue on the control that commits the change. Everything else is the same ink and the same hairline as the marketing page.
Table — crew, Tuesday 12 May
| Crew | Hours | Exception | Approved | Status |
|---|---|---|---|---|
| Ana Ropata | 8h 19m | ▲ Outside geofence | 15:51 | Draft |
| Tama Wiremu | 7h 58m | — | 15:44 | Approved |
| Ria Kōhere | 8h 04m | — | 15:44 | Approved |
| Hemi Walker | 7h 46m | — | 15:45 | Approved |
Durations and times are tabular mono so the column aligns on the digit. The exception row takes the tint and a 2 px exception rule at its leading edge — sorted to the top, because the exception is the reason the screen exists.
07Motion
| Token | Value | Used for |
|---|---|---|
| --m-fast | 120 ms | Hover, focus ring, chip state |
| --m-base | 200 ms | Buttons, inputs, row expansion |
| --m-med | 280 ms | Panels, drawers, table sorts |
| --m-slow | 400 ms | Page and route transitions |
| --m-story | 600 ms | The one narrated moment per page |
| --ease-out | cubic-bezier(.22,1,.36,1) | Things arriving |
| --ease-inout | cubic-bezier(.65,0,.35,1) | Things moving between two states |
| --ease-emph | cubic-bezier(.2,0,0,1) | The single emphasised move |
No bounce, no overshoot, no spring. A number that overshoots and settles is a number that looked wrong for 80 ms, and this brand cannot afford that.
Signature motion — the rivet-d loader
The mark turns on its own axis on a black tile. It is the only place the brand animates itself, and the only black surface on a white site. Used for waits over 400 ms: sync, replay, export.
What moves
- State — a chip changing from draft to approved, at 120 ms.
- Disclosure — a session row opening to show its evidence, at 280 ms.
- Arrival — an exception entering the queue, 200 ms, opacity and 4 px of travel only.
What never moves
- The wordmark, the mark, and the kit bar.
- Numbers. A figure never counts up, ticks, or animates into place.
- Anything on scroll: no parallax, no reveal-on-scroll, no sticky theatre.
Reduced motion
Show the resolved state, paused, never removed. Under prefers-reduced-motion: reduce transitions collapse to 1 ms and the loader is replaced by the static mark with its label — the interface still reports that work is happening, it just stops performing it.
08Applied
The system as the reader would meet it: one fold of deskrivet.com, set entirely in 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.
- Stop
- 15:32
- Distance
- 412 m outside the fence
- Crew note
- “Walked to the van for fittings.”
- Approved
- 15:51 · M. Ropata
- Revision
- 381e…c4e2
- Released
- 16:00 · Time Activity EP00012
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
09Tokens
:root{
/* ground */
--ground:#ffffff;
--ground-sunk:#f5f5f5;
/* ink ramp */
--ink:#000000; /* 21.00:1 on ground */
--ink-2:#3d3d3d; /* 10.86:1 */
--ink-3:#5c5c5c; /* 6.69:1 — captions, metadata */
/* lines */
--line-hair:#d4d4d4; /* 1px grouping hairline */
--line-rule:#000000; /* 1px structural rule */
/* interactive — monochrome chrome */
--interactive:#000000;
--focus-ring:#000000; /* 2px solid, 2px offset, never removed */
/* status — product surfaces only */
--status-exception:#a8231f; --tint-exception:#fdf0ef;
--status-warning:#7a5200; --tint-warning:#fbf3e0;
--status-ok:#1b6b3a; --tint-ok:#eef6f0;
--product-control:#005bd2; /* oklch(50% 0.2 258) */
/* type */
--font-display:"URW Gothic","Century Gothic",sans-serif; /* Demi 600 only, min 20px */
--font-body:"Inter",system-ui,sans-serif;
--font-mono:"JetBrains Mono",ui-monospace,monospace;
--t-display-xl:clamp(44px,8.2vw,76px); /* lh .94 · track -.035em */
--t-display:clamp(34px,5.4vw,52px); /* lh 1.02 · track -.030em */
--t-h2:clamp(26px,3.2vw,32px); /* lh 1.12 · track -.025em */
--t-h3:22px; /* lh 1.28 · track -.020em */
--t-lead:20px; /* lh 1.50 · track -.011em */
--t-body:16px; /* lh 1.60 · track -.006em */
--t-small:14px; /* lh 1.50 · track 0 */
--t-caption:11px; /* lh 1.40 · track +.14em, uppercase */
--t-mono:13px; /* lh 1.40 · tabular-nums */
/* spacing — base unit 4px */
--s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
--s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
/* layout */
--container:1200px;
--gutter:24px;
--radius:0px; /* app tile is the only exception */
--hair:1px;
/* 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);
}