# Plasma Orbital — Design System

> Sovereign maritime intelligence, engineered from orbit.

This project is the design system for **Plasma Orbital** (trading name of Plasma Geospatial Ltd, United Kingdom) — a UK space-tech company building **sovereign AI-microsatellite fleets** that give allied nations persistent, real-time awareness of their maritime zones. Satellites with edge-AI on board *see* every vessel, *think* (classify it, with or without an AIS transponder), and *tell* operators in near real-time — including the "dark" vessels that sail with their transponders off.

The flagship pathfinder mission is **EdisonSat**; the long arc is "first, one — then, everywhere": prove the pipeline on one satellite, patrol the water with a fleet, then make orbit the intelligence layer for everything at sea.

---

## Sources

This system was reverse-engineered from the company's own working repository. If you have access, explore these to go deeper — the editorial mockups and copy decks are the source of truth:

- **GitHub — `Plctr/plasmaorbital`** (private): https://github.com/Plctr/plasmaorbital
  - `artifacts/mockup-sandbox/src/components/mockups/plasma-refine/` — three React mockups of the marketing site (`Current.tsx`, `EditorialGrid.tsx`, `PrecisionDossier.tsx`). **`Current.tsx` / `EditorialGrid.tsx` are the canonical editorial direction** this system is built on.
  - `artifacts/mockup-sandbox/public/images/` — the EdisonSat blueprint line-drawings.
  - `attached_assets/` — copy decks (`PlasmaOrbital_Copy_AppleVoice.md`, `PlasmaOrbital_Partners_Copy.md`, `PlasmaOrbital_WhitePaper_MasterPlan_Copy.md`), the dark-navy `PlasmaOrbital_Homepage_Mockup.html` (an **earlier, superseded** direction), and generated team / hardware imagery.

> Note: an **earlier** homepage direction used a dark navy "operator console" palette (`#0B1422` navy + `#5DCAA5` teal). That has been **superseded** by the light editorial "paper / ink / vermilion" system documented here. Build new work in the editorial system unless told otherwise.

---

## Content fundamentals — how Plasma Orbital writes

The voice is **Apple product-marketing meets defence dossier**: benefit before technology, total confidence, restraint. Two registers coexist:

- **Evocative (home, EdisonSat, master plan):** short declarative fragments. *"The ocean just ran out of hiding places." · "Dark vessels. Meet daylight." · "Sees. Thinks. Tells."*
- **Institutional (partners, investors, capability claims):** precise, sourced, procurement-friendly. *"detects vessels regardless of AIS status, validated in staged trials."*

The rule: **the wordplay is the headline; the sober claim sits directly underneath it, in that order. Never let the wordplay touch a capability claim.**

**Mechanics:**
- **Second person, handing the reader power.** *"Your waters. Your satellites. Your call."*
- **Verbs over adjectives.** "It understands them," not "advanced AI-powered analysis."
- **One idea per section.** If a sentence needs a comma and an "and," it's two sections.
- **Numbers are staged, never listed.** One numeral, huge (`25%`, `$50B`); the context arrives *after* the impact.
- **Name the magic.** "Sees. Thinks. Tells." is a feature name, not a description.
- **Em-dashes are intentional** brand style.
- **No exclamation marks. Ever.** No emoji. No first-person "we have a problem!" hand-wringing.
- **Dossier framing:** sections are numbered (`01 — The problem`), tagged with file numbers (`FILE NO. EO-001`) and figure refs (`FIG. 04`). It reads like a declassified technical file.
- Casing: **Sentence case** for headlines and body; **UPPERCASE** only for mono dossier labels and the wordmark (`PLASMA ORBITAL ®`).

---

## Visual foundations

A **Swiss / International-Typographic, Dieter-Rams-flat** editorial system. Think technical dossier printed on warm paper, with one electric signal colour.

- **Palette — "paper / ink / vermilion".** Warm bone paper `#EFEDE4` ground; near-black ink `#15140F` for type and inverted panels; a single signal **vermilion `#E8401C`** ("daylight") for accents, the eyebrow numbers, links, and one full-bleed break section. A slightly deeper paper `#E7E4D9` fills blueprint/inset panels. That's the whole palette — restraint is the point. All depth and hierarchy come from **ink-on-paper opacity ramps** (90/75/55/45/15) rather than new hues.
- **Typography.** Three families: **Space Grotesk** (display — headlines, giant words, tight `-0.04em` tracking, weights 600/700), **Inter** (body & UI, 15–17px, line-height 1.6), **Space Mono** (the signature uppercase "dossier label" — ~11px, `letter-spacing: 0.15em`). Headlines run *big* and *tight*; giant display words (`DAYLIGHT`, `25%`) anchor sections at `0.8` line-height.
- **Layout.** A wide 12-column **hairline grid** (max ~110rem). Sections separated by 1px borders; numbered eyebrows in the left column, content in the right. Generous vertical rhythm (`5–8rem` section padding). Borders — not boxes or shadows — define structure.
- **Corners & borders.** **Square. Everything is `border-radius: 0`** — cards, buttons, inputs, panels. The *only* rounded elements are circular avatars and tiny status dots. Borders are always **1px hairlines** at 15% ink (or 20% paper on dark).
- **Shadows.** **None on paper.** Depth is hairline borders + inverted ink panels. One optional float shadow exists solely for overlays (dialog/toast).
- **Backgrounds.** Flat paper. No gradients, no textures, no decorative imagery behind text. The one chromatic break is a **full-bleed vermilion section** (the "Your waters. Your call." sovereignty move). Inverted **ink panels** carry spec tables and the footer.
- **Imagery.** Two kinds: **technical blueprint line-drawings** of the satellite (rendered `mix-blend-multiply` onto paper, annotated with mono callouts `01–05`), and **photography** (hardware, team portraits) shown **desaturated `grayscale(1)` + `mix-blend-multiply`**, resolving to **full colour on hover** over `0.5s`. Portraits are circular; everything else square.
- **Motion.** Restrained. **Colour transitions only**, ~150–200ms, standard ease — no bounce, no parallax, no entrance animations. The grayscale→colour photo reveal is the one expressive flourish.
- **Hover / press.** Solid buttons **flip ink→vermilion**; outline buttons **fill ink, text→paper**; links and ghost buttons **→vermilion**; list rows tint faintly to `paper-2`. Inputs get a **vermilion border** on focus. No scale/shrink on press.
- **Selection.** `::selection` is vermilion ground, paper text.

---

## Iconography

Plasma Orbital ships a **proprietary line-icon set** — 17 marks at 20–22px, 1.25–1.375 stroke, rounded joins, normalised to `currentColor` so they inherit ink on paper or paper on dark. Masters live in `assets/icons/` (SVG) and `assets/icons/png/` (ink PNGs); paper-stroke PNGs for dark strips are in `assets/icons/png-light/`. Three families: **detection pipeline** (Detect / Process / Alert / Integrate / Act), **capabilities** (Onboard AI, Wide-area coverage, Sovereign intelligence, Lightweight outputs, Faster decision cycles, Integration ready) and **section markers** (The operational problem, The Plasma Orbital solution, What the system detects, Who it supports, Mission areas, Why it matters). Hierarchy still leans on type, numerals and hairlines first — icons are used sparingly.

**Guidance:**
- Prefer **mono numerals and arrow glyphs** (`→ ↓ ↗ ▶ ▾ >>>`) over icons. These are used throughout as affordances ("Our story →", "See how it works ↓", "▶ Watch the film").
- For anything **outside the proprietary set**, fall back to **[Tabler Icons](https://tabler.io/icons)** at matching weight: `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3/dist/tabler-icons.min.css">` then `<i class="ti ti-satellite"></i>`. *(Substitution flag: Tabler is the set the source repo used; it is CDN-linked, not vendored.)*
- **No emoji. No multicolour icons.** Icons inherit `currentColor` (ink, or vermilion when active).

---

## What's in here — index

**Foundations (root)**
- `styles.css` — the single entry point consumers link. `@import`s only.
- `tokens/` — `fonts.css`, `colors.css`, `typography.css`, `spacing.css`, `effects.css`. All CSS custom properties (`--po-*`, `--font-*`, `--space-*`, semantic aliases).
- `guidelines/` — foundation specimen cards (Colors, Type, Spacing, Brand) shown in the Design System tab.

**Components** (`components/<group>/` — each has `.jsx`, `.d.ts`, `.prompt.md`, and a `@dsCard` HTML)
| Component | Group | Role |
|---|---|---|
| `Button` | core | Square action button — solid / outline / ghost |
| `DossierLabel` | core | The signature uppercase mono label |
| `Badge` | core | Square mono tag / status chip |
| `Card` | core | Hairline panel with optional FIG. header strip |
| `SpecTable` | core | Inverted (ink) two-column spec readout |
| `SectionHeader` | layout | Numbered section opener + display headline |
| `NumberedRow` | data | Hairline roadmap / list row |
| `Input` | forms | Square field (input / textarea / select), mono label |
| `Checkbox` | forms | Square consent checkbox |

Mount in plain HTML via `const { Button } = window.PlasmaOrbitalDesignSystem_840117` after loading `_ds_bundle.js` (compiler-generated).

**UI kits** (`ui_kits/`)
- `website/` — faithful recreation of the editorial marketing site. `index.html` mounts an interactive `<Site>` (homepage + clickable **Partners** page with a working enquiry form), composed from the component primitives. Sections are factored into `sections.jsx` and `partners.jsx`.

**Assets** (`assets/`)
- `logo/` — the orbital mark in four colourways (`plasma-orbital-{ink,vermilion,paper,white}.svg` + 512px PNGs in `logo/png/`, plus a `currentColor` master).
- `icons/` — the 17-mark proprietary line set (SVG + `png/` + `png-light/`).
- `imagery/` — Slate Noir renders: `slate-noir-hero.jpg`, `slate-noir-detection.jpg`, `slate-noir-cargo-study.jpg`.
- `blueprint-sat.png`, `blueprint-exploded.png` — EdisonSat technical line-drawings.
- `edisonsat-prototype.webp` — flight-hardware prototype photo.
- `team/leo.webp`, `team/grace.webp`, `team/miguel.webp` — leadership portraits.

**Templates** (`templates/<slug>/` — copy-and-fill starting points; open the `.dc.html` and edit)
- `editorial-page/` — single-page editorial landing (hero, numbered sections, vermilion break).
- `one-pager/` — print-ready A4 field note (capability grid, pipeline, section cards). Save as PDF.
- `whitepaper/` — print-ready A4 whitepaper (dossier cover, abstract with staged stats, running folios). Save as PDF.

**Design reference**
- `Design System Sheet.html` — the one-page editorial dossier covering colour, type, grid, imagery, logo, icons, components, patterns, voice, usage do/don'ts and governance. Print-ready.
- `guidelines/art-direction.md` — the Slate Noir imagery art-direction prompt and rules.

**Skill**
- `SKILL.md` — makes this folder usable as a Claude Agent Skill.

---

## Using the system

```html
<link rel="stylesheet" href="styles.css" />
<script src="_ds_bundle.js"></script>
<script type="text/babel">
  const { Button, DossierLabel, SectionHeader } = window.PlasmaOrbitalDesignSystem_840117;
</script>
```

Then build with the tokens (`var(--po-vermilion)`, `var(--font-display)`, `var(--border-hairline)`) and compose primitives. Keep corners square, borders hairline, copy declarative — and stage your one big number.
