The plate, the corners, one ink.
The OnDuty brand and design system, drawn from the code that ships it. Every value on this page is read from the token file, and a test holds them equal.
The mark
Two registration ticks framing one point in the ink. Everything on the drawing is registered; the point is the one thing that needs a person.
Drawn on a 24 unit grid: the top-left tick from (3, 9) up to (3, 3) and right to (9, 3); the bottom-right tick from (21, 15) down to (21, 21) and left to (15, 21); stroke 1.7 with square ends; the point at (12, 12), radius 2.4, filled in the accent.
The lockup sets the wordmark in Chivo 700 at 20 units to the mark's 24, tracked -0.02em, on one baseline.
Three renderings and no others: ink on paper with the point in vermilion; paper on the ink plate with the point lifted two steps; and one colour in currentColor, point included, for the places a second colour cannot be shown.
Size and space
- Minimum
- 18 px, the size the product draws it at. Below 16 px the stroke drops under a pixel; do not go there.
- Clear space
- 4 units of the 24 unit grid on every side, which is the padding of the shipped icon and lockup files.
- Stroke
- 1.7 units, square ends, and it scales with the mark. Never restroke it to match a line weight around it.
- The point
- Radius 2.4, always in the accent. Alone, the point is a dot; the ticks are what make it the mark.
Paper, plate or mono
Use one of the three renderings above, from the files at the bottom of this page.
A container
No box, no circle, no rounded square. The mark is registered to the grid it sits on, not to a badge.
Animation
The hero animates it once, at the end of the night, and that is its one animation. Nowhere else does it move.
Recolouring
The ticks are ink or paper; the point is the accent. No gradients, no third colour, no tinting to match a chart.
The point without the ticks
A dot in vermilion is a dot. The ticks are what register it.
Redrawing the geometry
Stroke, radius and positions are the ones in the construction. Do not thicken, thin or re-space to taste.
Colour
Cold paper, cold ink, one warm accent. The swatches are painted with the site's own tokens, so what you see is what ships, and the hex under each is a transcription.
Grounds
--ui-canvas
paper: the page
#EDEEEA light
#121418 dark--ui-surface
panel: a sheet laid on the paper
#FFFFFF light
#1A1D22 dark--ui-sunken
sunken: a recess in the paper
#E3E5E1 light
#0E1013 dark--ui-tint
tint: reference material
#E6E8E4 light
#16191E dark
Ink
--ui-ink
ink: headlines and body
#14161A light
#E9EAE6 dark--ui-ink-2
second step: running text
#5C6167 light
#A9AEB3 dark--ui-ink-3
third step: labels and captions
#84898E light
#7C8288 dark--ui-ink-4
fourth step: metadata
#A9ADB0 light
#5A6066 dark
Lines
--ui-grid
grid: the field, felt and not read
#E1E3DF light
#1D2126 dark--ui-line
line: a divider inside a group
#D3D6D0 light
#262B31 dark--ui-rule
rule: a drawn edge
#B4B8B2 light
#3A4048 dark--ui-line-strong
strong: the registration ticks
#8F938D light
#555C64 dark
The one accent
--ui-accent
the action, and the thing waiting for a person
#D8401F light
#F0664A dark--ui-accent-hover
the accent pressed, and accent-coloured text
#B8321A light
#F98A72 dark--ui-accent-soft
the ground of a stamp
#FBE6E0 light
#2A1712 dark--ui-accent-line
the edge of a stamp
#F2B9A9 light
#5A2A1F dark
The ink plate
--ui-night
the inverted chapter and the footer
#14161A light
#E9EAE6 dark--ui-night-2
a panel inside the plate
#1E2126 light
#DADCD7 dark--ui-ink-shell
ink on the plate
#EDEEEA light
#14161A dark--ui-on-accent
text on the accent
#FFFFFF light
#14161A dark
The accent marks the action you are asked to take and the thing waiting for a person, and nothing else.
Dark is decided by the visitor's system, never by a toggle: paper and ink swap as a set and the accent lifts two steps, so on a dark system these swatches have already repainted themselves and the second value is the one you are looking at.
Product surface only
- --ui-ion
- Cognition: signals, edges, links. Never on the plate. #2C6C88 light · #6FA8C4 dark
- --ui-positive
- A state that is fine. #1A6A4F light · #4FB68F dark
- --ui-attention
- A state that needs looking at. #8A5A12 light · #D0A055 dark
- --ui-critical
- A state that is failing. Not the accent: the accent is not a severity. #A32B3C light · #E97F8C dark
On the product surface, ion marks cognition and the three semantic colours are states, never decoration. The plate paints none of them: one accent means one accent, and a marketing page has no severities to encode. They do carry a light and a dark value on the site surface, because that surface reaches further than the plate does, and a state has to be legible before it is tasteful.
Type
One hand for the lettering, one for the machine, and no serif anywhere.
Hero · Chivo 700 · 34 to 80 px · tracking -0.03em · leading 0.97
Someone is.
H1 · Chivo 700 · 36 to 60 px · tracking -0.03em · leading 0.98
The brain your company does not have.
H2 · Chivo 600 · 28 to 40 px · tracking -0.028em · leading 1.02
Agents propose. A gate decides.
H3 · Chivo 600 · 20 to 22 px · tracking -0.02em · leading 1.15
A hold is a person, not a timer.
Lede · Chivo 400 · 17 to 19 px · leading 1.45 · measure 44ch
It reads what you already have. Every conclusion carries its evidence. Anything it does to the world goes through a decision engine that answers to rules you wrote.
Body · Chivo 400 · 16 px · leading 1.6 · measure 62ch
OnDuty connects to the systems you already run, remembers what matters about every customer, and works out what needs a person today. Agents propose. A gate decides. Nothing acts on a customer because a model felt confident.
Machine voice · Martian Mono · uppercase · tracked
Label · 11 px · 0.14em
What it meansButton · 12 px · 0.06em · 48 px tall
See the productTimestamp · 12 px · tabular
On duty ·
Verdict · 10 px · 0.14em
Held for youChivo sets every headline at 700 and every sentence at 400, and Martian Mono, uppercase and tracked, letters every label, button, timestamp and verdict. The product's working surface sets IBM Plex Sans at a 13 px base with IBM Plex Mono for anything a machine produced, and borrows Chivo for display so a headline in the app and on the site are one hand.
Each display size is one token carrying its whole ramp: a floor at phone width, a ceiling at the width of the column, and its own tracking and leading, because those are part of the step and not decoration a component adds. The two numbers in each label are the ends of the ramp, and the specimens above are sitting somewhere between them at whatever width you are reading this. It used to be a fixed value per size plus a chain of four classes inside one component, which meant the token named only the largest of the four and a headline set with it anywhere else got that size at every width.
No serif, anywhere. The display face is a grotesque, and it stays one.
Structure
An engineering drawing rather than an interface: one grid, one optical axis, alignment before decoration.
Radius zero everywhere on the site. A plate has corners; on paper anything above zero reads as a sticker.
grid · the field the page sits on, felt and not read
line · a divider between two things in one group
rule · a drawn edge: a panel border, a spine, a section rule
Three weights of line, and they are not interchangeable. Using line where rule belongs is what left an earlier pass with no drawn structure at all.
Registration ticks at the corners of anything that claims to be on the grid, drawn in the strong line and inset one tick length, so they read as marks on the panel and not as a second border.
Four grounds and no more. Canvas is air; paper is where the argument happens; tint is reference material; night is the half of the promise that happens while nobody is watching.
The rhythm
- --rhythm-tick 8 · the tick length, and the smallest space there is
- --rhythm-gutter 12 · between two things in one grid
- --rhythm-step 20 · between a label and the thing it labels
- --rhythm-pocket 24 · the padding inside a card or a panel
- --rhythm-beat 56 · between two blocks inside one chapter
- --rhythm-inset 24 to 56 · the padding inside a sheet
- --rhythm-air-tight 40 to 56 · a chapter's own air, tight
- --rhythm-air 64 to 112 · a chapter's own air
- --rhythm-air-wide 88 to 144 · a chapter's own air, wide
Nine steps on an 8 px unit, each with exactly one job, drawn here at the width your window is giving them right now. The last four are fluid, one value carrying its own ramp from a phone to the width of the column, so a chapter states its air once rather than once per breakpoint. Until this existed the token file had no spacing in it at all: the page claimed one grid and every component chose its own numbers, which is a claim nothing could check.
Two hairlines run the full height of the content column, in the grid weight, behind everything: the cheapest statement of there is a column and everything is on it.
Everything registered to one grid. Nothing floats, nothing casts a shadow, nothing is rounded.
Motion
Motion shows something settling into place. It never decorates.
The tokens
- ease
- cubic-bezier(0.4, 0, 0.2, 1), the one curve.
- durations
- 150, 200, 300 and 500 ms. The last belongs to the one long scene.
- settle
- Opacity 0 to 1, four pixels up into rest. The one keyframe the site uses.
Settling
A thing that arrives moves four pixels into place and stops.
Pulsing, glowing, floating
Nothing breathes to say it is alive. A watch line with the time on it says it instead.
Looping
Nothing on the site loops, and a test refuses an infinite animation on the site layer.
The hero
The site's one animation. Seven acts; a click advances; left alone it advances itself and halts on the mark.
Reduced motion
Gets the finished state: the mark as a still, the passage set, the board drawn.
settle, once
- Marcela Rivas · WA · GMAIL · HUBSPOTHeld for you
- Northbound Ltda · HUBSPOT · DRIVE · CALHeld for you
- Support queue · WEB · DRIVE
The one keyframe, on the one curve, for 300 ms: opacity nought to one, four pixels up into rest. It runs when you reach it and then it is over. The whole block arrives as one thing, with no delay per row, because staggering by index is the page pacing a reader who did not ask to be paced. The control is this manual's, so the thing being documented can be looked at twice; a page making an argument does not get one.
The hero's dust
01001 10110 01101
loose
Unread. The glyph is a sample of a drifting noise field, so the 0s and 1s form bands that move through the storm instead of flickering in place. That is what raw data looks like: structured, and nobody has read it.
10110 01001 11010
held
Read, and filed where it belongs. The glyph stops changing the moment the particle reaches its system. Same ink as everything else on the drawing that has been dealt with.
01101 10011 00110
marked
Waiting for a person. The accent, in the one place the rule allows it on this canvas: the dust lying on a row the gate held, from the act the verdict is given and never before it.
The 0s and 1s in the hero are not texture. Each one carries a state, and the accent is a property of that state rather than a colour put on some of them to look considered. It appears once in the whole night, on the two rows the gate held, and never before the gate has answered. Drawing the mark's point out of accent dust in the last act was tried and taken out again: on the construction grid it is right, and on this hero the centre of the two corners is the middle of the headline, and the ink stays out of the copy. The glyph atlas used to hold two accent cells that were built on every theme change and never drawn once, which is what an unenforceable rule looks like in code.
Voice
Every external sentence draws from one source. These are the lines it draws most.
OnDuty is the brain your company does not have.
The spine
OnDuty connects to the systems you already run, remembers what matters about every customer, and works out what needs a person today. Agents propose. A gate decides. Nothing acts on a customer because a model felt confident.
Reusable lines
- Relief
- Someone should be keeping track of all this. Someone is.
- Trust
- Agents propose. A gate decides. Only a clean permit executes.
- Evidence
- An insight with no evidence is refused at the moment it is created.
- Restraint
- The model never does the math and never sees data it was not handed.
- Identity
- The same customer from three systems is one record, not three.
- Hold
- A hold is a person, not a timer.
Proof discipline
No number without a deployment
No percentage, no hours saved, no accuracy figure is published until it comes from an instrumented deployment, and then it appears with the deployment named.
The architecture argument
The model never does the math; retrieval and counting happen in code. Why answers hold up persuades more than asserting that they do.
The mechanism, shown
The seam, the contracts, the failure table: drawn rather than described.
Competitor tables
Ticks and crosses against named products nobody here has audited. The ladder answers the objection without naming a company.
Invented customers
No fake logos, no testimonials, no metrics. Nobody named on this site is real, and the hero says so.
The test on the site is a grep: no em or en dashes, no percentage as a product outcome, no raw palette colour. Each assertion exists because the claim was once written down, believed, and wrong.
Files
The mark in the seven files that exist, and the token file the site and the product read. Nothing else has been drawn.
- onduty-mark.svg
What
The mark on paper: ink ticks, vermilion point, 24 by 24.
For
Anywhere the ground is light.
- onduty-mark-on-dark.svg
What
The mark on the ink plate: paper ticks, lifted point.
For
Anywhere the ground is dark.
- onduty-mark-mono.svg
What
The mark in currentColor, point included.
For
One-colour contexts: print, embossing, a favicon that takes a single colour.
- onduty-lockup.svg
What
Mark and wordmark on one baseline, 132 by 32. The text relies on Chivo where it renders.
For
Headers and documents. Export a path version before sending it anywhere that is not this site.
- onduty-lockup-on-dark.svg
What
The lockup on the ink plate.
For
The same, on a dark ground.
- onduty-icon.svg
What
The mark on a 64 by 64 paper square with 4 units of clear space.
For
App icons and avatars that demand a square.
- onduty-icon-on-dark.svg
What
The icon on the ink plate.
For
The same, where the platform is dark.
- onduty-brand-tokens.css
What
Every colour, type, radius and motion token, with the reasoning as comments.
For
Any surface that has to match this one.
This page is the manual.
If something on it stops being true of the code, the page changes first.
On duty ·