Logo / Wordmark
Technical stamp, not mascot.
The wordmark is the mark. Use PLATHERA as a compact technical stamp in Gear Wide. It should feel stamped onto a packet, title block, login rail, or evidence cover, not floated as a lifestyle logo.
Identity System / Industrial 2.0
The Plathera visual system should feel like the missing infrastructure beneath capital execution: ruled, traceable, senior, and built from objects project teams already trust.
Industrial 2.0 is not a terminal skin and not a construction moodboard. It is a governed record system: technical stamps, packet frames, evidence registers, drawing logic, status surfaces, and diagrams that make project truth inspectable.
| We are | We are not | Identity test |
|---|---|---|
| Infrastructure for capital project truth. | A generic AI interface. | Would this still make sense if every AI label were removed? |
| Precise, physical, and evidence-bearing. | Decorative, speculative, or glossy. | Can a viewer identify the record, owner, status, or implication? |
| A controlled system of packets, traces, registers, labels, and gates. | A dashboard skin made from floating cards. | Does each panel have a reason to exist beyond visual balance? |
| Senior, calm, and operator-authored. | Vendor-cheerful or buzzword-led. | Would an EPC lead trust the tone in a steering committee packet? |
| AI-native through workflow structure. | AI-themed through effects, robots, particles, or magic. | Is the intelligence shown as propagation, synthesis, and audit trail? |
Logo / Wordmark
The wordmark is the mark. Use PLATHERA as a compact technical stamp in Gear Wide. It should feel stamped onto a packet, title block, login rail, or evidence cover, not floated as a lifestyle logo.
Clearspace
| Rule | Use | Do not |
|---|---|---|
| Primary lockup | Set PLATHERA in Gear Wide, uppercase, white on dark or shadow on paper. Use the shared .wordmark or .stamp treatment where possible. | Do not recreate the mark in Arial, Chivo Mono, Inter, serif, lowercase, outline type, or novelty ligatures. |
| Signal color | Keep the mark neutral. Amber may sit near the wordmark as metadata, a rule, or an active-state signal. | Do not set the wordmark itself in signal amber. Amber is evidence state, not brand paint. |
| Container | Prefer a ruled rectangular stamp or bare wordmark on a disciplined rail. Maintain square corners and enough surrounding dark or paper field for legibility. | Do not place the mark in pills, circles, badges, gradients, glows, soft shadows, or rounded SaaS nav chips. |
| Symbol policy | Use no separate pictorial symbol in brand surfaces. A compact P crop is acceptable only where the platform demands a square favicon or social avatar. | Do not create cranes, brackets, nodes, robot heads, monograms, abstract AI marks, or construction icons as alternate logos. |
| Co-branding | Place Plathera as a controlled stamp in the same register as partner marks, separated by rules and metadata. | Do not visually subordinate Plathera with light opacity or overstate it with oversized logo placement. |
| Motion | Motion may reveal the mark by clipping, scan-line wipe, or record-load sequence if it is short and quiet. | Do not blink, bounce, shimmer, pulse, or animate the wordmark as a chatbot personality. |
The palette is deliberately narrow. Page Dark and Graphite carry infrastructure. White and Aluminum carry records. Steel carries inactive structure. Signal Amber marks evidence, current state, active structure, and short emphasis only.
| Token | Meaning | Use | Avoid |
|---|---|---|---|
--plathera-page-dark | Primary industrial ground | Page backgrounds, app-like surfaces, nav rails, dark covers. | Replacing it with arbitrary gray, blue-black, or pure black. |
--plathera-graphite | Raised record surface | Panels, peer cards, contained registers, artifact wells. | Using it as a decorative alternating-card ramp. |
--plathera-steel | Muted structure | Rules, captions, inactive nav, disabled controls, metadata. | Using it for long body copy on dark backgrounds. |
--plathera-aluminum | Readable secondary foreground | Lede copy, paragraph text on dark, notes, table cells. | Using it without hierarchy so every line has the same weight. |
--plathera-white | High-contrast foreground and paper | Headlines, stamps on dark, document surfaces, printable packet pages. | Using pure white or soft cream outside the token. |
--plathera-signal-amber | Semantic signal | Eyebrows, active states, current rows, diagram nodes, focus, short emphasis. | Using amber as broad backgrounds, illustration fill, logo color, or decoration. |
--plathera-rule | Governance line | Frames, table borders, grid structure, diagram traces. | Replacing ruled structure with soft shadows or floating-card separation. |
Screen Discipline
Most screens should read as Page Dark plus White/Aluminum plus Signal Amber. Light surfaces are document moments, not a second brand. If a page needs more colors to explain hierarchy, the structure is not yet clear.
Display
Use Gear Wide for the wordmark, stamps, status chips, short controlled labels, and rare two-word emphasis. It is a signal face, not a reading face.
Reading Face
Use Arial for body copy, ledes, page headlines, longer section headings, captions that need warmth, and explanatory content.
Technical Chrome
Use Chivo Mono for labels, table cells, record IDs, diagram annotations, metadata, code-like structures, timestamps, and trace rows.
| Role | Typeface | Case | Tracking | Rule |
|---|---|---|---|---|
| Wordmark | Gear Wide | Uppercase | Native or tight | Use PLATHERA only. Do not add descriptors inside the mark. |
| Stamp / eyebrow | Gear Wide | Uppercase | --plathera-tracking-stamp | Use for small controlled signals such as GATE READY, FIELD NOTE, STRATEGY 01. |
| Hero headline | Arial | Uppercase or sentence case | -0.04em to normal | Use for readable declarations. Keep line breaks deliberate and physical. |
| Section heading | Arial | Uppercase or sentence case | -0.03em to normal | Use for guide sections, product pages, and long strategic statements. |
| Body / lede | Arial | Sentence case | Normal | Default reading face. Keep paragraphs short and measures near --plathera-measure. |
| Technical label | Chivo Mono | Uppercase or title case | +0.04em to +0.12em | Use for field names, IDs, owners, statuses, architecture rows, and metadata. |
| Register data | Chivo Mono | By field | +0.04em to +0.12em | Use for tables, trace cards, code-like structures, dates, values, and evidence rows. |
| Long technical string | Chivo Mono | As source | Normal to +0.04em | Use mono for IDs and paths. Never set them in Gear Wide. |
Display Rule
Gear Wide is a stamp and signal, not a paragraph voice. If a phrase becomes long, explanatory, or technical, set it in Arial or Chivo Mono. Never use display type to create false importance.
Pages should feel engineered and routed. The grid is infrastructure beneath the record, not decoration on top of it.
| Pattern | Rule | Reason |
|---|---|---|
| Grid canvas | Use the shared 32px minor grid and 160px major grid from tokens/tokens.css. Keep it subtle and full-viewport. | Makes the surface feel constructed without becoming a background effect. |
| Content shell | Public pages can center content at --plathera-page while the grid continues beyond the content column. | Separates the industrial canvas from readable record content. |
| 12-column sections | Use .section-grid with span classes for comparable panels, split evidence blocks, and sidebar-detail layouts. | Creates repeatable proportion instead of hand-placed decoration. |
| Panels | Use square-corner .panel surfaces with ruled borders. Elevation should come from frame, status, and content density. | Preserves a record-system feel. |
| Peer cards | Comparable items share the same surface; vary only content, metadata, and status. | Avoids arbitrary gray ramps and card variety for its own sake. |
| Status cards | Use .is-current, amber rules, or paper inversion only when status changes meaning. | Surface color earns meaning through state. |
| Tables | Use amber headers, mono cells, ruled borders, and restrained row density. | Feels like a governed register rather than marketing layout. |
| Whitespace | Use whitespace as inspection room around records. Do not fill every grid cell. | Density needs hierarchy to stay senior and usable. |
Use grids, rails, frames, registers, and title-block logic. Pages should feel engineered and routed, not freely decorated.
Use square corners by default. Low radius exists only for browser or OS affordances that would otherwise feel broken.
Use thin lines as control structure: table borders, packet frames, label boxes, diagram traces, sheet edges, and ownership rails.
The brand is suspicious of decorative imagery, not of proof. Imagery must behave like evidence or context: documentary, cropped, annotated, and subordinated to the record system.
| Allowed | Required treatment | Not allowed |
|---|---|---|
| Documentary site photography | Use rarely. Crop for machinery, site scale, packet context, or inspection detail. Apply the shared image filter and controlled overlays. | Hard-hat smiles, handshake stock, generic construction sunsets, lifestyle portraits. |
| Evidence artifacts | Show issue logs, drawing title blocks, gate packets, evidence matrices, document registers, field memos, and status stamps. | Fake UI with no project meaning, decorative widgets, empty dashboards. |
| Line extracts | Use orthographic drawing fragments, dependency traces, and schematic sections as explanatory material. | Isometric platform art, 3D dashboards, blueprint wallpaper, decorative meshes. |
| Product screenshots | Frame as records with owner, status, evidence, date, and implication metadata. | Unlabeled screenshots, blurred generic UI, mock data that reads as filler. |
| AI evidence | Show AI through inputs, outputs, traceability, propagation, and named artifacts. | Robot heads, neural brains, sparkles, abstract particles, magic-glow automation. |
Every artifact panel should answer four questions: what record is this, who owns it, what state is it in, and what implication does it create?
If an image cannot be captioned as evidence, context, artifact, or mechanism, remove it. The visual system should not need decoration to feel complete.
EVIDENCE / NOT DECOR
Prose is for stakes and judgment. Diagrams are required when the page explains mechanism: propagation of implication, project graph structure, agent workflow, evidence lineage, operating-layer architecture, or before/after system behavior.
| Diagram type | Required when | Rules |
|---|---|---|
| Layer stack | Explaining fragmented systems, Plathera's operating layer, or outputs. | Use horizontal or vertical ruled bands, mono labels, one amber active layer, and no 3D depth. |
| Agent pipeline | Explaining named agents, input/output flow, or generated project artifacts. | Show input, agent, output, owner, and trace. Each output needs a real product noun. |
| Implication map | Explaining dependency, causality, schedule impact, commercial exposure, or cross-system propagation. | Use no more than 12 nodes in a marketing surface. Label each node. Use amber for current implication only. |
| Evidence register | Explaining proof, source lineage, or decision support. | Use table/register structure with source, date, owner, status, and confidence. |
| Before / after | Explaining old workflow versus Plathera workflow. | Keep both sides structurally comparable. Do not make the old world messy only through decoration. |
Layer Stack
Evidence Register
The Industrial 2.0 visuals are governed by brand/tokens/tokens.css and surfaced through brand/brand-docs.css. Do not fork values into page-specific systems.
| Area | Rule | Anti-drift check |
|---|---|---|
| Imports | Brand docs import brand-docs.css; that file imports tokens/tokens.css. Application pages should import tokens before local page styles. | No duplicate @font-face, color ramps, or grid variables inside individual pages. |
| Colors | Use --plathera-* tokens for brand colors, text, rules, surfaces, and amber states. | No raw hex values except demos that label the token swatch itself. |
| Type | Use --plathera-font-display, --plathera-font-neutral, and --plathera-font-mono. | No page-level font stacks and no unapproved webfont imports. |
| Grid | Use --plathera-grid-size, --plathera-grid-size-major, --plathera-page, and --plathera-grid-gap. | No hand-authored background grids with different spacing. |
| Radius / shadow | Use --plathera-radius-none, --plathera-radius-low, and --plathera-shadow-hard only where the component pattern calls for them. | No soft SaaS radius, glass shadows, neon shadows, or blur overlays. |
| Images | Use --plathera-image-filter for documentary assets unless the asset must remain technically accurate. | No full-color stock imagery fighting the controlled palette. |
| Do | Don't |
|---|---|
| Use neutral record grounds, graphite panels, aluminum text, steel rules, and semantic amber to create hierarchy. | Use amber as decoration, brand fill, logo color, or a shortcut for excitement. |
| Show records, packets, traces, registers, owners, statuses, dates, sources, and implications. | Show robot heads, neural brains, abstract AI particles, or generic automation magic. |
| Write with project nouns and mechanisms. | Write vendor claims about transformation, seamlessness, or generic AI productivity. |
| Let diagrams explain relationships, propagation, lineage, and workflow. | Use diagrams as decorative mesh backgrounds or unlabeled node art. |
| Use industrial imagery with controlled crops, captions, and overlays. | Use generic hard-hat handshake stock photography or cinematic construction decoration. |
| Use one strong visual idea per section. | Make every panel equally loud, inverted, amber, or oversized. |
| Use same-surface peer groups and status-based surfaces. | Alternate grays across cards just to create variety. |
| Use square frames, title-block logic, and table/register structure. | Default to rounded SaaS cards, glow, glass, gradients, or soft floating shadows. |
| Use tokens and shared classes before local CSS. | Hard-code a new mini brand system inside a page. |
| Keep Plathera calm, governed, and physically credible. | Make the brand playful, futuristic, cinematic, or chatbot-like. |
Run this review before shipping a page, deck, carousel, product screen, or diagram. If two or more answers fail, the work is drifting away from Industrial 2.0.
| Check | Pass condition |
|---|---|
| Logo | The wordmark is neutral, uppercase Gear Wide, and not replaced by a symbol or novelty lockup. |
| Palette | The screen uses one ground, one foreground family, and amber only as semantic signal. |
| Typography | Gear Wide is limited to stamps and short signals; Arial carries reading; Chivo Mono carries records and data. |
| Grid | Layout uses the shared grid, ruled panels, and consistent shell width rather than hand-placed decoration. |
| Artifact | At least one record, source, owner, status, date, or implication is visible where the page claims evidence. |
| Diagram | Mechanism-heavy sections include an on-brand schematic, not prose-only explanation. |
| Imagery | Images are documentary, artifact-based, or explanatory, and never generic stock or AI decoration. |
| Tokens | Colors, fonts, grid, rules, radius, shadows, and image filters come from shared tokens. |
| Tone | The page sounds operator-authored: calm, specific, project-literate, and free of exclamation marks. |
| Restraint | No gradients, glows, glassmorphism, rounded SaaS cards, bright accent colors, or decorative motion. |