Warm paper,
engineered.
A set of engineering drawings and payroll ledgers, rendered for the web: warm off-white stock, warm near-black ink, hairline rules that carry the structure, and every label stamped in mono.
Ops and finance buyers at field-service companies do not want a product that looks like it was invented last quarter. They want the thing that was measured, checked and signed. Warm paper reads as a document rather than a screen; the drawn column grid and the visible rules say that somebody laid this out on purpose and can show their working. Steel — a low-chroma blue that never shouts — marks the one thing you can act on, so colour keeps its meaning for the only place it must be trusted: an exception on a timesheet.
It is the register of a torque spec, a survey drawing, a general ledger. Dependable, measured, un-flashy — which is exactly the promise of a hard approval gate before Acumatica payroll.
Nothing floats.
Every surface is drawn: bounded by a hairline, snapped to the twelve-column grid, and named by a mono label. No shadow, no glow, no soft edge does structural work — depth is three steps of the same paper and a 1 px rule.
Corollary — colour is evidence
Steel appears only on things you can click. Red, amber and green appear only on a record's state. Nothing else in the system is coloured, ever.
The logo asset stays pure black (#000000) while the type ink is warm (#1A1511). That is deliberate and it is the only place the two blacks meet: the mark is a supplied, outlined asset, not text. Do not warm it to match.
Wordmark minimum — 96 px wide
App icon · 512 · r 112 (22%)
Field Time
URW Gothic Demi
Identity face, outlined in the wordmark. Weight 600. Display only — never below 20 px, never for running copy. Tracking tightens as size grows: −0.014em at 22 px to −0.032em at 72 px.
/brand/fonts.css · self-hosted woff2
Inter
All running copy, UI labels, buttons, table cells. 400 for prose, 500 for controls, 600 sparingly. Optical tracking is zero at 16 px and goes slightly negative above 20 px.
Google Fonts · 400 / 500 / 600
JetBrains Mono
Two jobs. (1) Every eyebrow, caption and field label, uppercase at 11 px / +0.12em — the technical-drawing register. (2) All quantities: times, durations, hashes, IDs, stat figures.
Google Fonts · 400 / 500
| Role | Live sample | Size / LH / Tracking |
|---|---|---|
| display-xl | Time your payroll can defend. | 72 / 1.00 −0.032em |
| display | The approval gate | 52 / 1.05 −0.028em |
| h2 | Exceptions first, always | 34 / 1.12 −0.022em |
| h3 | Offline capture on the handset | 22 / 1.22 −0.014em |
| lead | Field Time captures punches offline, surfaces the exceptions, and lets nothing reach Acumatica payroll unapproved. | 20 / 1.50 −0.004em |
| body | Acumatica employees, projects and appointments are the canonical IDs everywhere in Field Time. There is no mapping layer to drift out of sync, and no middleware to be down when the crew is not. |
16 / 1.60 0em |
| small | Supervisors see only what needs a decision. A session with no exception is approved in one action; a session with one cannot leave the console without a written reason. |
14 / 1.55 0em |
| caption | Approved 15:51 · M. Ropata · revision 381e…c4e2 | 11 / 1.40 +0.12em · UC |
| mono-data | 8h 19m Stop 15:32 412 m EP00012 2,250 / 2,250 | 13 / 1.45 0em · tnum |
Everything is tabular. font-variant-numeric: tabular-nums is set on body, so columns of hours never shimmy. Times, durations, distances, revision hashes, IDs and stat figures are set in JetBrains Mono — a quantity is data, not prose. Inter carries the words around them.
Grounds — three steps of one paper
Ink ramp — three steps, all AA on all three grounds
Lines — two weights, plus the drawn grid
Interactive — steel. The only accent in the whole system.
Status — desaturated to sit on warm paper. Ink + tint pairs.
Steel is permitted only on something the user can operate: a link, the primary button, the focus ring, a selected row. It is never a surface fill, never a heading colour, never decoration.
Red, amber, green are permitted only as the state of a record, and always as an ink+tint pair with a word beside them — colour is never the sole carrier of meaning. Anything else on this site is paper, ink or a rule.
Plates and tables use r-0. Controls use r-1. Only the app tile is round (22%).
Elevation: none. There are no shadows in this system. Depth is expressed by the three ground steps and a hairline. On retina, hairlines are 0.5px.
Read the export contract before you wire a partner tenant.
Hovered: export contract
Focused: export contract
Disabled: export contract
Focus ring2 px steel, 2 px offset, on every focusable thing. Never removed.
"Walked to the van for fittings."
- Duration
- 8h 19m
- Approved
- 15:51 · M. Ropata
- Revision
- 381e…c4e2
- Released
- 16:00 → Acumatica
- Activity
- Time Activity EP00012 Draft
| Crew | Hours | Exception | Stop | Status | Revision |
|---|---|---|---|---|---|
| Ana Ropata | 8h 19m | Outside geofence | 15:32 | Approved 15:51 | 381e…c4e2 |
| Tama Wiremu | 7h 58m | — | 16:04 | Approved | 7c02…9ab1 |
| Ria Kōhere | 8h 04m | — | 15:11 | Approved | b41d…30f7 |
| Hemi Walker | 7h 46m | — | 17:20 | Approved | e9a8…5c14 |
| Token | Value | Use |
|---|---|---|
| --m-fast | 120ms | hover, chip tint |
| --m-base | 200ms | button, input border |
| --m-med | 280ms | row expand, drawer |
| --m-slow | 400ms | plate enter, page fold |
| --m-story | 600ms | the gate closing, once |
| --ease-out | .22,1,.36,1 | things arriving |
| --ease-inout | .65,0,.35,1 | things moving between |
| --ease-emph | .2,0,0,1 | the one emphatic move |
The rivet-d turning on black is the one piece of motion the brand owns. It appears while a sync or an export is genuinely in flight — never as decoration on a marketing page.
- Tints and borders on hover and focus.
- A row expanding to show its exception.
- The approval gate closing — once, --m-story, --ease-emph.
- The loader, only while work is in flight.
- The wordmark. Ever.
- Rules, the column grid, plate edges.
- Numbers — a figure never counts up.
- Anything on scroll: no parallax, no reveal.
Under prefers-reduced-motion: reduce, every transition drops to ~0 ms and the loader is replaced by its resolved state, paused — the static mark on black, shown above. Nothing is removed and no space collapses: a person who turns motion off must still see every element, in its finished position.
Field Time · Offline-first time capture for Acumatica
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 · exception queue
One session out of four needs you.
The console opens on the exceptions, not on the crew list. Ana's stop is 412 m outside the fence, so her session is held: it carries a reason, an approver and a revision hash before it is allowed to become a Time Activity.
"Walked to the van for fittings."
- Approved
- 15:51 · M. Ropata
- Revision
- 381e…c4e2
- Released
- 16:00 · Acumatica
- Activity
- Time Activity EP00012 Draft
| Tama Wiremu | 7h 58m | Approved |
| Ria Kōhere | 8h 04m | Approved |
| Hemi Walker | 7h 46m | Approved |
/* Deskrivet — Option 4: Warm paper, engineered */
:root {
/* grounds — three steps of one warm paper */
--ground: oklch(97% 0.008 80); /* #F8F5EF */
--paper: oklch(99% 0.004 80); /* #FDFBF9 */
--sunk: oklch(94.5% 0.010 80); /* #F0ECE5 */
/* ink ramp — all AA (4.5:1+) on every ground */
--ink: oklch(20% 0.012 60); /* #1A1511 · 16.62:1 */
--ink-2: oklch(42% 0.012 60); /* #524C47 · 7.78:1 */
--ink-3: oklch(52% 0.012 60); /* #6E6762 · 5.06:1 */
/* lines */
--grid: oklch(90% 0.012 75); /* #E3DDD5 */
--line: oklch(86% 0.010 70); /* #D5D0CA */
--rule: oklch(72% 0.014 70); /* #AAA39B */
--hair: 1px; /* 0.5px @ 2dppx */
/* interactive — steel, the only accent */
--steel: oklch(45% 0.05 250); /* #405870 */
--steel-deep: oklch(36% 0.055 250); /* #263F59 */
--steel-tint: oklch(95% 0.015 250); /* #E7F0F8 */
/* status — ink + tint pairs, desaturated for warm paper */
--exception: oklch(47% 0.14 27); /* #9A322C */
--exception-tint: oklch(94% 0.028 30); /* #FEE5E0 */
--warning: oklch(50% 0.10 70); /* #875814 */
--warning-tint: oklch(94.5% 0.035 80);/* #F9EBD3 */
--ok: oklch(45% 0.085 150); /* #2E623B */
--ok-tint: oklch(94.5% 0.028 150);/* #E0F3E3 */
--mark: #000000; /* logo asset — never warm */
/* type */
--f-display: "URW Gothic", "Century Gothic", sans-serif;
--f-body: "Inter", system-ui, sans-serif;
--f-mono: "JetBrains Mono", ui-monospace, monospace;
--t-display-xl: 600 clamp(44px,6.6vw,72px)/1.00 var(--f-display);
--t-display: 600 clamp(36px,4.4vw,52px)/1.05 var(--f-display);
--t-h2: 600 clamp(27px,2.6vw,34px)/1.12 var(--f-display);
--t-h3: 600 22px/1.22 var(--f-display);
--t-lead: 400 20px/1.50 var(--f-body);
--t-body: 400 16px/1.60 var(--f-body);
--t-small: 400 14px/1.55 var(--f-body);
--t-caption: 500 11px/1.40 var(--f-mono); /* uppercase */
--t-mono: 400 13px/1.45 var(--f-mono);
--tr-display-xl: -0.032em; --tr-display: -0.028em;
--tr-h2: -0.022em; --tr-h3: -0.014em;
--tr-lead: -0.004em; --tr-body: 0em;
--tr-caption: 0.12em;
/* space — 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:32px; --cols:12;
--r-0:0; --r-1:2px; --r-2:4px; --r-3:8px; --r-tile:22%;
/* elevation: none — depth is ground steps + hairlines */
/* 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);
}
@media (min-resolution:2dppx) { :root { --hair:0.5px } }