Architectural Primitives

Design System & Styleguide

All semantic color variables, typography scales, and modular UI components configured in Tailwind CSS v4.

01. Semantic Color Tokens & Presets

Mapped via CSS variables in src/styles/global.css

--bg-canvas

Page Background

--bg-surface

Card Surface

--bg-elevated

Hover & Modals

--brand-primary

Primary Accent

--brand-subtle

Badges & Glows

--border-subtle

1px Hairline Grid

02. Optical Typography Hierarchy

Plus Jakarta Sans (Display) • Inter (Sans) • JetBrains Mono (Code/Metrics)

Display H1 (text-5xl font-bold tracking-tight)

Autonomous Cloud Execution Runtime

Display H2 (text-3xl sm:text-4xl font-bold)

Sub-15ms Global Micro-Agent Coordination

Body Text (text-base text-ink-secondary leading-relaxed)

Our edge infrastructure leverages V8 isolate memory pre-warming across 38 global point-of-presence regions, completely eliminating cold starts for streaming LLM calls.

Monospace Metrics (font-mono tabular-nums text-sm)

P99 Latency: 11.4ms • Cache Hit: 99.82% • Memory: 32MB

03. Button Primitives & Sizes

Interactive states, focus rings, and size scales

04. Eyebrows & Status Badges

Monospace status tags with animated pulse indicators

Edge Active99.999% SLAv2.4.0 ReleaseSOC2 Certified

05. Architectural Cards & Crosshairs

Precision 1px hairline cards with corner crosshair markers

Variant: Default

Standard Surface

Card with 1px border and subtle inner specular highlight.

Variant: Interactive + Crosshairs

Hover Glow & Blueprint

Hover over this card to preview transition effects and corner '+' markers.

Variant: Elevated

Elevated Modal Style

Used for prominent metrics and floating panels.

06. Animated Accordion Primitive

Native accessible details & summary with smooth expand/collapse

01How does the 3-color preset engine operate?Tokens

The data-theme-preset attribute on the <html> element remaps CSS variables (--bg-canvas, --brand-primary, etc.) without requiring page reloads or layout thrashing.

02Can I customize the typography to another Google Font?

Yes. Simply update the font preconnect link in BaseHead.astro and the --font-display / --font-sans variables in global.css.