Better Stack

Overview

Better Stack is an enterprise observability platform that democratizes infrastructure monitoring through AI-driven SRE capabilities, incident management, and unified telemetry (logs, metrics, traces, errors) at a fraction of incumbent costs. The design system embodies "Technical Minimalism"—a philosophy that prioritizes clarity and precision over ornamentation, using a deep navy-to-slate color foundation (#121826 to #3a4456) paired with a vibrant periwinkle accent (#7c87f7) that signals interactivity and trust. The visual language evokes a command center: calm, focused, and built for teams managing mission-critical systems at scale.

The brand voice is direct, confident, and jargon-aware without being exclusionary. Better Stack speaks to infrastructure engineers and SRE practitioners with specificity ("30x cheaper than Datadog," "60-day money-back guarantee") while remaining accessible to decision-makers. Tone: pragmatic, solution-oriented, never hyperbolic. Example: "Your observability stack shouldn't cost more than your infrastructure."

Colors

The color system is anchored in a sophisticated dark palette designed for extended viewing and reduced eye strain—critical for monitoring dashboards. **Primary (#7c87f7)** is a medium-saturation periwinkle used exclusively for call-to-action buttons, active states, focus rings (3px blur at rgba(124, 135, 247, 0.1)), and brand-critical interactive elements. It reads as trustworthy and technical without the coldness of pure blue. **Secondary (#4bb9e8)** is a cyan accent reserved for status indicators, secondary CTAs, and data visualization highlights; it provides visual separation from primary without competing for attention. **Tertiary (#a579e9)** is a soft violet used sparingly for tertiary actions and decorative accents in hero sections. **Error (#e0687d)** is a muted rose-red that signal

Typography

The type system pairs Helvetica Now Display (weights 500, 700) for headlines with Helvetica Now Text (weights 400, 500, 700) for body copy, creating a cohesive, premium aesthetic rooted in Swiss typographic tradition. Display (56px, 700, -0.02em letter-spacing) anchors hero sections with commanding presence; Headline-lg (40px, 700) breaks major sections; Headline-md (28px, 700) introduces subsections. Body-lg (18px, 400, 28px line-height) is used for hero copy and feature descriptions, maintaining 150% line-height for readability over extended paragraphs. Body-md (16px, 400) is the default for card content and UI text. Label-md (14px, 600, 0.02em tracking) is applied to button text and form labels, with increased letter-spacing to reinforce hierarchy and improve scannability. All headlines

Layout

The layout system uses a 12-column grid with a max-width of 1280px, maintaining a 24px gutter on desktop and collapsing to 12px on tablet. The spacing scale is semantic: lg (40px) separates major sections (hero to features, features to pricing); md (24px) is the default card padding and inter-component spacing; sm (12px) is used for internal card spacing and list item padding. Container widths are fluid up to 1280px, then fixed, preventing awkward line lengths on ultra-wide displays. White-space is generous—sections breathe with 40px+ vertical separation—reflecting the brand's "clarity through simplicity" philosophy. The gutter (24px) is consistently applied to page margins on desktop, creating a safe zone for content and preventing text from touching viewport edges. Padding inside cards f

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle background shifts rather than dramatic drop shadows. Level 1 (Base): surface-container (#1f2433) with no shadow, used for standard cards and containers. Level 2 (Elevated): surface-container-high (#2d3449) with box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15), applied on hover to cards and when modals are present. Level 3 (Modal/Overlay): surface-container (#1f2433) with box-shadow: 0 16px 40px 0 rgba(0, 0, 0, 0.2) and a semi-transparent backdrop (rgba(18, 24, 38, 0.8) with backdrop-filter: blur(4px)) to separate it from the page. But

Shapes

The shape philosophy is "Technical Precision"—rounded corners are used strategically to soften the interface without sacrificing clarity. Buttons and inputs use 12px border-radius (lg token), creating a modern, approachable feel while remaining distinctly geometric. Cards use 12px (lg) for consistency with interactive elements, reinforcing that cards are containers for actionable content. Modals and overlays use 16px (xl) to signal they are elevated, distinct surfaces. Small UI elements (badges, tags, small buttons) use 6px (sm) or 8px (DEFAULT) to maintain visual hierarchy—smaller radius for

Components

Action Elements Buttons are the primary interaction mechanism and follow a strict hierarchy. **Primary buttons** (background: #7c87f7, text: #0b0c14, 48px height, 12px 24px padding, 12px border-radius, label-md typography) are used for main CTAs ("Sign up", "Start free trial"). On hover, the background shifts to #5b63d3 (primary-container) and gains a 0 4px 12px 0 rgba(124, 135, 247, 0.3) shadow, creating a 4px perceived lift. The transition is 150ms cubic-bezier(0.4, 0, 0.2, 1), fast enough to feel responsive but slow enough to avoid jarring. **Secondary buttons** (transparent background, #7c87f7 text, 1px solid #646e87 border, same padding/height) are used for "Sign in" and alternative actions. On hover, the background becomes #2d3449 (surface-container-high) and the border becomes #

Do's and Don'ts

**Do**

• Do use primary (#7c87f7) exclusively for CTAs, focus states, and brand-critical interactions—never for backgrounds or decorative elements.
• Do maintain 40px+ vertical spacing between major sections to create visual breathing room and reduce cognitive load.
• Do apply 12px border-radius to buttons and cards consistently; use 16px only for modals and elevated surfaces.
• Do use Helvetica Now Display (700 weight) for all headlines; reserve Helvetica Now Text for body copy and UI labels.
• Do layer focus rings (0 0 0 3px rgba(124, 135, 247, 0.1)) on all interactive elements for keyboard navigation accessibility.
• Do use the surface-container-high (#2d3449) hover state for cards and list items; never use primary color as a hover background for non-button elements.

**Don't**

• Don't use pure white (#ffffff) for body text; use on-surface (#c9d3ee) to reduce eye strain on dark backgrounds.
• Don't apply shadows larger than 0 16px 40px 0 rgba(0, 0, 0, 0.2); excessive shadows flatten the visual hierarchy.
• Don't mix Helvetica Now Display and Helvetica Now Text weights arbitrarily; follow the typography scale strictly (Display for headlines, Text for body).
• Don't use secondary (#4bb9e8) or tertiary (#a579e9) for primary CTAs; they dilute the primary accent's signal strength.
• Don't apply border-radius larger than 16px except for pill-shaped elements (9999px); excessive rounding undermines technical credibility.
• Don't use outline-variant (#4e576e) for text or interactive elements; reserve it for borders and dividers only.