Skip to content

BK BRAND KIT

One system,
every surface.

The mission-document system: 1960s NASA program manual. Paper ground, near-black ink, NASA red for direction, NASA blue for schematics, flight-suit olive for identity. In dark mode the whole document becomes the night plate. Apply it anywhere Tridant shows up.

BRAND.MD — THE FULL SPEC ↓

01 THE MARKS

the A-00 star

Gielis superformula — m=6, n=(0.3, 0.3, 0.3), a=1, b=0.5. Wide horizontal spread, subtle vertical. Display sizes only: heroes, banners, OG cards, the favicon. The long arm points at the thing that matters. Rotate only in 120° increments — its true symmetry.

HAIRLINE 0.7

svg ↓

LIGHT 1.4

svg ↓

BOLD 2.5

svg ↓

H-03 · SMALL

svg ↓

favicon

FAVICON

svg ↓

the logotype

The lettered wordmark stands ALONE at nav, footer, and document sizes — the NASA-worm move. Flight-suit olive on paper; the paper tone on dark grounds. Ink where olive would fight the surroundings. Never lock it to the star below display sizes.

ink — on paper svg ↓

olive — on paper svg ↓

paper tone — on dark svg ↓

night ink — on dark svg ↓

02 ASSET BUILDER

Compose exactly the file you need — mark, logotype, or the display lockup, over alpha or a shaped ground, in any brand tone — and export it at a preset size as PNG, JPG, WebP, or SVG. Everything renders from the same path data the site uses, at full resolution. Nudge, scale, and rotate each element, then save the whole setup as a preset.

asset
cut
star ink
ground
size
format

star geometry

presets — saved in this browser

composed brand asset preview
scale check 64px preview 64 32px preview 32 16px preview 16

tridant-star-standard-ink-alpha-1024.png 1024 × 1024

03 COLOR

Core palette

follows the site theme — flip it with the nav toggle

THE PAGE — most of every view is these two

--color-ground

#f0eadb

page ground — aged document paper / night plate

--color-text

#1a1812

primary ink — headlines, rules, the star

STRUCTURE — surfaces, rules, and the text ladder

--color-ground-deep

#e6deca

deeper ground — footer, wells

--color-surface

#f7f3e6

cards, panels

--color-elev-1

#fcf9f0

hover / raised surfaces

--color-border

#c2b99d

visible 1px component borders

--color-rule

#d6cdb3

faint structural hairlines + drafting grid

--color-muted

#4d483b

body copy, ledes

--color-dim

#6f6855

captions, meta

ACCENTS — small doses, loud jobs

--color-accent

#c93818

NASA red — index tabs, eyebrows, CTAs

--color-accent-hot

#a52a0e

accent hover / pressed

--color-accent-ink

#f7f2e2

text ON the accent fill

--color-blue

#0b3d91

NASA blue — links, diagrams; never decorative

--color-olive

#3d4419

flight-suit olive — the logotype and identity names (paper tone at night)

--color-star

#cfe0ff

highlights inside the dark plate only

--color-plate

#0a0e1a

the LED plate's own ground

Product tones

One insignia color per system, used only in the products register.

--color-p-transmission

#ff3d2e

Transmission — tally red

--color-p-constellation

#2563d9

Constellation — NASA blue, lifted

--color-p-moonshine

#5d7590

Moonshine — moonlight slate

--color-p-starlight

#a87b16

Starlight — star gold

--color-p-owlette

#b05a28

owlette — owl amber

--color-p-phase

#1e6e54

phase — instrument green

--color-p-latticus

#6f6855

Latticus — in development, muted

04 TYPOGRAPHY

Archivo Expanded Black

display — the poster voice

variable: wdth 125 · wght 900 · UPPERCASE · tracking −0.015em · line 0.96–1.02

We build the systems

Archivo

body & UI copy

400 / 500 / 600 · 16–18px · line 1.55 · UI copy is lowercase

Turnkey system design, deployment, and day-two ops.

Michroma

wide instrument face — use sparingly

section numerals, doc codes, the motto · tracking 0.08–0.28em · saturates fast

FL-01 · ORDO AB CHAO

IBM Plex Mono

registers & meta

labels, spec rows, keyboard chips, captions · UPPERCASE + tracking 0.12–0.18em · tabular numerals

UPTIME — DETECTS CRASHES, RESTARTS IN SECONDS

Geist Sans

owlette's own wordmark only

600 · never used elsewhere

owlette

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

05 GRID & MOTION

the drafting grid

48px cells, restarting at each section's top rule. Every horizontal rule registers to it; section padding runs in 48px multiples. Sticky instrument strips are the one element allowed off the grid while in motion.

the motion law

Machine tool, not rubber band. Fast moves on cubic-bezier(0.16, 1, 0.3, 1), hard lock at the target — no overshoot, no elastic, then stillness. Ambient motion is slow, quiet, and in each mark's own character.

06 DO / DON'T

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'