◆Brand mark

## The orbital mark.

An ascending chevron crossed by an orbit — the primary identity. Four colourways cover every context; keep clear space around it equal to the orbit ring, and never recolour outside the palette. Download SVG or PNG. Master in `assets/logo/`.

Ink · on paper SVG PNG
Vermilion SVG PNG
Paper · on dark SVG PNG
White · max contrast SVG PNG
00 The system

## A design system, not just a style guide.

A style guide documents standards. A design system adds the reusable, coded parts and the governance to scale them. This reference is the human-readable face of the repository below — every value here is a live token or a compiled component.

Brand & visual style guide
tokens/ · guidelines/
Colour, typography, spacing, corners, logo, imagery, icons — the look. Sections 01–05.
Content style guide
readme.md · §08
Voice, tone, grammar, casing. How Plasma Orbital writes. Section 08.
Component library
components/ → _ds_bundle.js
Nine coded React primitives with props, states & usage. Section 06.
Pattern library
ui_kits/ · templates/
Components assembled into recurring screens & layouts. Section 07.
Usage guidelines
§09 · *.prompt.md
Do's and don'ts so the system is applied consistently. Section 09.
Governance
§10 · SKILL.md
Source of truth, versioning, and how to contribute. Section 10.
01 Brand · Colour

## Paper, ink, white, and one signal.

A five-value palette. Hierarchy comes from opacity ramps, not new hues. Vermilion is reserved for accents and one full-bleed break; pure white is reserved for detection data on imagery.

Paper
#EFEDE4
Primary ground
Paper 2
#E7E4D9
Inset / blueprint panels
White
#FFFFFF
Detection data-points & rules on imagery
Ink
#15140F
Type & inverted surfaces
Vermilion
#E8401C
The one accent — "daylight"
Ink opacity ramp — on paper
90
75 · body
55 · muted
45 · faint
25
15 · line
10
Paper ramp — for text & lines on ink / vermilion / imagery
paper
80 · body
60
45 · muted
20 · line
10
02 Brand · Typography

## Big, tight display. Quiet body. Dossier labels.

Space Grotesk runs the headlines hard and tight. Inter carries the reading. Space Mono is the signature uppercase label — the thing that makes copy feel like a file.

Display · megaSpace Grotesk 700 · −0.05em · LH 0.8
DAYLIGHT
Display · xlSpace Grotesk 600 · −0.04em
The ocean ran out of hiding places.
Display · mdSpace Grotesk 500
Sees. Thinks. Tells.
BodyInter 400 · 15–17px · LH 1.6
Onboard AI processes imagery at the edge, identifies vessels of interest, and transmits only what matters — not the homework.
Mono labelSpace Mono · 11px · 0.15em · UPPER
01 — The problem File No. EO-001 Fig. 04
03 Visual · Grid & form

## Hairline grid. Square corners. No shadows.

A 12-column grid drawn in 1px hairlines, spacing on a 4px base, and square corners throughout. Depth comes from inverted ink panels — never a drop shadow on paper.

12-column hairline grid · max-width 110rem · gutter 32px
01
02
03
04
05
06
07
08
09
10
11
12
01 Index · 3 col
Content spans the remaining nine.

The recurring brand layout — a mono index in the left columns, the argument on the right.

Spacing scale · 4px base · token `--space-n`
2·8
4·16
6·24
8·32
12·48
16·64
20·80
24·96
Borders & corners
radius 0 — cards, buttons, inputs, panels
radius pill — avatars & status dots only
10%
15%
25%
Hairline weights — 15% is the default line
Elevation · three levels only
Level 0 flat
Paper UI — flush to the page. Hairline border, no shadow, ever.
Level 1 inverted
Depth by inversion — ink panels, spec tables, the footer.
Level 2 overlay
Lifts off the page — dialogs & toasts only. `--shadow-overlay`
04 Brand · Imagery

## Slate Noir — tactical monochrome.

The house style for hero and product renders. Pure grayscale, sculpted rim-light out of a black void, one cool violet-blue accent for compute, and white data-points marking detections. Three imagery modes exist: Slate Noir renders, blueprint line-drawings, and desaturated photography.

Hero · clean scene Matte charcoal, black void, no labels
Detection · overlay White boxes · [SHIP 00n] type, conf.
Vessel study · catalogue plate Container class · three views
Orthographic vessel renders for spec pages and detection-model reference — same matte grayscale, black void, raking rim-light. Catalogue plates carry no accent colour and no data-points; those belong to the detection overlay only.
Void #0A0A0C
Charcoal
Slate
Light slate
Violet-blue
Data #FFF
Art-direction prompt guidelines/art-direction.md
Slate Noir: Tactical Monochrome Product Illustration. True monochromatic (pure grayscale) — deep charcoals, slate grays, matte black; no colour saturation. Tactile surfaces: bead-blasted metal on the satellite body, precise grid etching on solar panels, micro-textures on catching edges. Mood: covert, premium, state-of-the-art. Lighting: dramatic low-key cinematic; harsh precise rim lighting carving objects out of a pure black void; no soft fill. Composition: three-quarter orbital view over an Earth segment from a dark void. One non-grayscale element only — a vivid cool violet-blue laser fanning from a glass-and-metal processor cube to the satellite. Five+ laser-fine white lines fan down to monochrome Earth targets, each with a clean white data-point circle: rover, ground dish, research vessel, community centre, sea-bed sensor cluster. Near-pitch-black background, no baked text labels.
Inspiration & reference
Cargo-ship 3D models — hull silhouette & superstructure proportions 3dmodels.org ↗ Container-ship wireframe — blue lines on dark (overlay / detection treatment) istockphoto.com ↗
05 Brand · Iconography

## One line set. Drawn, not borrowed.

A proprietary 20–22px line set — 1.25–1.375 stroke, rounded joins, on the same geometry as the UI. Every icon ships as `currentColor`, so it inherits ink on paper or paper on dark. Each is downloadable as SVG or PNG; the full set lives in `assets/icons/`. For anything outside this set, fall back to Tabler Icons at matching weight.

Detection pipeline · shown on dark (native)
Detect SVG PNG
Process SVG PNG
Integrate SVG PNG
Act SVG PNG
Alert SVG PNG
Capabilities
Onboard AI SVG PNG
Wide-area coverage SVG PNG
Sovereign intelligence SVG PNG
Lightweight outputs SVG PNG
Faster decision cycles SVG PNG
Integration ready SVG PNG
Section markers
The operational problem SVG PNG
The Plasma Orbital solution SVG PNG
What the system detects SVG PNG
Who it supports SVG PNG
Mission areas SVG PNG
Why it matters SVG PNG
06 Component library

## Primitives — live, with states.

Nine coded React components compiled into `_ds_bundle.js`. Documented below with variants, interaction states, and props. Hover them: solid buttons flip to vermilion, rows tint, photos resolve to colour.

Loading components…

Button — states

State | Solid | Outline | Ghost
--- | --- | --- | ---
Enabled | Ink fill, paper text | Hairline border, ink text | Ink text, no border
Hover | → Vermilion fill | → Ink fill, paper text | → Vermilion text
Focus | Inherits hover treatment; inputs gain a vermilion border
Disabled | 40% opacity, `not-allowed` cursor, no hover

Prop | Type | Default
--- | --- | ---
variant | solid · outline · ghost | solid
size | sm · md · lg | md
glyph | node — leading "▶ / →" | —
href | string — renders an anchor | —
disabled | boolean | false

    const { Button } = window.PlasmaOrbitalDesignSystem_840117;
    <Button variant="solid" glyph="▶">Book a briefing</Button>

07 Pattern library

## Patterns — components, assembled.

Recurring arrangements the brand repeats. Built from the primitives above; shipped at scale in the `ui_kits/website/` recreation and the `templates/editorial-page/` starter.

Dossier strip Fig. A
EO-System / Sovereign Maritime Intelligence File No. EO-001
Section header Fig. B
03 Master plan
First, one. Then, everywhere.
Staged statistic Fig. C
$150bn
annual losses from illicit activity in national waters
Blueprint figure Fig. D
08 Content · Voice & tone

## Apple confidence, dossier discipline.

Headlines carry the wordplay; the sober capability claim sits directly underneath, in that order. Numbers are staged, never listed.

"Your waters. Your satellites. Your call."
Verbs over adjectives
"It understands them" beats "advanced AI-powered analysis."
One idea per section
If a sentence needs a comma and an "and," it's two sections.
Stage the number
One numeral, huge. Context arrives after impact.
Sentence case, always
UPPERCASE only for mono labels and the wordmark. Em-dashes are intentional.
Second person
Hand the reader power: "Your waters. Your call."
No exclamation marks. No emoji.
Ever. Confidence is the tone; humility is the footnote.
09 Usage guidelines

## Do, and don't.

The rules that keep the system coherent across hands. When in doubt, subtract.

✓ Do

- Keep corners square; only avatars and status dots are round.
- Build depth from hairlines and inverted ink panels.
- Reserve vermilion for accents, eyebrow numbers, links, and one break.
- Stage one big number per idea; let it breathe.
- Use white only as a detection data-point / rule on Slate Noir imagery.
- Pull body contrast from the ink opacity ramp.

✕ Don't

- Add drop shadows, gradients, or background textures on paper.
- Round corners or introduce a second accent colour.
- Put vermilion or colour onto Slate Noir imagery (white only).
- Use exclamation marks, emoji, or title-case headlines.
- Let wordplay touch a capability claim — pair it with the sober line.
- Hand-draw icons; use numerals, arrow glyphs, or Tabler when needed.

10 Governance & maintenance

## One source of truth, kept in sync.

A design system is only as good as its upkeep. These are the rules that keep documentation and code from drifting apart.

Source of truth | Tokens live in `tokens/*.css` (imported by `styles.css`); components in `components/<group>/`. This sheet renders from them — never hard-code a value here that isn't a token.
Single namespace | All components compile to `window.PlasmaOrbitalDesignSystem_840117`. Consumers link `styles.css` + `_ds_bundle.js` only.
Adding a component | Add `Name.jsx` + `Name.d.ts` + `Name.prompt.md` in a group folder, plus one `@dsCard` preview. Reference tokens; import React only.
Changing a token | Edit the `tokens/` file. Every card, component, kit and template updates automatically — that is the point of the ramp-and-alias structure.
Versioning | File No. `EO-DS-001` · Rev. 2026.06. Bump the revision on any breaking token or component change; note it in `readme.md`.
Portability | `SKILL.md` makes the whole system installable as a Claude Agent Skill for production or prototype work.

11 Editorial & print

## Layouts that generate to PDF.

The system extends to print. Two A4 starting points — a field-note one-pager and a multi-page whitepaper — carry the same dossier header strip, numbered sections, staged stats and running folios. Open one, fill it in, Save as PDF. Live in `templates/`.

One-pager — Field Note
A4 · capability grid · pipeline · section cards
Open →
Whitepaper
A4 · dossier cover · abstract · staged stats · folios
Open →