Style guide

Living reference for the site's visual language: a dark "terminal" mode (teal-cyan, default everywhere) and a light "spec-sheet" mode (pale paper, black line-art), used deliberately per-section rather than by system preference.

Color tokens — terminal (dark)

--bg#05080a

--surface#0b1214

--surface-2#0f1a1d

--border#1c3238

--fg#d8f5ef

--accent#2de2c8

--accent-soft#7ff5e2

--accent-dim#12403c

--flag#ff3d81

--flag-soft#ff8fc0

--grid-line#163035

--wire#2f5c5a

--muted#7fa3a0

Color tokens — spec-sheet (light)

--bg#f2efe7

--surface#ffffff

--surface-2#e9e4d8

--border#17181a

--fg#101112

--accent#101112

--accent-soft#33383a

--accent-dim#cfd6d2

--flag#c81456

--flag-soft#e0507f

--grid-line#d8d2c2

--wire#101112

--muted#5a5f5a

Type scale

Aa Skill Tree.

h1 — JetBrains Mono 700, clamp(2rem, 6vw, 3.4rem)

Aa Priority Matrix

h2 — JetBrains Mono 700

The quick teal signal jumps over the black-glass panel. Longer prose reads here in a humanist sans so paragraphs stay easy on the eyes.

.prose — IBM Plex Sans 400

01_agent-harness.md · scale: 0.9rem · axis: x=42 y=17

.mono / .data-readout — IBM Plex Mono 400–600

Primitives

.wireframe-box

corner-bracket frame

.corner-ticks

no border, ticks only

.glitch-text — hover/focus

.scanline-overlay

respects reduced-motion

.crt-flicker — one-shot

Components

Enter the spaceGodotSKILLS.FLAG.

◎

Priority Matrix

Drag tasks on a continuous urgency-vs-importance plane.

Spec-sheet field grid

SerialST-2026-0831

Originsteventrueba.com

Rev01

StatusLive

Motion

Every animated effect on this site — the scanline sweep above, the glitch-text hover, the flicker button, the home page's flash-sweep — checksprefers-reduced-motion: reduce and no-ops when it's set. Try toggling "reduce motion" in your OS accessibility settings and reload this page.