Case 05 · Brand identity
A knight that
keeps watch.
The identity for WPress Sentinel, our WordPress security platform: a knight on a blue-black console, one blue that means act, one bronze that never does, and status colours that only ever report a state — codified as a kit the plugin, the scanner and the website all build from.
- 01 // Role
- Strategy · Identity · Design system
- 02 // Deliverable
- Design kit — tokens and rules
- 03 // Year
- 2026
- 04 // In use
- presssentinel.com · the plugin admin
A The brief
Security tools sell fear: red alerts, flashing shields, warnings for things nobody checked. That is the opposite of what Sentinel promises. The brand had to feel calm, watchful and exact — trustworthy enough to be handed the keys to a live site.
A.2 What it had to do
- 01A guardian, not an alarm — vigilance without panic
- 02One colour for action, so a click is never in doubt
- 03Status colours that report states and do nothing else
- 04The marketing site built as the product, so it never over-promises
B · The kit
Calm by design.
Every rule in the kit exists to keep the console calm and exact. Try them: swap the button to bronze, flatten the surfaces, turn the status colours into decoration.
01 — Type · two faces
Monitor · Protect · Fix · Verify
Know your site is safe. Then let it fix itself.
Space Grotesk heads, in tight tracking
A free 36-point scan shows what an attacker sees. The plugin then closes every gap from the inside.
Inter carries every word of UI · bronze caps for eyebrows
02 — Blue means act
The one interactive colour. On hover it lightens and lifts a pixel — nothing else on the page is blue.
On brand03 — A ladder, one shadow
04 — Status is vocabulary
- Core file integrityPassing
- 2 plugin updatesWarning
- XML-RPC exposedFailed
- Full scanRunning
C · Identity system
From idea to identity.
The knight on its construction grid, the palette and the type — one kit the plugin, the scanner and presssentinel.com all build from. Pick a colour to see the mark in it.
Colour
Typography
Aa Display
Aa Text — Inter
Monitor · Protect · Fix · Verify
D · The rules
Six rules, no exceptions.
- 01Blue means act
- Sentinel blue is the one interactive colour — buttons, links, focus, the active nav. Nothing else is blue.
- 02Bronze never does
- The warm note, taken from the knight’s reticle: eyebrows, HUD corners, badge rims. Never a fill, never a link.
- 03Status is vocabulary
- Ok, warn, bad and info appear only where they report a state. Green means passing — never decoration.
- 04Two faces
- Space Grotesk heads the page in tight tracking; Inter carries every word of UI at console density. Both are bundled.
- 05Depth from a surface ladder
- Ground, surface, raised, top — plus 1px hairlines and one soft card shadow. Panels on a desk, not floating tiles.
- 06Only objects get cards
- 12px cards, 8px controls, 20px pills. Sections are never boxed, and large panels don’t hover-animate.
E · Engineering
How it’s built.
- 01
The kit is code
One machine-readable design file holds every colour, type, radius, spacing and component token — with the reasoning behind each rule.
- 02
Copied, not imitated
The website’s tokens are copied verbatim from the plugin, so the console visitors see is the console they install.
- 03
Two drawings of the knight
A full-colour emblem for the brand, and a single-colour line drawing for interfaces, small sizes and any colourway.
- 04
Light on the hardware
Fonts are bundled, not fetched from a CDN, and there are no blurred overlays on scrolling pages — they pin the GPU on older machines.
Stack
F · Impact
By the numbers.
- 1
- Interactive colour — blue, nothing else
- 1
- Warm note — bronze, never clickable
- 4
- Status colours, used only to report
- 2
- Typefaces, both bundled