Design System / Evidence Console v1设计系统 / Evidence Console v1

ENISA SRP Readiness · visual systemENISA SRP 准备度 · 视觉系统

Evidence Console — an operational language for evidence-based compliance.Evidence Console —— 面向基于证据的合规的操作型语言。

A dark-first console built for regulators and CSIRTs: sharp, dense-but-breathable, and quietly high-tech. It treats every status, guard, and gap as a first-class signal — never a decoration.面向监管者与 CSIRT 的暗色优先控制台:锐利、密集而透气、内敛的高科技感。它把每一个状态、守卫与缺口都当作一等信号 —— 绝非装饰。

1 · Design principles1 · 设计原则

Five rules decide every trade-off in this system.五条原则决定本系统的每一次取舍。

01

Evidence over assertion证据先于断言

The interface shows why, not just what. Rule traces, proof lanes, and audit events are primary UI, not tooltips.界面展示“为什么”,而不仅是“是什么”。规则追踪、proof lane 与审计事件是主要 UI,不是提示气泡。

02

Guards are visible守卫可见

Blocked is a designed state. Every disabled action states its reason and the exact condition that clears it.“阻断”是被设计的状态。每个禁用操作都说明其原因与解除它的确切条件。

03

Honest gaps beat vanity metrics诚实缺口胜过虚荣指标

Known gaps are counted and coloured, never smoothed into a green 100%. Honesty reads as credibility to regulators.已知缺口被计数与着色,绝不被抹平成绿色 100%。对监管者而言,诚实即可信。

04

Redaction is a feature脱敏是一种能力

The boundary between internal and observer-safe is shown explicitly — a distinct hue, a decrypt motion, a server-side label.内部与观察者安全之间的边界被显式呈现 —— 独立色相、解密动效、服务端标签。

05

Dense, but breathable密集而透气

Operational density on an 8px grid. Mono carries data and structure; the sans carries voice. Nothing decorative earns space.8px 栅格上的操作型密度。等宽承载数据与结构;无衬线承载语气。装饰不占空间。

2 · Visual language board2 · 视觉语言板

Signature devices that make the console feel like one product, not a template.让控制台感觉像一个产品而非模板的标志性手法。

Corner-bracket reticles角括号准星

Featured panels carry targeting brackets — a tactical-display cue used sparingly.重点面板带准星括号 —— 节制使用的战术显示语汇。

Applied to hero signals and the Readiness Statement only.仅用于关键信号与准备度声明。

Luminous top hairline顶部发光细线

Every panel has a cyan hairline fading from its top-left — light from a single console source.每个面板顶部左侧有一条渐隐的青色细线 —— 来自单一控制台光源。

signalreportabletestinggapredacted
Behind everything: a faint 40px tactical grid + a single cyan vignette at top-right. Look at the page background.一切之后:极淡的 40px 战术栅格 + 右上角单一青色光晕。请观察页面背景。

3 · Token system — Color3 · Token 系统 —— 色彩

Deep blue-graphite surfaces, one electric-cyan signal, and a semantic set sharing lightness/chroma across hues.深蓝石墨表面、一种电青信号色,以及在不同色相间共享明度/彩度的语义色集。

Surfaces表面
voidpage base
surface-1panels
surface-2raised / hover
insetinput wells
Signal & semantic信号与语义
accent · cyansignal · primary · selected
okreportable · ready · pass
warnpending · testing · gap
dangerblocked · high risk
infonot_reportable · neutral
redactredaction boundary
text-hiheadings
text-midbody

Typography字体

Space Grotesk carries voice and headings; IBM Plex Mono carries every ID, code, timestamp, and field key.Space Grotesk 承载语气与标题;IBM Plex Mono 承载所有 ID、代码、时间戳与字段键。

Reportability decisionGrotesk 600 · clamp 28–42
Operational readinessGrotesk 600 · h2
Panel titleGrotesk 600 · 16
Body — evidence over assertion; guards stay visible.Grotesk 400 · 14
CRA-FR-20260901-01 · 2026-09-01T09:15:00ZPlex Mono 500 · 13 data
reviewer_endorsementPlex Mono · 11 · tracked label

Space · radius · elevation · motion tokens间距 · 圆角 · 高度 · 动效 token

Spacing — 8px base grid间距 —— 8px 基础栅格
--s1 · 4
--s2 · 8
--s4 · 16
--s6 · 24
--s7 · 32
--s9 · 48
Radius — sharp圆角 —— 锐利
xs · 3
md · 8
lg · 11
Elevation高度
e1
e2 · panel
glow · selected
Motion tokens动效 token
tokenvalueuse用途
--t-fast120mshover, focus, tabs悬停、聚焦、标签
--t180msselection, fades选中、淡入
--t-slow260msdrawers, decrypt sweep, bar grow抽屉、解密扫描、条形增长
--easecubic-bezier(.2,.6,.2,1)standard标准
--ease-outcubic-bezier(.16,1,.3,1)entrances入场

4 · Component system4 · 组件系统

Every component below is the exact class used in the live screens.以下每个组件都是实际页面所用的同一套类。

Status badges状态徽章
reportablenot_reportableneed_more_evidenceblockedsignalredactedneutral
Buttons & segmented states按钮与分段状态
reportablenot_reportable
Guard panels守卫面板
Case creation blockedCase 创建已阻断Only an endorsed reportable decision can create a formal Case.只有已背书的 reportable 判断才能创建正式 Case。
SLA honestyT0 stays anchored to decided_at; Case creation never resets the clock.T0 锚定 decided_at;Case 创建不重置时钟。

Guard: reviewer_endorsement is required.

Cleared: reviewer_endorsement recorded.

Evidence card · proof lane证据卡 · proof lane
L2

severe_incident_security_impact

RCE weakens confidentiality and integrity. Evidence refs: TI-001, LAB-042.RCE 削弱机密性与完整性。证据引用:TI-001、LAB-042。

met
Dashboard metrics仪表盘指标

Decision coverage

78%

reviewer + rule-trace

Evidence sufficiency

61%

receipt + timestamp honesty

SLA risk

high

T0 honesty retained

reportable
58%58
not_reportable
22%22
Tables表格
marketproductversionsdevicespath
FRNetShield Edge2.4.1–2.4.352portal rehearsal
ITGateway Relay1.9.031metadata gap
Timeline时间线

ReportabilityDecision DEC-001 decided

L2 met; L1 unknown; L3 not_met.

PortalReceiptEvidence — received_registered

Registration only, not acceptance.

Redaction comparison脱敏对比
Internal内部
customer_nameAlpine Robotics AG
Observer观察者
customer_name

↑ click the redacted token to run the decrypt reveal↑ 点击脱敏标记运行解密揭示

5 · Motion rules5 · 动效规则

Restrained and purposeful — motion confirms a state change, never entertains. All live below.克制且有目的 —— 动效确认状态变化,绝不娱乐。以下均为实时演示。

Hover悬停

120ms lift: border brightens, surface raises, accent glow. No movement larger than 3px.120ms 提升:边框变亮、表面抬升、青色辉光。位移不超过 3px。

L1

hover me悬停试试

unknown

Selected state选中状态

180ms: an accent edge-bar grows and a glow ring appears. Selection is unmistakable.180ms:青色边条生长,辉光环出现。选中状态明确无误。

optionselected

Guarded / blocked守卫 / 阻断

A single 360ms shake + red glow pulse when a guard rejects an action.守卫拒绝操作时触发一次 360ms 抖动 + 红色辉光脉冲。

Redaction reveal脱敏揭示

A 260ms cyan scan sweep decrypts a token from hatched cipher to plain text.260ms 青色扫描将标记从斜纹密文解密为明文。

Dashboard drilldown仪表盘下钻

Selecting a metric cross-fades the gap list (180ms) and re-grows the bars (260ms). Try the two cards.选择指标会交叉淡入缺口列表(180ms)并重新生长条形(260ms)。点击两张卡片试试。

T0 honesty retained24h / 72h / Final measured from awareness, not Case creation.