# tridant — brand kit

> we build the systems your space runs on.

The mission-document system: 1960s NASA program manual. Warm paper
ground, near-black ink, NASA red as the editorial accent, NASA blue as
the structural second color, flight-suit olive for the identity. In
dark mode the whole document becomes the night plate. Live reference:
https://tridant.io/brand · source of truth for tokens: `src/styles/app.css`.

## marks

- **The logotype** — the lettered TRIDANT wordmark. Used ALONE at nav,
  footer, and document sizes (the NASA-worm move).
  - ink `#1a1812` (on paper): https://tridant.io/brand/wordmark.svg
  - olive `#3d4419` (on paper): https://tridant.io/brand/wordmark-olive.svg
  - paper tone `#e6ddc4` (on dark): https://tridant.io/brand/wordmark-paper.svg
  - night ink `#e2e8f4` (on dark): https://tridant.io/brand/wordmark-night.svg
- **The A-00 star** — Gielis superformula, m=6, n=(0.3, 0.3, 0.3), a=1,
  b=0.5. Display sizes only: heroes, banners, OG cards, the favicon.
  - hairline 0.7: https://tridant.io/brand/star-hairline.svg
  - standard 1.2: https://tridant.io/brand/star-display.svg
  - light 1.4: https://tridant.io/brand/star-light.svg
  - bold 2.5: https://tridant.io/brand/star-bold.svg
  - medium "H-03" cut (γ=0.55, dilated) for UI-chrome sizes: https://tridant.io/brand/star-medium.svg
  - favicon: https://tridant.io/favicon.svg
  - rotate only in 120° increments (its true symmetry); the long arm
    points at the thing that matters.
- **Raster exports** — the asset builder at https://tridant.io/brand composes any
  mark, logotype, or the display lockup over alpha, a circle, or a
  square in any brand tone, and exports PNG, JPG, WebP, or SVG at
  512–4096 px.

## color — core

Hierarchy = usage share. The page pair carries most of every view;
structure tones support; accents come in small doses with loud jobs.

### the page (dominant)

| token | light | dark | role |
| --- | --- | --- | --- |
| `--color-ground` | `#f0eadb` | `#0d1220` | page ground — aged document paper / night plate |
| `--color-text` | `#1a1812` | `#e2e8f4` | primary ink — headlines, rules, the star |

### structure

| token | light | dark | role |
| --- | --- | --- | --- |
| `--color-ground-deep` | `#e6deca` | `#0a0e1a` | deeper ground — footer, wells |
| `--color-surface` | `#f7f3e6` | `#131a2c` | cards, panels |
| `--color-elev-1` | `#fcf9f0` | `#1a2238` | hover / raised surfaces |
| `--color-border` | `#c2b99d` | `#3a4663` | visible 1px component borders |
| `--color-rule` | `#d6cdb3` | `#242e48` | faint structural hairlines + drafting grid |
| `--color-muted` | `#4d483b` | `#aab5cd` | body copy, ledes |
| `--color-dim` | `#6f6855` | `#7e8aa8` | captions, meta |

### accents

| token | light | dark | role |
| --- | --- | --- | --- |
| `--color-accent` | `#c93818` | `#e65a33` | NASA red — index tabs, eyebrows, CTAs |
| `--color-accent-hot` | `#a52a0e` | `#f0764f` | accent hover / pressed |
| `--color-accent-ink` | `#f7f2e2` | `#1a0c06` | text ON the accent fill |
| `--color-blue` | `#0b3d91` | `#4b7fe0` | NASA blue — links, diagrams; never decorative |
| `--color-olive` | `#3d4419` | `#e6ddc4` | flight-suit olive — the logotype and identity names (paper tone at night) |
| `--color-star` | `#cfe0ff` | `#cfe0ff` | highlights inside the dark plate only |
| `--color-plate` | `#0a0e1a` | `#06080f` | the LED plate's own ground |

## color — product tones

Used ONLY in the products register, one per system.

| token | light | dark | role |
| --- | --- | --- | --- |
| `--color-p-transmission` | `#ff3d2e` | `#ff4a38` | Transmission — tally red |
| `--color-p-constellation` | `#2563d9` | `#4b82e8` | Constellation — NASA blue, lifted |
| `--color-p-moonshine` | `#5d7590` | `#90a8c6` | Moonshine — moonlight slate |
| `--color-p-starlight` | `#a87b16` | `#d9a83a` | Starlight — star gold |
| `--color-p-owlette` | `#b05a28` | `#d97f42` | owlette — owl amber |
| `--color-p-phase` | `#1e6e54` | `#37a583` | phase — instrument green |
| `--color-p-latticus` | `#6f6855` | `#8f8a75` | Latticus — in development, muted |

## typography

- **Archivo Expanded Black** — display — the poster voice. variable: wdth 125 · wght 900 · UPPERCASE · tracking −0.015em · line 0.96–1.02
- **Archivo** — body & UI copy. 400 / 500 / 600 · 16–18px · line 1.55 · UI copy is lowercase
- **Michroma** — wide instrument face — use sparingly. section numerals, doc codes, the motto · tracking 0.08–0.28em · saturates fast
- **IBM Plex Mono** — registers & meta. labels, spec rows, keyboard chips, captions · UPPERCASE + tracking 0.12–0.18em · tabular numerals
- **Geist Sans** — owlette's own wordmark only. 600 · never used elsewhere

All UI copy is lowercase; acronyms, product names, and user-entered
strings keep their own casing.

## grid & motion

- 48px drafting grid; every horizontal rule registers to it. Section
  padding runs in 48px multiples (144px between sections).
- Motion law: machine tool, not rubber band. Fast moves on
  `cubic-bezier(0.16, 1, 0.3, 1)` (outExpo class), hard lock at the
  target, no overshoot, no elastic, then stillness. Ambient motion is
  slow, quiet, and in each mark's own character.

## do

- use the logotype alone at nav, footer, and document sizes — the NASA-worm move
- reserve the star for display sizes: heroes, banners, the favicon, OG cards
- keep the star's long arm pointing at the thing that matters (a CTA, a headline)
- rotate the star only in 120° increments — its true symmetry
- keep all UI copy lowercase; let acronyms and product names keep their own casing
- register every horizontal rule to the 48px drafting grid
- move like a machine tool: fast, outExpo, hard lock — then hold still
- set the logotype and identity names (founders, products) in olive; paper tone in dark mode
- use the accent for direction and action — index tabs, eyebrows, one CTA

## don't

- don't lock the star and logotype together below display sizes
- don't stretch, skew, or freely rotate the star; don't redraw its curves
- don't recolor the star outside ink, star-pale (#cfe0ff), or olive watermark
- don't use elastic, bouncy, or springy motion — nothing overshoots and wobbles
- don't set body copy in Michroma or the display cut
- don't mix sentence case into lowercase UI surfaces
- don't use NASA blue decoratively — it only does schematic work
- don't put more than one accent-filled CTA in a viewport
- don't place rules off the drafting grid 'just this once'