Doctrine 07

UI Diagrams & Industrial Artifact Doctrine

Diagrams are not decoration. In the Plathera Industrial System, diagrams prove mechanism, evidence, and control.

Core Rule

Use prose for stakes and diagrams for mechanism. A page may use prose to name the consequence; it must use a schematic to explain how the consequence formed.

Which drawing changed which package?
Which constraint touches which milestone?
Which RFI affects which purchase order?
Which decision has evidence?
Which review is defensible?

APPROVED RULE

Would this survive a gate review?

If a diagram cannot make a relationship, workflow, chain of custody, or decision more defensible, it is decoration.

Diagrams Required For Mechanism

Mechanism	Required visual treatment
Propagation of implication	Event log, cascade, or timeline showing how state moved across systems.
Project graph	Node schematic showing domains, artifacts, relationships, and active nodes.
Agent layer	Pipeline rows that show input, agent, and named output.
Operating layer position	Program stack between fragmented source systems and decision outputs.
Evidence-backed decision	Trace card with decision, evidence, owner, date, package, source, and status.
Review readiness	Gate packet or register showing constraints, impact, evidence links, and decisions.
Named outputs	Diagram how packets, briefs, traces, registers, and graph objects relate.

Industrial Proof Language

Brand object	Strategic role	Implementation cue
Controlled project record	Shows that Plathera cares about defensible truth.	Framed panel, source/date/status metadata, restrained hierarchy.
Ruled grid, stamp, label	Creates hierarchy without decorative accent dependence.	Mono labels, square rules, fixed columns, concise captions.
Signal amber	Marks evidence, current state, active nodes, table headers, and short emphasis.	Use semantically; never as generic decoration.
Industrial schematic	Explains relationships and mechanism.	HTML/CSS/SVG boxes, hairline connectors, no soft SaaS styling.
Gate packet / register / trace card	Makes the product feel usable before a real review.	Dense but governed surfaces with status, impact, and evidence fields.
Physical evidence / project artifact	Keeps the brand close to capital-delivery work.	Use only when materiality helps: packet, drawing board, laptop, site surface.

Approved Schematic Types

Type	Use when	Hard implementation rules
Program stack	Explain the missing operating layer.	Stack source systems to decision outputs. Use square panels and mono labels.
Event log / implication cascade	Show time-ordered facts across systems.	Use timestamp, event, source system, impact, and status. Amber marks active signal only.
Evidence trace / trace card	Make a decision defensible.	Include decision, evidence, owner, date, impacted package, source artifact, and status.
Project register panel	Show structured worklists, risks, constraints, RFIs, or packages.	Use governed table rows with status and impact. No generic dashboard chrome.
Agent pipeline	Explain what AI does.	Use [input] → [Agent] → [Named output] per row. Output must be named, not vague.
Node-link project graph	Show domains, artifacts, dependencies, and relationships.	Keep node sets small. Use hairline edges, fixed layout, mono labels, no force animation.
Gate packet	Show a review package as an assembled set.	Include executive brief, open constraints, schedule impacts, exposure, decisions, links, and variance log.
Timeline strip	Show delay, latency, or a Tuesday-to-Friday gap.	Use date, event, owner/status, and a clear gap marker.
Orthographic artifact plate	Add materiality when useful.	Hairline SVG or labeled artifact surface. No 3D platform, glow, mist, or decorative photo.

Schematic Type

Program Stack

Decision Outputs EPC Assistant Live Program Model Project Graph Evidence Intake Source Systems

Schematic Type

Trace Card

DecisionApprove equipment pad redesign

EvidenceRFI-118 / SK-42 / PO-7742

OwnerPackage lead · MEP-03

StatusReady for gate

Schematic Type

Agent Pipeline

[RFI + schedule] → [Constraint Agent] → [Open constraint brief] [Drawing set] → [Impact Agent] → [Package delta register] [Gate agenda] → [Packet Agent] → [Evidence packet]

Schematic Type

Project Register

RFI-118Action required · MEP-03 · +8 days

PERMIT-07Blocked · Civil · owner review

PO-7742Evidence linked · procurement

Schematic Type

Gate Packet

Construction Rules

Use tokens from tokens/tokens.css; do not introduce one-off colors, shadows, gradients, or type.
Use brand-docs.css surfaces before adding page-specific CSS.
Use zero or very low radius, square corners, thin rules, and consistent mechanical line weight.
Use one table header treatment unless columns represent status.
Restyle Mermaid or external tools to token colors, square geometry, and mono labels.

Required Labels

Every diagram needs control metadata. Mechanism diagrams should include several of these labels.

Copy Pairing

Order	Required content
1	Section eyebrow with a short mechanism label.
2	Headline with one line of stakes.
3	Optional lede of one or two sentences, or one pull quote.
4	Diagram panel showing the primary mechanism with mono labels.
5	Caption with source, status, gate, date, or node count.
6	Optional closing sentence naming the consequence or decision.

Bad: three paragraphs explaining the graph, then a bullet list of domains. Good: one sentence, an 8-node schematic, and caption graph.domains · 8 nodes · source: project record.

Accessibility

Diagram text must meet contrast requirements on its panel surface.
Do not rely on color alone for status; pair color with label, rule, shape, or position.
Captions must identify purpose and any non-obvious state.
SVG diagrams need an accessible name through surrounding text, aria-label, or a nearby caption.
Essential diagram facts must also appear in adjacent text, labels, or table cells.

Responsive Behavior

Diagrams must remain legible on small screens.
Complex grids collapse to stacked panels.
Wide registers use horizontal overflow only when columns cannot responsibly collapse.
Node graphs should reduce node count, stack labels, or switch to a register/cascade pattern on mobile.
Do not crop labels, connectors, evidence fields, or status words.

Ban List

Robot heads, neural-brain icons, magic sparkles, or purple/blue AI gradients.
Generic construction stock photos with hard hats shaking hands.
Isometric platform or hub illustrations.
Rounded generic flowcharts with drop shadows.
Animated particles, neon glow, glassmorphism, or AI mist.
Floating cards without project meaning or fake metrics that are not grounded.

Shipping Checklist

It explains a relationship, workflow, chain of custody, or mechanism.
Hard concepts use diagrams: graph, propagation, agents, operating layer, traceability, and review readiness.
It uses an approved schematic type: stack, cascade, trace card, register, pipeline, node graph, gate packet, timeline, or artifact plate.
It includes evidence/control metadata such as source, status, owner, date, gate, package, or next action.
Signal amber is semantic and paired with labels or rules.
It can be explained in one sentence and would not look strange inside a project review packet.
Copy is paired correctly: short stakes, mechanism diagram, clear caption.
Accessibility and responsive behavior are verified before shipping.