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.五条原则决定本系统的每一次取舍。
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,不是提示气泡。
Guards are visible守卫可见
Blocked is a designed state. Every disabled action states its reason and the exact condition that clears it.“阻断”是被设计的状态。每个禁用操作都说明其原因与解除它的确切条件。
Honest gaps beat vanity metrics诚实缺口胜过虚荣指标
Known gaps are counted and coloured, never smoothed into a green 100%. Honesty reads as credibility to regulators.已知缺口被计数与着色,绝不被抹平成绿色 100%。对监管者而言,诚实即可信。
Redaction is a feature脱敏是一种能力
The boundary between internal and observer-safe is shown explicitly — a distinct hue, a decrypt motion, a server-side label.内部与观察者安全之间的边界被显式呈现 —— 独立色相、解密动效、服务端标签。
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.每个面板顶部左侧有一条渐隐的青色细线 —— 来自单一控制台光源。
3 · Token system — Color3 · Token 系统 —— 色彩
Deep blue-graphite surfaces, one electric-cyan signal, and a semantic set sharing lightness/chroma across hues.深蓝石墨表面、一种电青信号色,以及在不同色相间共享明度/彩度的语义色集。
Typography字体
Space Grotesk carries voice and headings; IBM Plex Mono carries every ID, code, timestamp, and field key.Space Grotesk 承载语气与标题;IBM Plex Mono 承载所有 ID、代码、时间戳与字段键。
Space · radius · elevation · motion tokens间距 · 圆角 · 高度 · 动效 token
xs · 3md · 8lg · 11e1e2 · panelglow · selected| token | value | use用途 |
|---|---|---|
| --t-fast | 120ms | hover, focus, tabs悬停、聚焦、标签 |
| --t | 180ms | selection, fades选中、淡入 |
| --t-slow | 260ms | drawers, decrypt sweep, bar grow抽屉、解密扫描、条形增长 |
| --ease | cubic-bezier(.2,.6,.2,1) | standard标准 |
| --ease-out | cubic-bezier(.16,1,.3,1) | entrances入场 |
4 · Component system4 · 组件系统
Every component below is the exact class used in the live screens.以下每个组件都是实际页面所用的同一套类。
Guard: reviewer_endorsement is required.
Cleared: reviewer_endorsement recorded.
severe_incident_security_impact
RCE weakens confidentiality and integrity. Evidence refs: TI-001, LAB-042.RCE 削弱机密性与完整性。证据引用:TI-001、LAB-042。
Decision coverage
78%
reviewer + rule-trace
Evidence sufficiency
61%
receipt + timestamp honesty
SLA risk
high
T0 honesty retained
| market | product | versions | devices | path |
|---|---|---|---|---|
| FR | NetShield Edge | 2.4.1–2.4.3 | 52 | portal rehearsal |
| IT | Gateway Relay | 1.9.0 | 31 | metadata gap |
ReportabilityDecision DEC-001 decided
L2 met; L1 unknown; L3 not_met.
PortalReceiptEvidence — received_registered
Registration only, not acceptance.
↑ 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。
hover me悬停试试
Selected state选中状态
180ms: an accent edge-bar grows and a glow ring appears. Selection is unmistakable.180ms:青色边条生长,辉光环出现。选中状态明确无误。
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)。点击两张卡片试试。