skip to content

// brand

signal radar

the kern design system. one family, lowercase, always. colour is strictly semantic — never decorative, never invented. the whole interface is an instrument panel, not a marketing site.

// identity

the mark.

a glowing green signal-radar / emission-core. a bright signal-green core with concentric rings of green dots on a near-black rounded square, with a soft green radial bloom. the simplified single-ring variant is used at small sizes.

sm · 20px
md · 28px
lg · 48px
kernwordmark

// colour tokens

seven hues. no others.

green = running / active / cta. amber = transitional / warn. crimson = error. gray = standby. every colour carries meaning; none are decorative. body text defaults to zinc-300 over bg-core.

tokenhexmeaning
bg-core
#050506absolute base background. near-black. page background.
bg-surface
#0b0c10cards, panels, elevated surfaces.
grid-bounds
#161920inactive dots, dotted dividers, scrollbar thumbs.
signal-high
#4cf5a0primary brand accent — signal green. running / active / cta.
signal-low
#4c525estandby / offline / muted text.
warn-vector
#f5a04cwarnings / transitional states. amber.
fault-vector
#f54c4cerrors / terminated. crimson.

// dot grammar

status as light.

status is rendered as arrays of light-emitting micro-nodes driven by pure-math shader functions. each state has a colour and an animation:

runningwave

signal-green, traveling wave. running / active.

startingbreathe

amber, slow breathe. starting / installing.

faultblink

crimson, rapid blink. error / terminated.

standbyidle

gray, static. standby / offline.

// typography

one family. mono always.

jetbrains mono everywhere. no sans-serif, no serifs. base 13px, line-height 1.4, antialiased. headings are the same family, lowercase and terse.

signal acquiredbold · 700 · 24px
section headingmedium · 500 · 18px
body text. running at the default weight.regular · 400 · 13px
// kicker · muted annotationextralight · 200 · 12px

note: jetbrains mono has no wdth (stretch) axis — it is fixed-width by nature. hierarchy is achieved through weight, size, and colour, never font-stretch.

// boundaries

dotted matrix, not solid lines.

boundaries are dotted-matrix fills, not solid 1px borders — radial dots on a 6px tile. avoid solid borders except for focus rings, which are signal-green and must never be reset.

↑ dotted divider (matrix-border) · dot-grid accent (matrix-grid-faint)

// voice

lowercase. terse. technical.

the kern voice is consistent across every surface. it reads like a console log, not a press release.

lowercasealways. headings, body, nav, buttons. capitals only in code/identifiers.
terseshort declarative sentences. often fragments. no marketing fluff.
technicalreal domain nouns: instance, registry, reactor, lifecycle, orphan, latest.log.
honestunderstated confidence. "no fake dates. tracked in the open."
no hypeno exclamation marks. no superlatives. the panel never lies.

// in the wild

any server. one panel.

stream stdout. pipe stdin.

start. stop. restart. gracefully.

updates itself. signed.

signal lost

no instances registered

source of truth: WEBSITE_MASTER_PROMPT.md §3. reproduced faithfully in the tailwind theme and component library.