---
title: "Better Stack design system"
variant: extended
source: https://betterstack.com/
captured_at: 2026-10-12
theme: dark
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/betterstack-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Better Stack · Design System

> Quiet dark surfaces, vivid product proof

**Theme:** dark · **Industry:** devtools · **Source:** https://betterstack.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A dark, spacious SaaS homepage that leads with a concise value proposition and a live-looking observability interface. Repeated product feature bands, customer proof, and understated lavender accents keep a long page cohesive and easy to scan.

## North star

Keep the surrounding page quiet and dark so crisp product-interface previews and clear conversion actions carry the visual emphasis.

## Overview

The page uses a near-black canvas (#0f101a) and even darker section surfaces (#0b0c14) to make interface captures and white headings stand out without a bright, high-contrast frame. Muted blue-grays handle supporting copy, navigation, and metadata; pale periwinkle is reserved for links and selected controls, while the brightest violet-blue appears on primary conversion buttons. Helvetica Now Display gives headlines compact authority, paired with the more neutral Helvetica Now Text for body copy and controls. The hero balances a left-aligned promise and email signup against a large, angled product interface on the right. Below, long feature bands repeat a heading, compact explore control, and horizontally arranged product cards. Generous vertical pauses separate sections; fine borders and slightly lifted card surfaces distinguish interface samples without heavy shadows. Customer logos, testimonial cards, and a dense multi-column footer complete the page.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Surface | `#0b0c14` | `--color-midnight-surface` | surface | Dominant section and footer background; also fades around product imagery. |
| Deep Canvas | `#0f101a` | `--color-deep-canvas` | brand | Main page canvas and understated card or link backgrounds. |
| Lavender Signal | `#98a4f7` | `--color-lavender-signal` | accent | Measured accent for selected links and small interactive highlights. |
| Slate Caption | `#646e87` | `--color-slate-caption` | neutral | Low-emphasis supporting copy, footer text, and secondary links. |
| Blue Gray Text | `#939db8` | `--color-blue-gray-text` | neutral | Navigation, body copy, card text, and secondary headings. |
| Quiet Hairline | `#191b25` | `--color-quiet-hairline` | semantic | Subtle separators and thin card, link, and control outlines. |
| Clean White | `#ffffff` | `--color-clean-white` | neutral | Primary headings, high-contrast text, and signup button label. |
| Violet Depth | `#5b63d3` | `--color-violet-depth` | accent | Minor button or gradient detail; not a dominant page-wide color. |
| Iris Highlight | `#7c87f7` | `--color-iris-highlight` | accent | Minor button highlight; keep concentrated in interactive accents. |
| Panel Border | `#202330` | `--color-panel-border` | semantic | Card and input borders, with occasional subdued panel edging. |
| Raised Night | `#141621` | `--color-raised-night` | surface | Raised testimonial cards and contained footer surfaces. |
| Frosted Periwinkle | `#c9d3ee` | `--color-frosted-periwinkle` | accent | Secondary navigation and pill-button text. |
| Control Edge | `#262935` | `--color-control-edge` | semantic | Fine outlines around understated pill controls and buttons. |

### Semantic aliases

`--color-canvas` → `#0f101a` (Deep Canvas) · `--color-surface` → `#0b0c14` (Midnight Surface) · `--color-surface-2` → `#141621` (Raised Night) · `--color-surface-3` → `#202330` (Panel Border) · `--color-text` → `#ffffff` (Clean White) · `--color-text-muted` → `#646e87` (Slate Caption) · `--color-text-subtle` → `#939db8` (Blue Gray Text) · `--color-border` → `#191b25` (Quiet Hairline) · `--color-accent` → `#98a4f7` (Lavender Signal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#0f101a` | 18.93:1 | AAA |
| `#ffffff` | `#0b0c14` | 19.5:1 | AAA |
| `#ffffff` | `#141621` | 18:1 | AAA |
| `#ffffff` | `#202330` | 15.62:1 | AAA |
| `#646e87` | `#0f101a` | 3.72:1 | AA-large |
| `#646e87` | `#0b0c14` | 3.83:1 | AA-large |
| `#646e87` | `#141621` | 3.53:1 | AA-large |
| `#646e87` | `#202330` | 3.07:1 | AA-large |
| `#939db8` | `#0f101a` | 6.99:1 | AA |
| `#939db8` | `#0b0c14` | 7.2:1 | AAA |

### Gradients

- `linear-gradient(to right, rgb(11, 12, 20) 20%, oklab(0.157442 0.0025956 -0.0168897 / 0.7) 80%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(to left, rgb(11, 12, 20) 20%, oklab(0.157442 0.0025956 -0.0168897 / 0.7) 80%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(162deg, rgb(255, 255, 255) 25.49%, rgb(147, 157, 184) 110.77%)`
- `linear-gradient(to right in oklab, rgb(11, 12, 20) 50%, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Helvetica Now Text | `--font-body` | webfont | 400, 700, 500 | Body copy, navigation, links, captions, and buttons. | Inter |
| Helvetica Now Display | `--font-display` | webfont | 500, 700 | Primary and secondary section headlines. | Inter |

- **Helvetica Now Text:** Use regular weights for copy and navigation, medium for signup controls; sentence case with no measured tracking.
- **Helvetica Now Display:** Use bold display weight for prominent headings; maintain natural casing and unembellished tracking.

### Type scale — Perfect Fourth (ratio ≈ 1.357, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 700 | 0.6 | 0 | — | Helvetica Now Display | Hero headline introducing the AI SRE observability stack. |
| h2 | 36px | 700 | 1.17 | 0 | — | Helvetica Now Display | Feature-section and major conversion headings. |
| h3 | 20px | 400 | 1.2 | 0 | — | Helvetica Now Text | Product-card titles and smaller content headings. |
| body | 16px | 400 | 1.5 | 0 | — | Helvetica Now Text | Product descriptions, explanatory copy, and testimonial text. |
| caption | 14px | 400 | 1.55 | 0 | — | Helvetica Now Text | Fine print, product metadata, and secondary annotations. |
| button | 13px | 400 | 1.6 | 0 | — | Helvetica Now Text | Compact labels on signup and feature-explore controls. |
| nav | 14px | 400 | 1.55 | 0 | — | Helvetica Now Text | Top-level navigation and footer link groups. |
| link | 16px | 400 | 1.5 | 0 | — | Helvetica Now Text | Inline actions, product links, and supporting calls to action. |

OpenType features in use: `"ss01", "ss03", "ss04", "ss19"`, `"salt", "ss02"`.

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 4, 6, 8, 12, 16, 20, 24, 32, 36, 40, 192 px.
- Section rhythm 192px · element gap 16px · card padding 20px · max content width 1126px.

Use a centered content area with a measured maximum width of 1126px, generous side breathing room, and predominantly left-aligned text. The hero is a two-column composition: signup messaging on the left, product interface on the right. Follow it with customer marks and repeated feature bands containing a section title, compact navigation controls, and product cards. Maintain spacious vertical section breaks, while keeping card interiors and testimonial grids comparatively compact. Finish with a conversion block, social proof, and multi-column footer.

## Shape & elevation

- Radius: button `50%` · input `12px` · card `16px` · media `50%` · link `16px` · xs `10px` · sm `12px` · md `16px` · pill `9999px`
- Shadow `inset` (button): `rgba(255, 255, 255, 0.25) 0px 1px 3px 0px inset`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The design is mostly flat: dark surfaces and fine borders establish grouping instead of pronounced shadows. Product captures sit in layered, subtly differentiated panels; testimonial cards use a slightly raised dark fill and thin outline. Keep elevation restrained, reserving the measured inset highlight for the signup button treatment.

## Imagery

Product UI is the primary visual asset: dark dashboards, logs, incident views, maps, and monitoring charts appear as large interface captures inside feature cards. The hero uses a prominent angled dashboard preview rather than lifestyle photography. Keep imagery dark, low-glare, and integrated into the canvas, with lavender highlights visible within charts and controls. Customer logos and testimonial avatars provide small, secondary points of contrast.

## Components

### Hero signup form

Left-aligned headline and supporting copy with a dark rounded email input and vivid primary signup button; product UI occupies the opposite side.

### Feature band

Section heading paired with small carousel controls and an explore pill, followed by product preview cards and concise descriptions.

### Product preview card

Dark interface capture above a compact title and muted description, separated from adjacent previews by subtle borders.

### Explore pill

Small dark pill control with a restrained outline, pale periwinkle label, and compact text.

### Customer logo row

Low-contrast customer marks spread across the page as a quiet credibility cue.

### Testimonial card

Raised near-black card with muted review copy, a small author identity, and a subtle accent icon.

### Footer link columns

Compact grouped navigation on the dark surface, followed by brand details, contact information, and legal links.

### Measured component styles

- **Primary button** (“Explore AI SRE”): background #171926 · text #c9d3ee · border 1px solid #262935 · radius 9999px · padding 8px 12px 8px 16px · 400 13px Helvetica Now Text
- **Secondary button** (“Sign up”): transparent background · text #ffffff · border 1px solid #26272e · radius 8px · padding 0px 8px · 500 13px Helvetica Now Text · shadow rgba(255, 255, 255, 0.25) 0px 1px 3px 0px inset
- **Link** (“Robust MCP server Integrate your logs, m”): background #0f101a · text #939db8 · border 1px solid #191b25 · radius 16px · padding 0px · 400 16px Helvetica Now Text
- **Input**: background #161822 · text #ffffff · border 1px solid #202330 · radius 12px · padding 0px 20px · 400 16px Helvetica Now Text
- **Card** (“@BetterStackHQ is one of the best produc”): background #141621 · text #939db8 · border 1px solid #202330 · radius 16px · padding 20px · 400 16px Helvetica Now Text
- **Navigation item** (“AI SRE”): transparent background · text #939db8 · radius 0px · padding 0px 4px · 400 14px Helvetica Now Text

## Do

- Use #0f101a and #0b0c14 as the dominant dark foundations.
- Keep primary copy white and supporting copy muted blue-gray.
- Reserve vivid lavender and violet-blue for interactive emphasis.
- Show realistic product interfaces as the main illustrative content.
- Use thin borders to define panels without adding heavy shadows.
- Preserve generous vertical pauses between feature bands.

## Don't

- Do not introduce bright section backgrounds.
- Do not use saturated accents as large background fills.
- Do not let product previews overpower the surrounding page hierarchy.
- Do not replace product UI with lifestyle photography.
- Do not add heavy shadows or decorative gradients across every section.
- Do not center all headings; the page is primarily left-aligned.

## Agent prompt

Build a new page in Better Stack’s dark, product-led visual style. Use Deep Canvas (#0f101a) for the page and Midnight Surface (#0b0c14) for broad section bands. Set headings in a bold Helvetica Now Display-like sans serif and body, navigation, and controls in an Inter-like text face. Keep primary text white, supporting copy Blue Gray Text (#939db8) or Slate Caption (#646e87), and reserve Lavender Signal (#98a4f7) or Frosted Periwinkle (#c9d3ee) for links and control labels. Structure the hero as left-aligned copy and signup beside a prominent dark product-interface preview. Repeat spacious feature bands with preview cards, thin borders, compact explore pills, and concise descriptions. Use understated customer proof, restrained layering, and a dense multi-column footer; avoid bright surfaces and heavy shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | logo-cloud | A sparse, three-column logo band on a dark surface. | Customer credibility | Muted logos, Dark section band |
| 2 | feature-grid | Eight-column feature area with a section title and multiple interface-led cards. | Explore feature links, Product discovery | Dashboard previews, Feature cards, Dark panels |
| 3 | feature-grid | Seven-column band with interface cards arranged beneath the section heading. | Explore tracing, Feature discovery | Service map preview, OpenTelemetry panel |
| 4 | feature-grid | Five-column feature band with paired product cards. | Explore incidents, Workflow discovery | Slack interface, Incident list card |
| 5 | feature-grid | Six-column feature band with two dark interface previews. | Explore monitoring, Feature discovery | Error screenshot, Traceroute output |
| 6 | feature-grid | Eight-column band with a broad log interface and adjacent feature card. | Explore logs, Query discovery | Log query preview, Compact action card |
| 7 | feature-grid | Six-column feature band with paired cards. | Explore monitoring, Alert discovery | Metrics chart, Collaboration panel |
| 8 | feature-grid | Seven-column feature band with wide and narrow product cards. | Explore error tracking, Integration discovery | Error notification, SDK illustration |
| 9 | feature-grid | Eight-column band with session-replay and event-capture cards. | Explore user monitoring, Replay discovery | Session replay, Event capture interface |
| 10 | feature-grid | Six-column feature band with two status-page previews. | Explore status pages, Subscribe to updates | Branded status page, Subscription panel |
| 11 | cta | Two-column conversion block with signup form beside a subtle network graphic. | Email signup, Start for free | Dark form field, Lavender CTA |
| 12 | testimonials | Multi-column social-proof area with customer marks above staggered review cards. | Browse testimonials, Customer validation | Review cards, Author avatars, Social icons |
| 13 | footer | Two-column footer navigation grouping product, resource, company, and community links. | Explore site sections | Link columns, Dark background |
| 14 | footer | Single-column closing strip with brand, contact details, and legal links. | Contact, Legal navigation | Brand lockup, Fine-print links, Subtle divider |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/betterstack-com