01
The idea
Say the specific thing.
Every vendor in this category says "privacy-first". The word is worth nothing. Itzal's entire position is that it can state precisely where the boundary sits and let you check.
That principle governs the design as much as the copy: a claim gets a number, a mechanism or a named limit, or it doesn't get made. The brand's job is to look like something that would tell you the truth.
The one sentence everything ladders up to — Itzal detects sensitive data in AI prompts entirely on the employee's device, and sends only a redacted event record. The raw content never crosses the network boundary.
02
The mark
A square, half redacted.
Itzal is Basque for shadow. The mark is a field with its lower half blacked out — the redaction itself, drawn. It is not a shield, not a lock, not an abstract swoosh, and it should never acquire a gradient.
Clear space on all sides is the height of the filled bar. Minimum size is
16 px; below that the bar closes up and it reads as a solid square.
The mark is always a single flat colour — --ink on light
grounds, --band-ink on the band. Never two-tone.
The wordmark sets in IBM Plex Mono 500 at 0.18em tracking, uppercase. It is never set in Archivo, and never in sentence case.
03
Colour
Twelve values. No others.
Swatches below render from the live token, so they follow whichever theme you are reading in. Both values are printed underneath: light first, dark second. Grounds are cool and never pure white — a white page under a security product reads as a slide deck.
Grounds
Type & line
Seal — petrol
Raw — cherry
04
The two-colour rule
Petrol and cherry mean things.
This is the only convention in the system that is load-bearing, and the only one that can actually mislead a customer if broken. Across the product, the docs and the site, the two accents carry a fixed meaning.
Petrol — sealed
Redacted. Safe to transmit. Past the boundary and inspected.
Used for: the event record, the trust boundary line, links, ticks, micro-labels, the band, anything confirmed.
Cherry — raw
Raw sensitive data. The device boundary. An uncovered surface.
Used for: the masked value inside a snippet, the device zone, coverage gaps, anything stubbed or not yet true.
Never
Cherry as a highlight, a hover, a "new" badge, or a second accent because a layout felt flat.
It is the only way the product marks a gap. Spend it on decoration and it stops working as a warning.
Never
A third accent colour, a gradient, or a success-green.
Petrol already means "confirmed". Adding green splits that meaning across two colours and neither survives.
05
Typography
Three families, one job each.
All three are self-hosted as latin-subset woff2 — 95 KB total, four files, no third-party request. A privacy vendor calling a font CDN on every page load is a credibility bug before it is a performance one.
Archivo — the one loud voice
IBM Plex Sans carries every sentence a person actually reads. Set at 1 rem / 1.62 for body and 1.1875 rem / 1.55 for a lede, with a measure that never exceeds 60 characters.
IBM Plex Mono — labels, data, controls
| Role | Family | Size | Notes |
|---|---|---|---|
| .display | Archivo 700 | clamp(2.6–5.25rem) | lh 0.95 · once per page |
| .h2 | Archivo 700 | clamp(1.85–2.9rem) | lh 1.02 · max 18ch |
| .statement | Archivo 600 | clamp(1.4–2.05rem) | a sentence that carries a section alone |
| .h3 | Archivo 600 | 1.0625rem | cell and FAQ headings |
| .lede | Plex Sans 400 | clamp(1.06–1.19rem) | max 48ch |
| body | Plex Sans 400 | 1rem / 1.62 | max 60ch |
| .label | Plex Mono 500 | 0.6875rem | uppercase · 0.14em · leading rule · petrol |
| .btn | Plex Mono 500 | 0.75rem | uppercase · 0.10em |
06
Controls & surfaces
Sharp. Instruments, not pills.
Radius is capped at 2 px everywhere — buttons, panels, chips, wells. Rounded corners read as consumer software; this product is bought by people who read changelogs. Depth comes from a 1 px hairline and a ground shift, not from shadow.
Buttons
On the band
Labels, chips and wells
Section label
A chip states status and nothing else. It never carries a count, a brand name, or a call to action.
Code well
// masked value in cherry { "snippet": "ssn ***-**-6789" }
Wells are recessed, not dark slabs. Inside a tinted panel they lift to
--surface so they stay legible.
07
Voice
Short sentences. Checkable claims.
Write the way an engineer explains something to another engineer they respect: plainly, without hedging, and without selling. Admit limits early — it is the fastest way to be believed about everything else.
Write this
"The words themselves never leave the device — not to us, not to anyone."
Concrete, absolute, and falsifiable. Someone could test it.
Not this
"Best-in-class, privacy-first AI protection for the modern enterprise."
Nothing to quote, nothing to check, indistinguishable from six competitors.
Write this
"It does not scan file uploads, pasted images, coding assistants, or mobile."
Naming the gap is the single most trust-building sentence available to us.
Not this
"Comprehensive coverage across your entire AI surface area."
Unfalsifiable, and it will be contradicted by the first proof of concept.
Always
- British spelling; "organisation", "minimisation"
- Sentence case in headings — never Title Case
- A number, a mechanism, or a named limit behind each claim
- "Employee", not "user"; "your team", not "your workforce"
Never
- Fabricated logos, testimonials or customer counts
- Certification badges before certification
- Statistics without a linked, dated source
- Exclamation marks, emoji, or the word "revolutionary"
08
Motion
It moves to explain, never to decorate.
One easing curve, three durations. Every movement on the site either shows a sequence the reader needs to understand, or acknowledges something they just did. Nothing drifts, pulses, parallaxes or floats.
The hard rule: the page is complete and correct before any script
runs. Reveal states are applied only once the document marks
itself .js, so a crawler — or anyone with scripting off —
receives every word on first paint.
| Token | Value | Use |
|---|---|---|
| --ease | cubic-bezier(.22,.68,.3,1) | Everything. There is no second curve. |
| --t1 | 150ms | A state change you shouldn't notice: hover, focus, colour |
| --t2 | 320ms | An element arriving or leaving |
| --t3 | 620ms | A sequence playing: reveals, staggered groups |
Do
Stagger a group by 70 ms per child, to a maximum of four.
Past four the last item arrives late enough to feel broken.
Do
Give anything that loops a pause control, and stop it when it scrolls off screen.
Required by WCAG 2.2.2 for motion over five seconds, and it stops burning battery.
Never
Hide content behind an animation that JavaScript has to undo.
If the script fails, the page is blank. Reveal styles are scoped to
.js for exactly this reason.
Never
Ship a motion rule without checking prefers-reduced-motion.
A static hidden state is not an animation, so a blanket duration override will not rescue it. It needs its own reset.
09
Photography & video
Screens, not stock.
Every image on this site is a screen doing something real: the extension catching a paste, the console showing a week of events, an inline warning as an employee sees it. No stock photography, no people at laptops, no abstract network imagery, no 3D shields.
Every asset on the site is rendered from a source in
media/_src/ — an HTML page that links this same token file. A
screenshot therefore cannot drift from the design system: change a token,
re-render, and the images follow. Nothing is hand-mocked in a drawing tool.
| Slot | Ratio | Delivery | Budget |
|---|---|---|---|
| Overview — shipping today | 16 : 9 | Animated WebP, 1280 × 720, served through <picture> with a reduced-motion still | 265 KB |
| Overview — when recorded | 16 : 9 | MP4 (H.264) + WebM, poster frame, .vtt captions | ≤ 8 MB |
| Console screenshot | 16 : 10 | WebP + PNG fallback, shot in both themes | ≤ 250 KB |
| Step image | 16 : 10 | WebP + PNG fallback | ≤ 120 KB |
| Social / OG card | 1.91 : 1 | PNG, 1200 × 630, text legible at 300 px wide | ≤ 200 KB |
Never
A screenshot, recording or mockup containing real data from any real person or customer.
Invent every value, and say on screen that it is invented. A demo asset leaking a live record is precisely the failure this product sells against — it would end the company's credibility in one screenshot.
Never
A video that carries information available nowhere else, without captions and a text summary near it.
Answer engines do not watch video. Neither do a meaningful share of readers. Anything that matters belongs in the HTML as well.
Do
Write alt text that describes what is on the screen, not what the heading already said.
"The console showing violations grouped by framework, with counts and risk scores and no message content" — not "console screenshot".
Do
Set width, height and loading="lazy"
on every image, and preload="none" on video below the fold.
Intrinsic dimensions keep CLS under 0.05; a below-fold video that preloads will take the LCP budget with it.
Do
Serve an animated image through <picture> with a
media="(prefers-reduced-motion: reduce)" source pointing at a
still.
An animated WebP or GIF in a bare <img> cannot be paused
and ignores the preference entirely. The <picture> is the
only way to honour it.
The placeholder itself
What the asset should show
1600 × 1000 · WebP + PNG · invented data only
Dashed petrol, because it is a slot rather than a surface. It is meant to be deleted, never styled around and never shipped to production.
10
Using it
One file. No exceptions.
brand/tokens.css is the source of truth. This page and the
website both link it — so a swatch above is not a picture of the brand
colour, it is the brand colour.
No stylesheet downstream may declare a raw hex, a font stack, a radius or a section rhythm. If a value you need isn't a token, that is a conversation about the system, not a local override.
<link rel="stylesheet" href="/brand/tokens.css"> <link rel="stylesheet" href="/styles.css"> /* then, downstream */ .thing { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); font-family: var(--body); }
Dark mode redefines colour tokens only — never spacing, never type, never layout. A theme that changes more than colour is two designs to maintain, and one of them is always broken.