# How betterstack.com is designed

[Open the live Fudge conversation](https://design.withfudge.com/share/betterstack.com-design)

Last updated: 2026-08-04

## Captured pages

[![Centered hero with oversized white headline and two dark feature cards below](https://pin.fontofweb.com/7013?format=jpg)](https://design.withfudge.com/share/pin-7013)

[Centered hero with oversized white headline and two dark feature cards below](https://design.withfudge.com/share/pin-7013)

[![Dark testimonial mosaic with many quote cards and muted brand logos above](https://pin.fontofweb.com/7011?format=jpg)](https://design.withfudge.com/share/pin-7011)

[Dark testimonial mosaic with many quote cards and muted brand logos above](https://design.withfudge.com/share/pin-7011)

[![Error tracking band with a code window, arrows, and a side card](https://pin.fontofweb.com/7010?format=jpg)](https://design.withfudge.com/share/pin-7010)

[Error tracking band with a code window, arrows, and a side card](https://design.withfudge.com/share/pin-7010)

[![AI SRE section with chat bubbles, latency chart, and alert card](https://pin.fontofweb.com/7015?format=jpg)](https://design.withfudge.com/share/pin-7015)

[AI SRE section with chat bubbles, latency chart, and alert card](https://design.withfudge.com/share/pin-7015)

[![Regions and S3 storage section with map panel beside a storage panel](https://pin.fontofweb.com/7016?format=jpg)](https://design.withfudge.com/share/pin-7016)

[Regions and S3 storage section with map panel beside a storage panel](https://design.withfudge.com/share/pin-7016)

[![Compliance trio with three circular badges under a centered heading](https://pin.fontofweb.com/7017?format=jpg)](https://design.withfudge.com/share/pin-7017)

[Compliance trio with three circular badges under a centered heading](https://design.withfudge.com/share/pin-7017)

## Overview

Better Stack’s visual system is a dark, technical brand dressed with restraint. The page uses near-black fields, white headlines, and a cool purple accent to make dense observability content feel calm rather than crowded. The tone is not glossy or theatrical. It is compact, precise, and product-led: large claims sit above live-looking interfaces, while supporting copy stays quiet and short.

The site’s rhythm comes from section changes more than from decoration. A centered hero leads into proof-heavy card rows, then into more product-specific panels such as compliance, regions, tracing, and AI-assisted incident handling. Each section keeps the same family of surfaces and type, but changes the composition enough that the page feels like a sequence of chapters. The result is a system that can handle marketing, trust, and product explanation without switching visual languages.

## Colors

The palette is intentionally narrow. Dark canvas colors do most of the work, and the purple accent appears only where the page needs action or emphasis. White is reserved for the most important text, while several blue-gray steps handle the rest of the hierarchy.

| token | value | use |
|---|---|---|
| `canvas` | `#0B0C14` | Full-page background, deep empty space, and the darkest footer-like areas |
| `surface` | `#0F101A` | Raised dark fields behind cards, auth panels, and utility blocks |
| `panel` | `#171824` | Main card fill for feature panels and trust blocks |
| `panel-strong` | `#171926` | Slightly heavier card tone for denser UI fragments and sign-up content |
| `border` | `#2F3547` | The 1px hairline around cards, inputs, and pill controls |
| `ink` | `#FFFFFF` | Primary headlines, key labels, and button text on dark surfaces |
| `muted-ink` | `#939DB8` | Main paragraph copy, section subheads, and quiet descriptions |
| `quiet-ink` | `#727DA1` | Softer supporting text inside darker blocks and compact metadata |
| `faint-ink` | `#646E87` | Fine-print lines, footer-like text, and secondary utility labels |
| `action` | `#7C87F7` | Primary filled button color and the strongest accent on the page |
| `action-deep` | `#5B63D3` | The darker end of the button gradient and pressed-state depth |
| `link` | `#C9D3EE` | Inline links and lightly emphasized text on dark backgrounds |
| `link-soft` | `#98A4F7` | Softer accent text where the page wants emphasis without full button treatment |

The page uses these colors in a layered way: `canvas` creates the void, `panel` and `panel-strong` create the content islands, and `border` keeps each island legible without adding shadow-heavy depth. The purple family is deliberately soft. It reads as a controlled action color, not a neon signal. The hero headline can also taper from white into `#C9D3EE` or `#939DB8`, which gives the display type a colder, metallic finish without changing the overall palette.

The most important relationship is this: white is for authority, muted blue-gray is for explanation, and purple is for intent. Nothing else needs to compete.

## Typography

Helvetica Now is the only material family in the system, and the supplied packet credits it to Monotype Imaging Inc. The site uses that single family to carry everything from hero statements to tiny legal lines, with weight and size doing almost all of the hierarchy work.

| token | family | size | weight | leading | tracking | use |
|---|---|---:|---:|---:|---:|---|
| `hero-display` | Helvetica Now | 3.3125rem | 500 | 1.1 | 0em | Centered page hero and major landing-page statements |
| `section-display` | Helvetica Now | 2.5rem | 700 | 1.08 | -0.01em | Centered section headings such as compliance and AI SRE |
| `section-display-compact` | Helvetica Now | 2.25rem | 700 | 1.08 | -0.01em | Denser feature titles and shorter page bands |
| `card-heading` | Helvetica Now | 1.75rem | 500 | 1.17 | 0em | Card titles, feature labels, and auth headings |
| `body` | Helvetica Now | 1rem | 400 | 1.5 | 0em | Paragraph copy, card descriptions, and explanatory text |
| `body-medium` | Helvetica Now | 1rem | 500 | 1.5 | 0em | Primary button labels and emphasized copy |
| `ui-label` | Helvetica Now | 0.875rem | 400 | 1.55 | 0em | Nav items, helper text, and small control labels |
| `ui-label-medium` | Helvetica Now | 0.875rem | 500 | 1.55 | 0em | Secondary actions, compact headings, and button chrome |
| `caption` | Helvetica Now | 0.8125rem | 400 | 1.6 | 0em | Smaller helper lines and subtle supporting notes |
| `micro` | Helvetica Now | 0.75rem | 500 | 1.43 | 0em | Status chips, tiny metadata, and small UI counters |
| `legal` | Helvetica Now | 0.625rem | 400 | 1.45 | 0em | Footer legal text and the smallest disclaimers |

The hierarchy is disciplined. Large headings stay close to the 53px, 40px, and 36px sizes in the packet, while utility text drops to 14px, 13px, 12px, and 10px without losing the family voice. The result is a system that feels coherent even when the screen mixes marketing copy, product labels, code windows, and legal copy. The display text leans medium or bold, but not excessively heavy; body text stays regular and compact; buttons are medium weight so they read clearly against the dark fills. Negative tracking is subtle and reserved for the larger section headings, which keeps the page sharp without making it feel compressed.

## Layout

The page is built around centered, high-contrast compositions. The hero places a large statement at the top of the viewport, then lets the content breathe with a lot of dark space before the first card row. That breathing room matters: it makes the page feel premium and avoids the clutter that many observability sites fall into. Content blocks are kept to a narrow reading width even when the canvas itself is wide, so the text remains readable and the product art can expand without forcing the copy to stretch.

After the hero, the page shifts into structured rows and paired panels. Some sections use two large cards side by side, while others use three equal cards under a centered heading. The spacing between these blocks is generous and deliberate: there is enough room for the eye to reset, but not so much that the page loses momentum. The sign-up screen follows the same rule in a different register. It is a centered single-column card sitting in a large empty field, which gives the action a private, almost cockpit-like focus.

The footer uses a classic directory layout: multiple columns, a logo-and-summary band, then a thin legal strip. That stack keeps informational density under control. The whole system depends on predictable gutters, frequent 1px borders, and rounded rectangles of consistent scale, so the layout stays calm even when the page includes charts, code panes, logos, and testimonials at once.

## Visual language

Better Stack’s visual language is dark, technical, and controlled. Surfaces feel like matte panels rather than glassy containers. Borders are the main separator, not shadows. Rounded corners are present, but they are moderate and uniform, which keeps the interface from sliding into playful SaaS styling. The system looks engineered for clarity: each panel says what it is, and each section uses enough contrast to stand apart without calling attention to itself.

The product imagery is not decorative wallpaper. It is mostly UI fiction: trace maps, region diagrams, log explorers, charts, code windows, chat bubbles, and storage trees. Those interfaces are dimly lit and framed inside the same dark card system as the marketing page, which makes them feel native to the brand. The accent purple shows up in controls, links, and small UI highlights, while tiny green states are reserved for live or healthy indicators. That keeps status signals readable without turning the whole palette into a dashboard rainbow.

Shape matters at two levels. Small controls use pill-like or gently rounded outlines; larger cards use a consistent 16px-radius family; the most prominent panels feel broad and stable rather than floaty. Motion and glow are not the point here. The visual language is about crisp containment, not sparkle. Even the headline treatment keeps that mood: the white-to-gray gradient adds polish, but it still reads as restrained, not flashy.

## Components

### Hero block

- **Anatomy:** One large centered headline, a short subhead, then one or two compact actions.
- **Typography:** The headline lives at display scale and should feel solid and tight. Supporting text sits a step or two smaller and stays muted.
- **Surface:** No card frame is needed. The dark canvas itself is the stage.
- **Hierarchy:** The headline must dominate; everything else should stay subordinate and close.

### Filled action button

- **Shape:** Usually pill-like, sometimes with a softer 12px-16px feel on form buttons.
- **Surface:** Purple fill with a slight two-tone gradient between `#5B63D3` and `#7C87F7`.
- **Text:** White, medium weight, centered.
- **Depth:** A thin inset highlight keeps the button from feeling flat, but the control should still read as simple and direct.
- **Use:** Primary navigation, demo prompts, and sign-up submission.

### Feature and proof cards

- **Anatomy:** A title, a short description, and a product image or UI fragment.
- **Surface:** Dark panel fill with a 1px border and consistent rounded corners.
- **Spacing:** Comfortable inner padding, usually in the 20px-24px range, with enough air around the text block to keep it readable.
- **States:** The visible states are mostly calm and static; the card’s job is to frame the content, not perform.
- **Composition:** Keep text and image in a clear relationship, either split across the card or stacked in a way that preserves the hierarchy.

### Compliance trio

- **Anatomy:** Three equal cards, each with a circular badge, a short heading, and a brief supporting line.
- **Typography:** Small headings with regular body copy underneath.
- **Surface:** Same dark panel language, but slightly more compact than the hero sections.
- **Hierarchy:** The badges establish recognition, while the text confirms trust and standards.
- **Composition:** Equal weight across all three cards keeps the section balanced and formal.

### AI SRE section

- **Anatomy:** A centered headline, a short explanation, a pill button, then a split composition of chat and analytics surfaces.
- **Surface:** Dark throughout, with the product cards sitting inside the same panel system.
- **Typography:** The headline is a major section heading; the subcopy is quiet and measured.
- **Visual emphasis:** Chat bubbles and monitoring panels provide the story; the section should not rely on decorative illustration.
- **Relationship:** The assistant-like content remains subservient to the product UI, which keeps the feature believable.

### Regions and storage section

- **Anatomy:** A map-like panel on one side and a storage or file-tree panel on the other.
- **Surface:** Identical dark card language, with the map and tree art acting as the main contrast.
- **Typography:** Small, short headings and body copy; no long paragraphs.
- **Use of accent:** Purple location markers and link text are enough; do not add extra colors.
- **Composition:** The pair should feel like two views of the same system rather than two unrelated illustrations.

### Error tracking and tracing bands

- **Anatomy:** Large section heading, carousel arrows or navigation controls, then wide cards showing code, charts, and incident detail.
- **Surface:** Dark, bordered, and slightly denser than the hero.
- **Hierarchy:** The headline stands alone first, then the carousel content spreads out below it.
- **Visual language:** Use dimmed code panes, subtle highlights, and chart-like grids to keep the material technical.
- **Composition:** The cards should feel horizontally scrollable or cyclable, even when presented in a static layout.

### Testimonial wall

- **Anatomy:** A centered intro heading, a short supporting line, then many quote cards of varying height.
- **Surface:** Dark cards with thin borders, close to the rest of the site’s panel language.
- **Typography:** Quotes are regular-weight and readable; names and handles are compact.
- **Composition:** The mosaic should feel dense but orderly, with enough spacing to avoid visual noise.
- **Branding:** Logos above the grid should remain muted and secondary, not louder than the testimonials.

### Auth / sign-up card

- **Anatomy:** Small mark at the top, a centered heading, one field, one strong action, then legal copy below.
- **Surface:** A dark panel centered in a very open canvas, with the same rounded geometry as the rest of the site.
- **Typography:** The heading is larger than the form labels but still controlled; helper text stays quiet.
- **Action:** The submit button is the brightest element in the view and should remain the only obvious call to action.
- **Composition:** Keep the form narrow and isolated so it feels focused rather than editorial.

### Footer

- **Anatomy:** Multi-column navigation, brand summary, contact details, social icons, then legal links.
- **Surface:** Deep dark background with the same faint border language as the rest of the site.
- **Typography:** Smaller sizes, softer color, reduced prominence.
- **Hierarchy:** Navigation first, brand summary second, legal lowest.
- **Composition:** Keep the footer calm and dense; it should close the page, not restart it.

## Responsive behavior

When the layout narrows, the system should collapse by hierarchy rather than by decoration. Keep the dark canvas, the purple actions, and the 1px borders intact, then reduce the number of columns per row before shrinking type too aggressively. The hero should remain centered and readable; the next sections should stack into a single column or a simple two-card sequence; and the dense testimonial grid should become a straight vertical flow before it becomes cramped.

The sign-up card should stay centered and narrow, with the helper text and legal copy preserved beneath the button. Product panels should move from side-by-side to top-to-bottom while keeping their internal spacing readable. If a section uses navigation arrows or carousel controls, those controls should stay close to the section title and remain easy to reach. The footer should fold into a linear stack of groups rather than forcing tiny multi-column text into a narrow screen.

## Practical implementation guidance

### Preserve

- Keep Helvetica Now as the only type family and use weight changes to carry hierarchy.
- Keep the canvas near-black and let dark panel fills define the structure.
- Keep purple as the action color and reserve it for buttons, links, and key emphasis.
- Keep card corners consistent instead of mixing many radii.
- Keep borders visible enough to frame each panel without leaning on shadow.

### Avoid

- Avoid adding a second font family for contrast.
- Avoid turning links into bright electric blue or warm accent colors.
- Avoid glossy glass effects, heavy blur, or oversized soft shadows.
- Avoid over-rounding everything; the system depends on stable rectangles.
- Avoid making body copy too bright; the muted text family is part of the tone.

### Recommended build order

1. Set the dark canvas, panel fills, border color, and purple action tokens.
2. Build the hero typography and the primary button.
3. Add the reusable card surface and the 16px-radius panel pattern.
4. Build the major feature sections: compliance, AI SRE, regions, and tracing.
5. Add the testimonial wall and the footer.
6. Finish the centered sign-up card and verify that its hierarchy matches the rest of the page.

### Accessibility

- Keep the white-on-dark contrast strong for all headlines and actions.
- Make sure muted body text still clears readable contrast against the darkest surfaces.
- Give focus states enough separation from the surrounding border so keyboard users can find them.
- Treat icons, logos, and circular badges as decorative only when they carry no information.
- Keep line lengths short in centered sections so the page stays readable at large and small widths.

## Scope note

This guide covers Better Stack’s dark marketing homepage sections, trust and compliance blocks, observability feature panels, testimonial wall, footer, and the centered sign-up card. It does not define motion, alternate mobile breakpoints, or interaction states beyond what is visible in the supplied screens.

## More website design guides

[Browse website design guides by pattern and website](/design-guides).