Company Theme RK Design System Living reference — docs/theme.css ← MISSION CONTROL

Design System

Every token, rendered. One system.

This page is the visual sample of the theme in docs/THEME.md. Toggle dark mode in the top bar — both modes are real, and dark is opt-in by design. If a deliverable doesn't look like this page, it isn't on-theme.

RK ion accent #7DE2FF Space Grotesk + JetBrains Mono 6px radius · 2 durations · 1 curve Light default, dark opt-in

Brand

The logo

Monoline R and K on a 64-unit grid. The idea is in the K's upper arm: not a stroke but a tapered trajectory, full weight at the vertex and released to a point as it exits the cap line. The orbit is implied by that gesture and is never drawn as a ring. Committed at docs/brand/logo.svg — inline the SVG, never an <img> or a background image.

Top bar — 22px square

No chip, no plate, no ring. The mark is drawn in currentColor, so it inherits whatever it sits on and reads in both modes — toggle light above and it flips with the page. That only works when the SVG is inlined; an <img> or a CSS background cannot resolve currentColor. Scale it square, set both dimensions equally, and never recolor it to a literal, outline it, or draw the orbit behind it. Hover it: one 360° revolution is the whole motion vocabulary.

Color

Identity & text

--brand
#7DE2FF · light #0B6E8A
Primary, active rail, primary button
--brand-soft
#A6ECFF · light #0E7C9B
Focused input border
--red
#FF7A6B · light #C2402F
Accent, config keys. Sparingly
--link
#7DE2FF · light #0B6E8A
Links, eyebrows, focus ring
--heading
#F2F4F8 · light #05070B
All headings, emphasis
--text
#C9D2E0 · light #31384A
Body copy
--muted
#7C8496 · light #5C6478
Secondary, captions, hints

Surfaces & borders

--page
#000000 · light #FFFFFF
Canvas
--surface
#05070B · light #FFFFFF
Cards, bars, panels
--surface-2
#0A0D14 · light #F4F6F9
Recessed / callout fill
--input
#0A0D14 · light #F9FAFC
Field backgrounds, inline code
--rail
rgba(255,255,255,.06) · light rgba(5,7,11,.05)
Hover fill
--border
rgba(255,255,255,.16) · light rgba(5,7,11,.18)
Inputs, buttons
--border-soft
rgba(255,255,255,.09) · light rgba(5,7,11,.10)
Card edges, dividers
--border-strong
rgba(255,255,255,.30) · light rgba(5,7,11,.36)
Hover border, arrows

Status ramps

--ok / --ok-bg / --ok-bd
#15803d · #e8f6ee · #b7e0c6
Success, running, verified
--warn / --warn-bg / --warn-bd
#9a6700 · #fff3dc · #f0d89a
Caution, pending, budget warn
--bad / --bad-bg / --bad-bd
#dc2626 · #fef2f1 · #f5c2bd
Error, blocked, halt
Status is never conveyed by color alone — always pair the ramp with an icon or a word, so the meaning survives greyscale printing and color-blind readers.

Type

Typographic scale

Prose in Space Grotesk; every number a reader may compare in JetBrains Mono with tabular-nums. Both stacks degrade cleanly when the webfonts aren't embedded.

Eyebrow · mono 11.5px · .16em · uppercase

Heading 1 — clamp(1.9rem, 4.4vw, 2.6rem)

Heading 2 — 1.4rem, −.02em

Heading 3 — 1.01rem, −.01em

Lede — 1.06rem, capped at 62 characters so the eye doesn't lose the line.

Body — 15px at 1.6 line-height. Inline --font-mono code sits inside prose at .8rem, and a keyboard hint renders as Ctrl + C.

Muted caption — secondary detail, hints, figure captions.

Nodes
3×
Tokens in
128.4k
Spend
$0.412
Latency p99
184ms

Controls

Buttons, chips, and pills

Buttons

The primary button's 180° gradient is the only gradient in the system.

Chips — mono, tabular

10.20.0.14 CREW_API_KEY healthy unassigned

Status pills & badges

running pending failed recommended

Fields

Content blocks

Callouts, terminal, tables

Note. Default callout — --surface-2 on a 3px brand left border.
Warning. Flag destructive steps before the step, never after it.
Blocked. Failure state — say what broke and how to recover.
Verified. Confirmed outcome, with the evidence that proves it.
verify-install.sh
$ kubectl get pods -n crew
# all nine services should report Running
NAME                          READY   STATUS    AGE
crew-api-7d9f4b8c6-x2k9p   1/1     Running   4m12s
crew-worker-5c8b9d-qm4tz   1/1     Running   4m10s
$ curl -fsS localhost:8080/healthz
{"status":"ok","version":"3.4.1"}
AgentModel TokensCost State
Principal Architectopus-5 12.5k$0.125active
Backend / Full-Stackopus-5 19.3k$0.201active
QA & PR Reviewersonnet-5 9.1k$0.049waiting
Support / Queryhaiku-4-5 2.5k$0.004blocked

Definition rows

CREW_DB_HOST
Postgres hostname. Reachable from every worker node.
CREW_LOG_LEVEL
One of debug, info, warn, error. Defaults to info.

Accordion

Pods stuck in Pending
Almost always insufficient allocatable memory. Check kubectl describe pod for the scheduler event, then either raise the node pool size or lower the replica request.
Health check returns 503 after upgrade
Migrations have not finished. Tail the migration job before restarting anything — a restart mid-migration is how you get a partial schema.

Shape

Radius, elevation, motion

--e1
resting cards
--e2
raised / hover
--e3
modals, figures
Radius
6px --r
Radius sm
4px --r-sm
Interaction
180ms --d2
State change
240ms --d3

One easing curve for everything: cubic-bezier(.22,.61,.36,1). Both durations and the curve are suppressed under prefers-reduced-motion: reduce.