Sentri register · sentry.io family
One source of truth for color, type, space, and component. Built lean — audit, consolidate, document. No color or font appears here that isn't already in use. Click any value to copy it; toggle the theme to test both polarities.
Two layers. Primitives are raw values named by what they are; page CSS never touches them. Semantics are intent aliases — switch the theme or rebrand and only these change.
Hot pink #ff2e88 is the one brand accent: the chip, eyebrows, links, focus. Electric green #8dff1f is signal only — the lighthouse beacon and live/status dots, never decorative. The old lime is retired. Dark is the canonical theme. One accent per viewport.
Violet scale — canvas & ink
Accent — pink leads, green signals
Semantic aliases — what page CSS uses
Polarity pairs — text on canvas
Four families, each with exactly one role: Space Grotesk display, Rubik body & UI, Monaco code, Saira Stencil wordmark. Never reach for a fifth.
Every margin, gap, and pad lands on the 4-point grid. Section bands are always --space-96.
Seven steps. xs–xl for components, xxl for raised cards, full for pills and avatars. Click a tile to copy its token.
Functional only — three elevations for genuine lift, plus a violet soft-ring for the inverted button and a lime glow for the live dot. On dark canvas, depth comes from texture, not drop shadows.
--ease-spring on movement, --ease-out on color & opacity. Hover a card to replay. Durations step 120 · 200 · 250 · 300 · 360 ms.
Three roles. btn-primary for the page's main action; btn-inverted for the loud hero CTA (white pill, violet soft-ring); btn-ghost-dark for secondary actions on dark. Hover and focus them — keyboard focus shows the new lime ring.
.chip-lime is the load-bearing signature — it wraps a single word inside a display headline. .chip is the bordered neutral, .tag the soft taxonomy label, .status-pill the meta-strip badge.
Generic fields added in the v1.2 audit — DESIGN.md specified text-input and select-violet, but only the scoped signup input existed. Focus shows the lime ring; the error state is where pink earns its keep.
Every page hero uses the same shape: lime eyebrow with a leading dot → display headline → muted lede.
Episode 3 · 2026-05-31
An eight-agent virtual team running the work the role was never staffed to do. Built in public, anonymously.
The violet-framed mono block with a lime accent class, the rotated lime stamp, and the pulsing live dot.
$ bun run beam:assemble episode-3 [extract] 12 sources scanned · 8 promoted [render] /episodes/episode-3/index.html (47 KB) [deploy] upisland.org — done
Three canvases per page. Alternate to create rhythm — never stack two of the same type back-to-back.
The generic raised .card, and the three-intent .note callout: neutral, accent (lime, positive), warn (violet, attention).
Process
Each agent owns one slice of the CISO mandate — strategy, architecture, compliance, awareness, IR — and ships felt outcomes.
Wrap long-form content in .prose and write semantic HTML — every element gets the right type, color, and spacing in a 720px reading column. The standalone .toc drops anywhere.
A new shape for the CISO office: outcomes, not theater. The work the role was never staffed to do — done by a virtual team of purpose-built agents.
The CISO role is structurally broken for SMEs. No single person has the time, depth, and breadth to do what the role demands — strategy, architecture, compliance, awareness, IR — all at once.
The deliverable of security is calm in the business, not a list of activities.
What this pass found and what it changed. Fixes respect the doctrine — document what is, not what could be — so genuine gaps were filled and speculative components were left noted, not invented.
No component had a :focus-visible style. Added a lime focus ring (--shadow-ring-focus) on buttons, nav, links, and fields. Mouse interaction is unchanged, so visual parity holds.
DESIGN.md specified text-input and select-violet, but the system only had the scoped signup input. Added .field, .input, .select, .textarea on-token — see §09.
v1.3 made --brand-accent hot pink #ff2e88; v1.4 added --signal (electric green #8dff1f) with one job — the lighthouse beacon and live/status dots. Because every component reads these through tokens, the whole system reskinned from a few edits. Lime is retired.
The new ring-focus shadow was mirrored into tokens.json and the version bumped to 1.2.0, honoring the rule that every value appears in both files.
DESIGN.md describes card-pricing, card-feature-dark, and card-spotlight-violet. No production page uses them yet, so per doctrine they're not in the system — promote when a real page needs one.
Episode bodies serve both web and the newsletter email, where <link> is stripped. They stay on inline-everything HTML, hand-synced to tokens.json — by design, not by omission.
Doctrine & migration recipe live in DESIGN_SYSTEM.md · primitives in tokens.css · this sheet is the proof.