# 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: `` then ``. *(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//` — 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 `` (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//` — 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 ``` 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.