Skip to content
DesignMunkDesignMunk Submit a site

Better Stack

betterstack.com
30x cheaper than Datadog. Predictable pricing. Exceptional customer support.
Software Technology Tailwind Homepage Helvetica Now
Share Visit site
betterstack.com DESKTOP · 1440
Better Stack

AI Breakdown

Design export

---
version: alpha
name: Better Stack
description: 30x cheaper than Datadog. Predictable pricing. Exceptional customer support.
colors:
  primary: "#939db8"
  secondary: "#848c8c"
  tertiary: "#5b63d3"
  neutral: "#ffffff"
  brand-ruined-smores: "#0e0e16"
  brand-christmas-silver: "#dfdfe0"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Helvetica Now Display
    fontSize: 53px
    fontWeight: 500
    lineHeight: 1.1
  headline-md:
    fontFamily: Helvetica Now Display
    fontSize: 42px
    fontWeight: 500
    lineHeight: 1.03
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: Helvetica Now Display
    fontSize: 33px
    fontWeight: 500
    lineHeight: 1.21
  headline-xs:
    fontFamily: Helvetica Now Text
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.19
    letterSpacing: -0.009em
  body-md:
    fontFamily: Helvetica Now Text
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 4px
  md: 10px
  lg: 26px
spacing:
  xs: 8px
  sm: 20px
  md: 36px
  lg: 44px
  xl: 152px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.md}"
    padding: 17px 24px
    height: 50px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 17px 24px
    height: 50px
  button-link:
    textColor: "#98a4f7"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.lg}"
    padding: 16px
---

# Better Stack: Midnight Observability with Lilac Primary Actions

## Overview

Better Stack presents a serious, engineering-first brand for B2B observability. The interface is dark, quiet, and low-chroma, prioritizing legibility and scannability over spectacle. Density is medium: tight headlines with generous sectional spacing for clear breaks. Use a single strong accent to guide actions and treat screenshots as supportive texture rather than the focus.

## Colors

- Primary (#939db8): Steel-blue slate for body text, secondary headings, and icons on dark backgrounds.
- Secondary (#848c8c): Muted gray for tertiary labels, captions, and inactive states.
- Tertiary (#5b63d3): Lilac accent for primary actions, active states, and progress.
- Neutral (#ffffff): Paper white for high-emphasis text and highlights on dark.
- brand-ruined-smores (#0e0e16): Near-black page background and canvas color.
- brand-christmas-silver (#dfdfe0): Subtle borders, hairlines, and dividers; also input outlines.
- surface (#ffffff): Default surface color for light-mode containers.
- on-surface (#939db8): Default text color on light surfaces and subdued text on dark.

## Typography

- Headlines use Helvetica Now Display at 53/42/33px (weights 500) and 26px for headline-xs. Tight line heights (1.1–1.21) keep large statements compact. Helvetica Now Display is self-hosted (custom) and not freely loadable by agents. Substitutes: Roboto (Google), Noto Sans (Google), or the system stack Arial/Helvetica.
- Body copy uses Helvetica Now Text at 20px/1.5 for readable paragraphs and UI labels. Helvetica Now Text is also self-hosted (custom). Substitutes: Roboto (Google), Noto Sans (Google), or Arial/Helvetica.
- Use heavier emphasis for short metrics and prices; avoid mixing families. Maintain the provided letter-spacing values on headline-md (-0.01em) and headline-xs (-0.009em) when available.

## Layout

- Spacing scale is compact-to-expansive: 8, 20, 36, 44, then a large 152 jump for section breaks. Use xl (152px) as vertical section padding.
- Favor a simple 12-column grid with generous outer gutters; pair left-aligned copy against right-leaning imagery where relevant.
- Use md (36px) as the default inter-block gap in content bands; sm (20px) for intra-component spacing; xs (8px) for micro gaps in inputs and meta rows.
- Cards and slabs can span full width inside sections; reserve lg (44px) margins inside complex panels.

## Elevation & Depth

- No drop shadows are used (sm–xl are none). Hierarchy relies on contrast between #0E0E16, #FFFFFF surfaces, and thin #DFDFE0 borders.
- The only measured effect is an inner inset highlight: rgba(255,255,255,0.25) 0 1px 3px inset. Use it sparingly for input wells or pressed states.
- Depth is also expressed via tonal steps and whitespace — enlarge vertical padding (152px) to separate major bands.

## Shapes

- Rounded scale: 4px (sm), 10px (md), 26px (lg).
- Primary interactive elements prefer 10px for approachability without pill-like softness.
- Large containers and feature cards use 26px to signal importance and grouping.
- Links and text-only elements stay square (0px) to remain lightweight.

## Components

Buttons
- Primary button: background #5B63D3, text #FFFFFF, 10px radius, 50px height, 17x24px padding. Use for the principal CTA only.
- Secondary button: text #939DB8 on transparent or appropriate surface, 4px radius, 50px height, 17x24px padding. Pair with primary.
- Link button: text #98A4F7, 0px radius. Use for inline actions and lightweight links.

Card
- Background #FFFFFF, text #939DB8, 26px radius, 16px padding. Add a 1px #DFDFE0 border on dark canvases to maintain contrast; avoid drop shadows.

### Hero signup bar
- Left-aligned headline using headline-lg (53px/500/1.1) with supporting body-md (20px). Email input set at 50px height to align with the primary button; border #DFDFE0, radius 10px.

### Product carousel with dots
- Dark screenshot container on #0E0E16. Pagination dots use secondary #848C8C; active dot uses #5B63D3. Keep 36px gaps around the media.

### Cost comparison slab
- Two-column comparison within a 26px-radius container. Use headline-xs (26px) for labels and body-md (20px) for explanatory text. Separate columns with a 1px #DFDFE0 divider.

### Feature link grid
- Repeating links with bold titles and one-line descriptions. Titles use headline-xs (26px/500/-0.009em); descriptions use body-md. Links adopt #98A4F7 and show no underline by default.

### Customer logo strip
- Monochrome logos rendered in on-surface #939DB8 on #0E0E16 with sm (20px) horizontal gaps and md (36px) vertical padding.

### Testimonial feed
- Quotes set in body-md with names in 500 weight. Use 36px vertical rhythm between items and #DFDFE0 hairlines to batch long lists.

### Footer columns
- Multi-column link lists using body-md. Add a top border #DFDFE0 and lg (44px) vertical padding above/below. Keep link color at #939DB8; accent items may use #98A4F7.

## Do's and Don'ts

Do
- Use #5B63D3 only for primary actions and active states.
- Keep buttons 50px tall with 10px corners; pair with 20px body copy.
- Separate major bands with 152px vertical padding on large screens.
- Use 1px #DFDFE0 borders instead of shadows for grouping.

Don't
- Add soft drop shadows to cards or buttons.
- Mix multiple accent colors inside a single section.
- Reduce body text below 20px; legibility is a principle of the system.
- Overuse bolding; save weight 500 for headings and key metrics.

## Agent Prompt Guide

Quick reference
- Text: #939DB8 (on-surface) and #FFFFFF for high-emphasis
- Background: #0E0E16 (canvas)
- Border: #DFDFE0 (hairlines/dividers)
- Accent: #5B63D3 (primary actions)

1) Build the hero
- Canvas: background #0E0E16
- Headline: 53px, weight 500, line-height 1.1, family "Helvetica Now Display", fallback Roboto, Noto Sans, Arial
- Body: 20px/1.5 in "Helvetica Now Text", fallback Roboto, Noto Sans
- Email input: 50px height, 10px radius, 1px border #DFDFE0, text #939DB8
- Primary button: 50px height, 10px radius, padding 17px 24px, background #5B63D3, text #FFFFFF

2) Feature link grid (3-up)
- Section padding: 152px top/bottom
- Each item: title 26px/500 (-0.009em), description 20px/1.5
- Link color: #98A4F7, no underline by default
- Gaps: 36px between items, 20px within items

3) Cost comparison card
- Container: 26px radius, background #FFFFFF, 16px inner padding, 1px outer border #DFDFE0 when on #0E0E16
- Headings: 26px/500; values can use 42px/500 where needed
- Copy: 20px/1.5, color #939DB8

4) Footer
- Top border: 1px #DFDFE0
- Columns: 36px column gaps, 44px vertical padding
- Link text: 20px/1.5, color #939DB8; accent links #98A4F7

5) Carousel dots
- Inactive dot: 8px circle, color #848C8C
- Active dot: 8px circle, color #5B63D3
- Spacing: 8px between dots, group centered under media

## Similar Brands

- Linear: Dark UI with tight headlines and a purple accent; Linear is airier and more typographic, while Better Stack leans denser and pricing-led.
- Vercel: Midnight canvas and minimal chrome; Vercel uses brighter gradients, whereas Better Stack stays matte and border-driven.
- Sentry: Developer-focused with metric-heavy sections; Sentry is lighter and orange-accented versus Better Stack's lilac-on-black.
- Datadog: Observability giant with dense feature grids; Datadog is more colorful and card-shadowed, Better Stack is crisper with no shadows.
- Raycast: Dark, focused, and product-first; Raycast's hero imagery is bolder, while Better Stack prioritizes the CTA and cost math.

More like this

Browse Software →
pallyy.com
Pallyy Marketing
Pallyy
Plan, approve, schedule, and publish on one simple social calendar.
Homepage · 2 hours ago
pallyy.com
Pallyy Pricing Marketing
Pallyy Pricing
A tidy three-column layout makes comparison easy, with the “Agency” tier clearly emphasized through a blue card, primary button, and “Recommended” badge.…
Pricing · 2 hours ago
kagaz.app
Kagaz Developer Tools
Kagaz
Invoice generator and API that creates beautiful invoices fast.
Homepage · 13 hours ago
polymer.co
Polymer HR & Recruiting
Polymer
Attract and hire great people with a powerful ATS and job board
Homepage · 15 hours ago