Color variants

Construction

Geometry on a 100×100 unit grid. Upper and lower halves are perfect mirrors around y=50.

Clear space

Maintain minimum clear space equal to the vertical bar width (14% of K height) on every side.

Minimum size

Never reproduce the mark smaller than these dimensions.

Horizontal lockup

At every size

Color variants

K256Loader — three sizes

K256LoadingState — full-canvas wait

When the wait dominates the surface, pair the loader with a label and an optional detail line.

PageSkeleton — per-route fallback

Used by every authed route's `loading.tsx`. Renders the page header chrome and a centered loader so the shell stays mounted during navigation.

Skeleton — placeholder atom

A single pulsing `surface-3` rectangle. Use this alone for inline placeholders (a row in a table, a KPI value mid-fetch). For substantial loading surfaces — cards, panels, full sections — reach for `SkeletonCard` below so the k256 watermark stays present.

SkeletonCard — the canonical loading surface

A glass card with the `k256.xyz` wordmark painted behind at the same 6.5% opacity every chart uses. Pair it with `Skeleton` atoms for the rows. This is the only way to render a loading card in product — never wrap raw atoms in a plain `<div>`, or the surface reads as a grey blank instead of a k256 surface.

Brand spectrum

The Solana-green axis from invisible whisper to fully-saturated brand. Use whisper/soft for backgrounds, glow/focus for ambient effects, brand for accents and CTAs.

Surfaces

Layered white-on-black ramp. Each step is a 1–2% alpha bump — quiet visual hierarchy without competing brightness.

Text hierarchy

Six-step white-on-black opacity ramp. Primary for hero text, quaternary/quinary for labels and supporting copy.

Borders & keyline

Five steps from invisible to sharp. Keyline is reserved for the stat-card corner bracket and other intentional accents.

Status colors

Each semantic color has a solid pair and a soft (12% alpha) pair. Soft variants tint surfaces, solid variants render text and icons.

Chart palette

Seven-color sequence used by every chart. Brand always leads, blue is the canonical secondary, violet is the canonical tertiary axis (latency p99).

Scrims

Black-alpha overlays for dialogs, modals, and contextual backdrops. `deep` is reserved for expanded chart modals.

Contrast ratios

Type scale

Monospace — Geist Mono

Used for code, addresses, slot numbers, signatures, latency values, and uppercase eyebrow labels.

Casing rule

Radius scale

Layout primitives

Standard inner padding for cards / glass surfaces and the floating header pill.

Touch targets

Every interactive element renders at 44 px (h-11) on mobile, collapsing to 36 px (h-9) at the `sm` breakpoint.

Glass backdrop demo

Three blur tiers behind the brand spectrum. Hover any tile to see the saturate boost (`backdrop-saturate-[1.4]`).

Collapse — the canonical expand/collapse animation

Inline forms (Add member, New proposal, Create policy, Bind program, Subscribe webhook…) always slide open from height: 0 → auto with the brand gentle ease. Never `display: none → block` — that's the 'blink' anti-pattern. The wrapper is always `overflow-hidden` so nested content cannot peek out while the height interpolates. Shared primitive: `components/ui/collapse-section.tsx` — never reimplement the keyframes.

Inset refractions

Logo drop shadows

Variants

Sizes

States

Variants

Sizes

With status dot

Eyebrow sizes & tones

InlineDelta directions

Three sizes

With live pulse + description

Tone variants

StatCardGrid layouts

Soft variant — content tabs

Solid variant — toggle

TimeRangePills — canonical chart filter

Built on PillTabs in `solid` size sm. Used in every chart footer and every time-bounded KPI strip.

CopyButton — explicit action

CopyableValue — inline span

Three sizes, with and without hover

Surface ramp in context

Each surface level layered against the page background — how the depth ramp reads in practice.

Text fields

Selection controls

Dialog — form / content

AlertDialog — destructive confirm

AnalyticsChart — primary + secondary axis

Brand line on the right axis, red line on the left axis. Use when both series share the same unit (counts, dollars, requests) so a viewer can read both scales in the same compact-number format.

AnalyticsChart — primary + tertiary (latency) axis

Same shell, but the left axis is reserved for the latency tertiary series (violet). The tertiary formatter is `latency-ms` so the axis ticks come out as `12ms`, `120ms`, `1.2s`. Use this pairing whenever the second series is measured in time, not counts.

DonutChart — composition

Hover to highlight a slice; click to select (if `onSelectSlice` is wired). The center stays anchored to the total of the visible slices, so hiding a slice via the legend rebalances the readout.

LatencyHotspotsChart — grouped bar

P50/P90/P99 bars per endpoint with an overlay line for error rate on the right axis. The canonical 'where are we slow' chart.

HorizontalBarChart — ranked list

Horizontal bars with labels left-aligned and counts right-aligned. Used for top programs, top endpoints, top accounts — anything you'd want to read top-down.

States — loading, empty, error, fetching

Every chart inherits a `K256Loader` while loading, a faded mark + message when empty, and an explicit error state when the upstream query fails. The fetching state keeps the previous data on-screen and pulses a brand dot next to the title — the canonical 'refreshing in the background' affordance. All four states preserve the chrome so the page does not jump.

PublicHeader — floating pill

The live header you see at the top of this page. Auth-aware: signed-out users see 'Sign in', signed-in users see 'Dashboard'. The active nav link slides via a shared framer-motion layoutId.

DashboardShell — authed product chrome

Compact floating pill on top: K mark, 'k256 · Replay', NAV_ITEMS strip (empty while only one product ships), workspace switcher on the right, and a user dropdown for Workspace / Account / Billing / Sign out.

Glass dropdown menus — workspace switcher + account

Both header pills open the same glass menu primitive: a 2xl border-strong card, popover surface, glass-lg shadow, and inset refraction. The workspace switcher above the line, the user/account menu to the right of it. These are the canonical patterns for every dropdown across the dashboard.

PublicFooter

Five links + copyright: Why, How we think, Replay, Terms, Privacy. Marketing surfaces only — authenticated routes use AuthedFooter.

App icon tiles

Asset sizes

Manifest theme

Component API