Calm is a feature.
Default to quiet. When everything is calm, the signal stands out.
K01 / PRINCIPLES
Calm in 3 seconds. Trusted in 30. Reachable in one tap.
Time is always present.
Every event has a timestamp with zone. Stories are told on T+ time.
Evidence is traceable.
Every number carries its source, period and "illustrative" when it is.
Never sell with fear.
No fake alerts, countdowns or scare banners. Confidence converts better than panic.
Help is always one tap away.
The Emergency Lane is in every header and never asks for more than a phone number.
Two tempos, never mixed.
Emergency works in seconds. Planned projects are consultative and multi-step.
Color is never alone.
Severity, TLP and status always pair color with a shape and a label.
Motion is optional.
Reduced-motion fallback everywhere, pause controls, no flashing.
Discretion is accessible.
Redaction is visual only; assistive tech gets the text or an explicit label.
K04 / LAYOUT, SURFACES & DENSITY
Expansive where you read. Dense where you work.
GRID · 12 / 8 / 4 COLUMNS AT 1440 / 1024 / 390
1440
12 col · 24 gutter · 60 margin
1024
8 col · 20 gutter · 40 margin
390
4 col · 16 gutter · 20 margin
SPACING · 4-PT SCALE
- space-4
- space-8
- space-12
- space-16
- space-24
- space-32
- space-48
- space-64
- space-80
- space-96
- space-128
- space-160
GEOMETRY · RADIUS & HAIRLINES
- radius-2
chips, tags - radius-4
buttons, inputs - radius-8
cards, panels - pill
lane, filters
1 px hairlines at 9% and 17% ink. No drop shadows on surfaces; elevation is expressed by surface step (canvas → surface-1 → surface-2).
CONSOLE PANEL · ANATOMY
① Detections · 24 h
② Live
③ 03:12 UTC
④ Body · 16 px padding · content in sans, data in mono
⑤ Source · illustrative⑥ Action
- Title, 12 px mono, ink
- Status dot + label, never color alone
- Timestamp with zone, always
- Body: 16 px (Calm) or 12 px (Ops) padding
- Footer: source and date for any data
- One tertiary action max
DENSITY MODES
| TOKEN | CALM · marketing | OPS · portal |
|---|---|---|
| row height | 52 px | 32–36 px |
| panel padding | 24–28 px | 12–16 px |
| control height | 44–52 px | 32–36 px |
| body size | 16–18 px | 13–14 px |
| section spacing | 88–160 px | 16–24 px |
| touch target | ≥ 44 px | ≥ 44 px on touch |
K05 / ICONOGRAPHY & IMAGERY
Line, not lock. People, not hoodies.
48 custom icons on a 24 px grid, 1.5 px stroke, 2 px keyline padding, round joins. Shown here as a spec grid; production glyphs to be drawn by the icon designer against these slots. Locks appear only for actual lock states.
- endpoint
- server
- cloud
- network
- firewall
- identity
- key
- MFA
- suspicious email
- web app
- API
- OT/ICS
- vulnerability
- patch
- backup
- restore
- logs
- alert
- incident
- forensics
- containment
- SOC
- analyst
- hotline
- 24/7
- report
- policy
- compliance
- audit
- certificate
- training
- phishing sim
- supply chain
- third-party
- insurance
- severity
- TLP
- status
- redact
- download
- share
- lock (state)
- search
- filter
- calendar
- time zone
- verify
PHOTO DIRECTION · DUOTONE PLACEHOLDERS
PHOTO · duotone · analysts at SOC desk, dawn light
PHOTO · duotone · consultant and client at table, daylight
PHOTO · duotone · rack detail, cable management, cool light
PHOTO · duotone · team handover, standing, candid
DO
Real analysts in well-lit rooms · client conversations · data-center details · diverse teams · honest light · line diagrams, topologies, redacted documents.
DON'T
Hooded hackers · code rain · skulls · decorative padlocks and shields · glowing globes with attack arcs · glitch · fingerprints · binary.
K06 / MOTION
Motion never simulates panic.
Transform and opacity only. Native scrolling. Full reduced-motion fallback. Anything continuous for more than 5 s gets a visible pause control. Nothing flashes more than three times per second.
| DURATION | USE |
|---|---|
| 100 ms | Hover, press feedback |
| 180 ms | Toggles, chips, focus |
| 280 ms | Verify scan, panels, drawers |
| 420 ms | Section reveals, path drawing |
| 700 ms | Redaction lift, counters, Signal Filter stages |
steady
cubic-bezier(.45, 0, .55, 1) · even, controlled · UI state changes
resolve
cubic-bezier(.16, 1, .3, 1) · noise settling into signal · reveals
Motion budget
Marketing: calm, expressive · Utility: quiet · Emergency (D03): none · Portal: functional only
LIVE CATALOG
Verify, then trust · 280 ms
✓Verified
ISO/IEC 27001 · valid to 2028-03
Log stream halts on signal
- 03:11:46 file write C:\Temp\upd.tmp
- 03:11:47 dns query cdn.example.com
- 03:11:48 proc start powershell.exe -enc …
- 03:11:49 net 192.0.2.17 → 198.51.100.9:445
- 03:11:50 auth ok user=svc-backup
- 03:11:51 proc start rundll32.exe
- 03:11:52 lsass.exe read by rundll32.exe ← T1003.001
- 03:11:52 [halted by analyst · signal isolated]
Redaction reveal · 700 ms resolve
Client: Nordhafen Werke
Screen readers: real text, or aria-label="redacted".
SOC funnel counters · 700 ms, once
Events
2.18 bn
Alerts
1,284
Incidents
3
Attack path · control breaks the chain
Phish
Loader
Creds
✕ Spread
Signal Filter · see D01 hero
Canvas field of log fragments filtered in four stages: events → alerts → incidents → contained. Pause control, reduced-motion shows the final frame, canvas is aria-hidden with a text panel alternative.
Open D01 →