Better Stack — design system & UI screens

Dev Tools · 1 screen · 15 sections · https://betterstack.com/

Dark hero over an observability dashboard, positioned 30x cheaper than Datadog.

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/better-stack.

Decoded design system

Better Stack's decoded design system: background #0B0C14, text #C9D3EE, accent #939DB8, link #939DB8, primary #171926; type scale h1 53px / h2 40px / body 20px; 8px spacing base; 6px base radius. The single interactive/action color is #939DB8 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#0B0C14`
surface	`#161721`
border	`#272934`
text	`#C9D3EE`
text_muted	`#80879B`
primary	`#171926`
accent	`#939DB8`
link	`#939DB8`
secondary	`#C9D3EE`
button_bg	`transparent`
button_text	`#FFFFFF`

Using these colors

Action color #939DB8 — the single interactive color; only on things you click or must notice, never large fills.
accent, link are all #939DB8 — one role, not several (the action color).
accent #939DB8 — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
primary #171926 — a brand color — but the call-to-action uses #939DB8, not this.
secondary #C9D3EE — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Heading: Roboto
Body: Roboto
h1: 53px
h2: 40px
body: 20px

Spacing

base unit: 8px
scale: 2px, 4px, 6px, 8px, 12px, 16px, 18px, 20px, 24px, 32px

Radii

base: 6px
button: 10px

Shadow

rgba(255, 255, 255, 0.25) 0px 1px 3px 0px inset

Motion

Micro-interactions run at 150ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).

durations: 150ms · 400ms · 500ms
easings: cubic-bezier(0.4, 0, 0.2, 1) · ease
animated properties: opacity, transform, color, background-color

Native design tokens

Token	Value
`--color-brand-yellow-80`	`#E9C899`
`--color-brand-primary-300`	`#4449A9`
`--color-neutral-600`	`#2F3647`
`--color-deprecated-alert-teal-100`	`#009199`
`--color-deprecated-secondary-red-100`	`#E0687D`
`--color-neutral-300`	`#646E87`
`--color-neutral-200`	`#939DB8`
`--color-deprecated-alert-yellow-100`	`#EEC200`
`--color-gray-300`	`oklch(87.2% 0.01 258.338)`
`--color-gray-500`	`oklch(55.1% 0.027 264.364)`

…and 110 more measured on the page.

Button states (measured)

primary focus: outline 1px auto rgb(16, 16, 16)

Layout (measured)

container max-width: 1095px
nav: 52px fixed
common grid: 2 columns

Motion choreography (measured)

Load order: div.customers-scroll×2 → h1.mt-5 → h1.mt-5 → p.md:mt-2 → p.md:mt-2 → button.mr-2×9

Scroll reveal: 25 elements rest at opacity 0, translateY(100px), animate in over 1s ease.

Input (measured)

height 52px · radius 12px · focus ring 1px auto rgb(16, 16, 16)

Responsive (measured)

breakpoints: 768px
mobile (390px): hero 40px · nav inline

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

The AI SRE observability stack