K00 / COVER & INDEX
Calm is a
security feature.
WARD is a UI kit for SOCs, incident responders, pentesters, compliance consultants and managed IT providers. Quiet, precise interfaces where noise resolves into signal, time is always present, evidence is traceable and help is one tap away.
01 · TOKENS
Switch themes withdata-theme. Rebrand by overriding 8 semantic tokens.02 · COMPOSE
Demo pages use kit components only. No one-off styles.03 · ANNOTATE
Every demo has a conversion-annotations toggle in its WARD pill.K02 / COLOR & TOKENS
Neutral on purpose, so the signal stands out.
Most of the interface is graphite. UV marks the revealed signal and your next step. Emergency red is reserved for the Emergency Lane and critical states, never decoration.
TOKEN ARCHITECTURE
PRIMITIVE
SEMANTIC · themed
COMPONENT
PRIMITIVES · GRAPHITE, UV, EMERGENCY
-
graphite-950
#0A0D10 -
graphite-900
#11161B -
graphite-850
#182028 -
graphite-800
#1F2932 -
graphite-600
#434C54 -
graphite-500
#5B646D -
graphite-400
#7D8791 -
graphite-300
#A3ADB6 -
graphite-100
#E6EAED -
paper-50
#F3F4F2 -
uv-500
#5B4BFF -
uv-300
#8B7DFF -
red-600
#C62A2F -
red-300
#FF8A8D
SEMANTIC PAIRS · CONTRAST (computed)
WCAG 2.2: AA ≥ 4.5, AAA ≥ 7, large/UI ≥ 3. Body text targets AAA.
| PAIR | OPS | RATIO | AUDIT | RATIO |
|---|---|---|---|---|
| text / canvas | Aa #E6EAED | 16.10 AAA | Aa #0D1114 | 17.19 AAA |
| text-2 / canvas | Aa #A3ADB6 | 8.54 AAA | Aa #434C54 | 7.93 AAA |
| text-3 / canvas | Aa #7D8791 | 5.33 AA | Aa #5B646D | 5.46 AA |
| text / surface-1 | Aa #E6EAED | 15.03 AAA | Aa #0D1114 | 18.96 AAA |
| text-2 / surface-2 | Aa #A3ADB6 | 7.22 AAA | Aa #434C54 | 7.30 AAA |
| on-action / action | Aa #0A0D10 | 6.01 AA | Aa #FFFFFF | 5.39 AA |
| action / canvas (link) | Aa #8B7DFF | 6.01 AA | Aa #5B4BFF | 4.89 AA |
| white / emergency | Aa #FFFFFF | 5.57 AA | Aa #FFFFFF | 5.57 AA |
| emergency-text / canvas | Aa #FF8A8D | 8.60 AAA | Aa #A8232A | 6.48 AA |
SEVERITY · CVSS QUALITATIVE
- None
- Low
- Medium
- High
- Critical
Always color + diamond + label. Only Critical uses red.
TLP 2.0 · FIRST OFFICIAL COLORS
- TLP:REDNamed recipients only
- TLP:AMBER+STRICTRecipient organization only
- TLP:AMBEROrganization and its clients
- TLP:GREENWithin the community
- TLP:CLEARNo restriction
Labels on black background per TLP 2.0, in both themes.
DATA VIZ · COLORBLIND-SAFE
Categorical (8, Okabe–Ito derived) · Sequential UV · Diverging teal ↔ amber. Never red below Critical.
THEMING · SAME COMPONENT, THREE TOKEN SETS
The partner theme overrides 8 semantic tokens only (proof for D12 white-labeling).
All quiet.
Two items need your review.
All quiet.
Two items need your review.
All quiet.
Two items need your review.
K03 / TYPOGRAPHY & NOTATION
Two voices. One family.
Chivo carries voice and interface. Chivo Mono is the second voice: logs, timestamps, CVE IDs, hashes and hosts. Both SIL OFL, self-hosted in production (GDPR). Tabular numerals everywhere data appears.
display-xl
clamp(56px, 9vw, 140px) / 0.9 · 300 · −4.5%
Calm when it matters.
display
clamp(36px, 4.6vw, 64px) / 1.02 · 300
We watch. You work.
heading-l
clamp(26px, 2.4vw, 32px) / 1.15 · 400
Ransomware contained in 47 minutes
heading-m
22px / 1.3 · 400
What happens in the first hour
body-l
18px / 1.6 · 400
A 24/7 SOC that turns billions of events into the few signals that matter.
body
16px / 1.6 · 400 · min size
Disconnect affected systems from the network without powering them off.
label
14px / 1.4 · 500
Phone number for callback
mono
15px / 1.5 · 500 · tabular
T+00:04:12 host-17.example.com 192.0.2.17
mono-caption
12px / 1.5 · 400 · +8% caps
ILLUSTRATIVE · Q2 2026 · SOURCE: KEEL SOC
NOTATION
T+ timestamp
T+00:04:12
ISO 8601 with zone
2026-09-24 03:12 UTC
CVSS with version
CVSS 4.0 · 9.3 Critical
Response metrics
MTTD 00:04 · MTTR 00:19
Truncated hash
sha256 9f86d0…0a08
Host
host-17.example.com
IP (doc ranges only)
203.0.113.42
Placeholder CVE
CVE-2026-XXXXX
K07 / ELEMENTS · CORE SET
Every element, every state.
BUTTONS · VARIANT × STATE
TEXT INPUT · STATES
SEARCH · CVE-ID DETECTION (live)
SELECTION CONTROLS (live)
SECURITY NOTATION ELEMENTS
SOC STATUS INDICATOR
SOC staffed · UTC Degraded · portal exports delayed Outage · status.example.comT+ TIMESTAMP · CVE · HOST
HASH WITH COPY (live)
REDACTION BAR (click)
Screen readers get the real text or an explicit “redacted” label.VERIFICATION TICK
Verified · 2026-09-24 03:12 UTCEMERGENCY LANE · HEADER ELEMENT
Under attack? +49 431 555 0000CERTIFICATION BADGES · PLACEHOLDERS
PROGRESS · KEYBOARD
DENSITY · LOG TABLE (Calm)
Calm for marketing, Ops for portal views. Toggle above.
| SEVERITY | TIME (UTC) | HOST | DETECTION | STATUS |
|---|---|---|---|---|
| High | 2026-09-24 03:11:52 | host-17.example.com | Credential dumping (LSASS access) | Contained |
| Medium | 2026-09-24 02:48:07 | 198.51.100.24 | Impossible travel sign-in | Triaging |
| Low | 2026-09-24 02:30:19 | mail-gw.example.com | Suspicious attachment quarantined | Resolved |
| Critical | 2026-09-24 01:02:44 | fs-02.example.com | Mass file rename pattern | Contained |
MORE INPUTS & FEEDBACK
SELECT
DATE & TIME WITH TIME ZONE
SLIDER · live
SECURE FILE UPLOAD · live
Encrypted in transit and at rest · max 200 MB · malware-scanned · auto-deleted after 30 daysFILTER CHIPS · TAGS
TOOLTIP · hover or focus
Mean time to respond: first signal to containment. Median, Q2 2026, illustrative.NOISE-TO-SIGNAL LOADER
SKELETON · DIVIDERS
See also: K08 Components (header, mega menu, overlays, forms) · K04 density · K06 motion demos.