Styleguide · v5 · October 2026
How a deprint screen, button, table and chart are built.
Logo
Wordmark in Archivo Semibold, width 112, tracked tight, one colour, and the only place Archivo appears. The mark is Arc: an inner ring with a pupil and an outer ring with one break, one stroke weight. The same drawing is the mascot.
Lockup: mark then wordmark. The rings read as a tree ring, a fingerprint and an eye at once. Clearspace equals the inner ring's diameter. Minimum mark size 16px on screen, 4mm in print.
Colour
Colour is named by role, not hue. One accent for anything verified or yours. One third-party colour for anything that belongs to someone else. No red anywhere. Five schemes fill those roles; Cyanotype is the default.
Showing Cyanotype: Prussian blue on cool paper, sepia for third parties. Switch schemes with the control at the bottom right of any page.
| Token | Light | Dark | Use |
|---|---|---|---|
| --paper | #EEF1F4 | #0B1220 | Ground. |
| --paper-2 | #E3E8ED | #111A2B | Raised ground: table heads, wells, hover. |
| --paper-3 | #D5DCE3 | #18243A | Tracks, empty chart segments. |
| --line | #C6CED7 | #22304A | Every hairline and border. |
| --ink | #0C1626 | #E8EDF5 | Text, the mark, primary buttons. |
| --ink-2 | #4F5B6B | #94A1B5 | Secondary text, icons. |
| --ink-3 | #8590A0 | #66738A | Tertiary text, placeholders. |
| --accent | #2A62C9 | #6FA0FF | Verified, yours. One per view. |
| --accent-ink | #1D4A9E | #8DB4FF | The accent as text on paper. |
| --accent-soft | #DCE6F7 | #14244A | Fill behind a verified pill. |
| --third | #B08A5B | #B08A5B | Someone else's: other signers, other marks. |
| --third-ink | #6B4E28 | #D4B58A | Third-party colour as text. |
| --third-soft | #F1E8DA | #2A2114 | Fill behind a someone-else's pill. |
Chart palette · validated for colour-vision deficiency in both themes
Categorical hues are assigned in fixed order and never cycled: the same entity keeps the same colour across every chart. Past four series we fold to "other" or split into small multiples. Status is never a chart colour.
Type
One creative sans says everything: headings, text and interface. A wide mono is for anything read from a file, and a dot face is for the timer. Headings are set at regular weight and tight tracking so they read as something said, not announced. No italics, ever.
Showing Parkinsans. Round, built on the same circles as Arc. The default. Five type sets can be tried with the control at the bottom right of any page.
| Token | Value | Use |
|---|---|---|
| --fs-display | clamp(38px, 5.4vw, 68px) | Home headline only |
| --fs-h1 | clamp(36px, 5vw, 60px) | Page titles |
| --fs-h2 | clamp(28px, 3.6vw, 42px) | Section titles |
| --fs-h3 | 24px | Card and list titles |
| --fs-h4 | 16px | Interface weight, labels above content |
| --fs-lede | clamp(18px, 1.7vw, 21px) | The sentence under a title |
| --fs-prose | 16.5px | Articles, 66 characters wide |
| --fs-body | 16px | Everything else that is said |
| --fs-small | 15px | Supporting text in cards |
| --fs-ui | 14.5px | Buttons, menus, table cells |
| --fs-caption | 13.5px | Figure notes |
| --fs-label | 11px | Mono uppercase eyebrows, +10% tracking |
Space and shape
A 4px base. Radii: 2px for cells, 8px for inputs, 14px for cards, 18px for frames, full round for pills and the mark. One column, 1120px, with a 66-character measure for reading.
| Token | Value | Use |
|---|---|---|
| --sp-1 … --sp-8 | 4 8 12 16 24 32 48 64 | Spacing on a 4px base |
| --sp-section | clamp(56px, 8vw, 104px) | Vertical rhythm between sections |
| --max | 1120px | The one column |
| --measure | 66ch | Reading width |
| --gutter | clamp(16px, 4vw, 40px) | Side padding |
| --r-cell / input / card / frame / pill | 2 / 8 / 14 / 18 / 999 | Radii |
| --shadow-float | 0 8px 24px rgb(0 0 0 / .18) | Toasts and menus only |
Motion
Develop, don't decorate. Content comes up the way a print does in a tray: in place, from nothing to full, in reading order. Every motion has a cause you could name, and nothing loops unless work is running.
| Cause | What moves | How | Where |
|---|---|---|---|
| You arrived | Content develops in place, in reading order | Fades up and rises 12px · 520ms · neighbours 60ms apart | Every section, list row and figure |
| You changed page | The page fades up | Opacity only · 240ms | Every route |
| You acted | The control answers | Gives 1px in 80ms · colour in 120ms · arrows lean 4px | Buttons, links, rows |
| The file changed | The new state lands | Scales from 0.9 with a small overshoot · 240ms | State pills, prices, the seal on a photograph |
| A file became yours | Arc verifies | Ring snaps a quarter turn, pupil takes the accent · 1100ms | After signing |
| Work is running | Something travels or turns until it is done | Scan line 2600ms a pass · Arc's ring turns · the pill dot breathes | Upload detail, Arc in the nav, state pills |
| Data arrived | Marks grow from their baseline | Bars from zero, lines drawn left to right, dots land | Every chart |
| Something small came or went | It rises in, sinks out | 8px · 240ms | Menus, toasts, table views, form errors |
| You changed the scheme | Colours cross-fade | 240ms, linear | Everything |
| Nothing is happening | Almost nothing moves | The field drifts at a fifth of real time · Arc blinks | Home, sign-in |
Develop · a group, in reading order
Arc is the status light. It looks where you look and blinks. In the nav its ring turns while work runs, and its pupil takes the accent when a file verifies.
Six poses cover every state the product has. Never a speech bubble, never a second pupil, never beside an error.
The outer ring draws its arc, the inner ring follows, the pupil lands last.
first sign-in · signing completeThe mark presses onto a surface and lifts away, leaving a faint impression.
the name, acted out · export completeThe outer ring snaps a quarter turn and the pupil takes the accent. The only time the mark takes colour.
credential valid| Token | Value | For |
|---|---|---|
| --t-press | 80ms | A control giving under the finger |
| --t-quick | 120ms | Hover, colour, a pointer answer |
| --t-base | 240ms | Small things entering or leaving: menus, toasts, pages, a state landing |
| --t-develop | 520ms | Content developing into view |
| --t-ceremony | 1100ms | The Seal and the Verify: a file became yours |
| --t-scan | 2600ms | One pass of the scan line |
| --stagger | 60ms | Between neighbours, in reading order |
| --d-micro / --d-ui / --d-develop | 4 / 8 / 12px | How far a response, a small thing and content travel |
| --ease-out | cubic-bezier(.2,.7,.2,1) | Arriving: fast, then settling |
| --ease-in | cubic-bezier(.5,0,.9,.4) | Leaving: slow, then gone |
| --ease-inout | cubic-bezier(.45,0,.2,1) | Travelling: the scan, a ring drawing |
| --ease-pop | cubic-bezier(.3,1.5,.5,1) | Landing: a result, the pupil |
Never
Sliding in from a side, parallax, or bounce. The landing overshoot is the only spring, and only for a result.
Never
Motion on hover over the background. The field answers one thing: a file in the air over the drop zone.
Never
A loop with no work behind it. If it turns, sweeps or breathes, something is running.
Always
Reduced motion means present. Everything is simply there, the field holds one frame, and nothing is hidden waiting to animate.
Icons
Phosphor, Thin at 28px and up, Light below. Always in secondary ink, never in primary, so icons sit behind the text rather than in front of it. Never inside a text button.
Sizes: 14px in rows and menus, 18px in icon buttons, 28px as section glyphs. Icons never take the accent unless they mark a verified state.
Buttons
Three kinds, seven states. Primary takes the accent on hover. Loading hides the label and spins an accent arc. Success is the accent with the verb in the past tense. One primary per view.
| state | primary | secondary | quiet |
|---|---|---|---|
| default | |||
| hover | |||
| active | |||
| focus | |||
| disabled | |||
| loading | never | ||
| success | never | ||
| sizes | |||
States
A file is in one of six states. Two are transient. Of the four results, only verified takes the accent. Anything about someone else takes the third-party colour. Tampered is solid secondary ink, the heaviest thing in the system, and still not red.
Waiting its turn. Dotted outline.
Being read now. The dot breathes.
Credential valid, mark present, signer is you. Includes a manifest recovered through your mark.
Nothing to read. The most common result on the open web. Calm, not an error.
A valid credential or watermark from another party, SynthID included. Reported, never removed.
Credential present but the pixel hash no longer matches. Plain words, never red.
Tags, badges, toasts, notes
A note is for honest caveats about the build or the data: mono, dashed, never coloured.
Form controls
Inputs are set in the mono face because what you type becomes data. Segmented controls for a choice of two to five. A range with a dot-matrix readout. Checkboxes with a title and a consequence.
Figures
When the content is a number, show the number. One hero figure per view. Tiles for the rest, with the source in mono under each.
Charts
Thin marks, one axis, hairline grid, a legend for two or more series, direct labels only where the story is. Hover any mark for the exact value. Every chart has a table view. Text never wears a series colour.
The first two charts use reported figures. The rest are layout specimens with illustrative numbers and are labelled as such.
* projection. Illustrative layout data, not a measurement.
Do
Small multiples when two measures have different scales.
Don't
Dual axes. Two y-scales let any two lines be made to cross anywhere.
Do
Fixed hue order. Ours is always first, in the accent hue.
Don't
Cycle a palette. Removing a series must never repaint the survivors.
Tables
A matrix for qualitative comparisons, with coloured cells and words in them. A numeric table with right-aligned tabular figures. Both scroll inside their own frame on small screens.
| Method | Survives JPEG | Survives crop | Survives regeneration | Payload (bits) |
|---|---|---|---|---|
| C2PA manifest alone | stripped | lost | lost | — |
| TrustMark | yes | yes | partial | ~100 |
| Tree-Ring | yes | yes | mostly | 0 |
TableWords in every cell, so colour is never the only channel. A dash means not reported, never a zero.
Text furniture
Timeline rows with dot-matrix dates, a callout for the one sentence that matters, a pull quote, citations as superscript numbers. Emphasis is weight or colour, never italics.
You need both. A credential for meaning, a watermark to find the credential again.
Provenance is a statement, not a lock.deprint principle 02
SynthID-Image has watermarked more than ten billion images and video frames across Google services.1
Layouts
Four page shapes cover everything we publish. The accent shows where the eye lands first. Breakpoints at 600, 800 and 860px; below them every grid becomes one column.
Section name stays put on the left while the detail scrolls. About, pricing, this page.
A single 66-character column with figures breaking out to full width. Research.
The photograph on the left, what it says on the right. Upload detail.
A table or list gets the whole column and scrolls inside its frame. Uploads.
Voice
deprint speaks like a good lab technician. Precise, calm, on the maker's side. It never sells fear and never promises a lock it can't deliver.
We say
"Signed by you. Found again after the platform stripped it."
Specific, past tense, about something that happened to the file.
We don't say
"Military-grade protection against AI theft."
Fear, superlatives, and a promise provenance cannot keep.
We say
"No credential found. This file can't tell you where it came from."
Honest about absence. Absence is information too.
We don't say
"Clean this image in one click."
We never describe removing anyone else's mark as cleaning.
Rules
Few, and firm.