Better Stack. Midnight SRE console.
- Developer tools
- Dark theme
- 10 colors
- 2 typefaces
Better Stack operates as a midnight SRE console: a near-black canvas with monochrome surfaces, hairline borders doing the work that elevation does elsewhere, and a single violet-blue accent that surfaces only on actions, links, and gradients. Typography is Helvetica Now with stylistic alternates enabled, giving headlines a crisp, engineered feel — tight tracking, medium weights, and no decorative flourishes. The interface reads like a dark IDE: borders define shapes, inset white highlights suggest depth without drop shadows, and color appears as a scarce resource to mark interactivity. Components are light, flat, and confident — rounded 16px cards, 9999px pill buttons, no heavy panels or skeuomorphic depth.
Better Stack design system
Brand1
Supporting palette color for small decorative accents when the core palette needs contrast. Do not promote it to the primary CTA color
Accent1
Link color, gradient end stop, accent borders — the only chromatic UI color
Neutrals8
SVG icon fills, shadow anchor for inset highlights
Page canvas, nav background, link backgrounds
Card surfaces, primary button background — one step above the canvas
Input borders, elevated card borders, subtle surface lift
Secondary text, subdued borders, inactive nav items
Primary hairline border, icon outlines, nav borders — the workhorse border that defines most shapes
Active nav text, icon strokes, light-on-dark headings
Primary heading text, body text emphasis, button text
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Deep Ink on Periwinkle Glow
8.99 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictPasses AAA 7
