strataix
Design system

The Strataix design language.

A living reference — every token and component here is the same code the site ships. Flip the theme toggle to preview light and dark.

Colors

Defined as CSS variables in globals.css under @theme; the light theme overrides them under [data-theme="light"].

Surfaces

bg
--color-bg
bg-2
--color-bg-2
surface
--color-surface
surface-2
--color-surface-2

Lines & text

border
--color-border
border-2
--color-border-2
fg
--color-fg
muted
--color-muted
faint
--color-faint

Accent & status

accent
--color-accent
accent-2
--color-accent-2
violet
--color-violet
teal
--color-teal
emerald
--color-emerald
amber
--color-amber

Typography

Montserrat for headings, the wordmark, and labels; Raleway for body; a monospace stack for code.

Hero / h1Your production AIMontserrat 700
Section / h2One gateway, seven controlsMontserrat 600
Card / h3ObservabilityMontserrat 600
BodyEnforced and proven from the single gateway.Raleway 400
Small / mutedPer-key, per-team, and per-model ceilings.Raleway 400
Mono / labelTHE REQUEST PATHJetBrains-style mono

Buttons

Primary

SmallDefaultLarge →

Ghost

SmallDefaultLarge

Labels & status

Status badges

ShippedBuildingNextResearch

Eyebrow & pill

Section label Pre-release · building in the open

Cards

Control card, with gradient icon tile, title, status badge, and description.

Observability Next

Every request traced — tokens, latency, errors, cost.

Security Research

Detect and block prompt injection and jailbreaks.

Callout

  • Lead statement. A supporting clause that explains it further.
  • Another point. Used on the landscape page for the gap analysis.

Stats

0shipped
4in research

Form fields

Submit

Motion & theming

  • Aurora + noise sit behind all content; sections reveal on scroll; the gateway diagram animates a request through it.
  • Reduced motion is respected — every animation is disabled under prefers-reduced-motion: reduce.
  • Light / dark is driven by [data-theme] on <html>, set before paint and toggled in the nav.