Iris Blue
#5b63d3Supporting palette color for small decorative accents when the core palette needs contrast. Do not promote it to the primary CTA color
Better Stack
betterstack.com
Website preview
The design language
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.
Color palette
brand
accent
Periwinkle Glow
#98a4f7Link color, gradient end stop, accent borders — the only chromatic UI color
neutral
Void Black
#0f101aPage canvas, nav background, link backgrounds
Carbon Surface
#151621Card surfaces, primary button background — one step above the canvas
Gunmetal
#1f2433Input borders, elevated card borders, subtle surface lift
Steel Border
#939db8Primary hairline border, icon outlines, nav borders — the workhorse border that defines most shapes
Muted Steel
#646e87Secondary text, subdued borders, inactive nav items
Frost
#c9d3eeActive nav text, icon strokes, light-on-dark headings
Pure White
#ffffffPrimary heading text, body text emphasis, button text
Deep Ink
#000000SVG icon fills, shadow anchor for inset highlights
Typography
Type scale
Major Second (1.125) · 16px basedisplay
53px · 500 · 1.08 · -0.53px trackingThe quick brown fox jumps
heading-lg
40px · 700 · 1.1 · -0.4px trackingThe quick brown fox jumps
heading
36px · 700 · 1.17 · -0.36px trackingThe quick brown fox jumps
heading-sm
28px · 700 · 1.45 · -0.28px trackingThe quick brown fox jumps
subheading
20px · 400 · 1.45 · -0.2px trackingThe quick brown fox jumps
body
16px · 400 · 1.6 · -0.16px trackingThe quick brown fox jumps
body-sm
14px · 400 · 1.55 · -0.14px trackingThe quick brown fox jumps
text-13
13px · 400 · 1The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Helvetica Now Text
- Weights
- 400, 500, 700
- Sizes
- 10, 12, 13, 14, 16, 20, 28, 36px
- Line height
- 1.45, 1.50, 1.55, 1.60, 1.85
- Letter spacing
- -0.01em uniformly
- Fallback
- Inter
- Features
- "ss01" on, "ss03" on, "ss04" on, "ss19" on
Body text, navigation, buttons, inputs, card content, links, icons
Additional typeface
Helvetica Now Display
- Weights
- 500, 700
- Sizes
- 40, 53px
- Line height
- 1.08, 1.10
- Letter spacing
- -0.01em
- Fallback
- Inter Display
- Features
- "salt" on, "ss02" on; "ss01" on, "ss03" on, "ss04" on, "ss19" on
Hero and section headlines
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 20px
- Element gap
- 20px
Border radius
nav
10pxcards
16pxinputs
10pxbuttons
9999pxSpacing scale
1px2px4px6px8px12px16px20px24px28px36px40px44px48px53px56px128px150px158px164px165px192px213pxGuidelines
Do
- Use #939db8 as the default border color for cards, inputs, and dividers — it's the structural border of the system
- Use the violet-blue gradient (linear-gradient(353deg, #5b63d3, #7c87f7)) exclusively for the primary CTA — one gradient, one job
- Apply the inset white highlight (rgba(255,255,255,0.25) 0 1px 3px inset) to nav and filled buttons for a 1px top rim-light
- Use Helvetica Now Display at weight 500 for headlines — not 700; authority comes from precision, not weight
- Keep letter-spacing at -0.01em uniformly across all text sizes; the tracking is part of the system identity
- Enable font features "ss01", "ss03", "ss04", "ss19" on body text and add "salt", "ss02" on display — these shape the distinctive letterforms
- Define depth through surface tones (#0f101a → #151621 → #1f2433), not drop shadows
Don’t
- Don't use drop shadows for elevation — the system uses inset highlights and surface contrast only
- Don't use the periwinkle (#98a4f7) as a filled button background — it belongs to links and gradient stops
- Don't use weight 700 for body or nav text — 500 is the maximum for UI; 700 is reserved for emphasis only
- Don't introduce new chromatic colors — the 10% colorfulness budget is already spent on the violet-blue accent
- Don't use sharp corners (0-4px) on cards or buttons — 16px for cards, 9999px for buttons, 10px for inputs
- Don't use the canvas color (#0f101a) for card surfaces — cards must be at least #151621 to be distinguishable
- Don't use bright or saturated text colors — text should be white, #c9d3ee, or #646e87 only
Components
Primary CTA Button (Gradient)
Main call-to-action — sign up, start for freePill shape (9999px radius). Background: linear-gradient(353deg, #5b63d3 17.51%, #7c87f7 183.08%). Text: white, Helvetica Now Text 16px weight 500. Padding: 8px 20px. No border. White text. This is the only gradient element in the UI — it earns the right to be chromatic by being the conversion point.
Ghost/Outlined Button
Secondary actions — explore pricing, explore AI SREPill shape (9999px radius). Transparent background, 1px border in #939db8 or #262935. Text: #c9d3ee or #ffffff, Helvetica Now Text 14-16px weight 500. Padding: 8px 20px. Often paired with a chevron/arrow icon.
Email Input Field
Hero lead captureBackground: #0f101a (canvas, not surface — sits as a well). Border: 1px #1f2433. Radius: 10px. Padding: 12px 20px. Placeholder text in #646e87. Helvetica Now Text 16px weight 400. Pairs with a gradient CTA button to its right.
Comparison Card
Pricing/feature comparison panel (the 'At a fraction of your current costs' section)Background: #151621. Border: 1px #1f2433. Radius: 16px. Padding: 20-24px internal. Contains 3-column metric headers (1 TB, 1 TB, 1 TB), pricing rows, and a fine-print footnote in 12px #646e87. The card creates a floating data table feel.
Testimonial Card
Social proof tiles in the gridBackground: #151621. Border: 1px #1f2433. Radius: 16px. Padding: 20px. Contains quoted text (Helvetica Now Text 14-16px), a handle in #98a4f7, a display name, an avatar circle, and a small periwinkle checkmark icon.
Top Navigation Bar
Primary site navigationBackground: #0f101a (canvas, transparent over page). Height: ~56px. Horizontal layout with logo left, nav links center (Platform, Documentation, Pricing, Community, Company, Enterprise), Sign In and gradient Sign Up button right. Subtle inset white highlight at the top edge (rgba(255,255,255,0.25) 0 1px 3px inset) creates a hairline divider from the page.
Logo Trust Bar
Social proof below heroHorizontal row of partner/customer logos (NordVPN, UNICEF, Canada, Decathlon, Raycast, Ametek). Logos are monochrome #939db8 or #646e87, no color, evenly spaced with ~40-60px gaps. No background, no border — sits directly on the dark canvas.
Product Screenshot Showcase
Hero visual — dashboard mockupLarge dark product UI mockup with internal panels showing observability charts (area charts in muted periwinkle, line graphs, KPI cards). The screenshot itself acts as a visual element, floating on the canvas with no frame or shadow.
Section Heading Block
Section titles (e.g., 'Don't just take our word for it')Centered text block. Heading: Helvetica Now Display 40px weight 500, white. Subtext: Helvetica Now Text 16-20px weight 400, #c9d3ee or #646e87. Max-width contained, centered. Often followed by a carousel/grid of cards below.
Metric Stat Block
Key statistics in feature sections (80x more data, 98% lower costs)Large number in Helvetica Now Display 40-53px weight 500, white. Label below in 14-16px weight 400, #c9d3ee. Left-aligned within a two-column layout, tight 4-8px gap between number and label.
Navigation Dropdown Item
Dropdown menu items under Platform/Community nav linksBackground: #151621. Border: 1px #1f2433. Radius: 16px. Padding: 16-20px. Contains small icon + label pairs. Text in #ffffff or #c9d3ee.
Surfaces & elevation
Level 0
Canvas
#0f101aPage background, full-bleed dark base
Level 1
Card Surface
#151621Card bodies, comparison panels, product containers
Level 2
Elevated Border
#1f2433Input fields, bordered card edges
No drop shadows. Elevation is implied through surface tone shifts (#0f101a → #151621 → #1f2433) and a single inset white highlight (rgba(255,255,255,0.25) 0 1px 3px inset) on the nav and filled buttons, creating a 1px rim-light at the top edge. This is a deliberately flat system — shapes are defined by borders and surface contrast, not by floating panels.
Navigation Bar
rgba(255, 255, 255, 0.25) 0px 1px 3px 0px inset
Primary Button (filled)
rgba(255, 255, 255, 0.25) 0px 1px 3px 0px inset
Layout & imagery
Layout
Max-width 1200px centered content with full-bleed dark sections. Hero is a split layout: left column with headline (40-53px display), subtext, email input + gradient CTA, and fine print; right column with a large product screenshot that overlaps or sits as a floating panel. Subsequent sections alternate between two-column text+visual layouts and centered text blocks with card grids below. Sections are separated by generous vertical breathing room (80px+). Testimonials appear in a 4-column card grid. The rhythm is: dark hero → 2-col cost comparison → card grid testimonials → dark footer.
Imagery
The site uses product screenshots as hero visuals — actual dashboard UI mockups showing observability charts, logs, and metrics panels. These are not stock photos but rendered product surfaces, dark-themed to match the page. No lifestyle photography, no abstract illustrations, no 3D renders. Partner/customer logos appear as monochrome wordmarks in #939db8. The visual language is entirely product-centric: the tool's own interface IS the marketing imagery.
Design notes
Agent Guide
## Quick Color Reference - Text primary: #ffffff - Text secondary: #c9d3ee - Text muted: #646e87 - Canvas: #0f101a - Card surface: #151621 - Border: #939db8 - Accent / links: #98a4f7 - primary action: #151621 (filled action) ## Example Component Prompts 1. Create a Primary Action Button: #151621 background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 2. **Ghost Navigation Button**: Pill shape, transparent background, 1px border in #262935, text #c9d3ee, Helvetica Now Text 14px weight 500, padding 8px 20px, with a right chevron icon. 3. **Comparison Card**: Background #151621, 1px border #1f2433, 16px radius, 24px padding. Contains a 3-column header row with metric labels in 20px weight 500 white, a divider in #1f2433, and rows comparing competitor vs Better Stack with prices in 16px weight 500. 4. **Testimonial Tile**: Background #151621, 1px border #1f2433, 16px radius, 20px padding. Quote text in 14px weight 400 #ffffff, Twitter handle in #98a4f7, display name in 14px weight 500, avatar circle 32px, small periwinkle checkmark icon. 5. **Hero Section**: Full-width dark canvas (#0f101a). Left: 53px display headline in white, 20px subtext in #c9d3ee, email input (background #0f101a, 1px border #1f2433, 10px radius) paired with a gradient 'Start for free' button. Right: large product screenshot floating with no frame or shadow. Vertical spacing 40px between headline and subtext.
Similar brands
Linear
Same dark engineering-tool aesthetic with tight borders, gradient CTA, and flat surfaces
Vercel
Dark canvas with a single chromatic accent (blue/indigo gradient), hairline borders defining shapes
Render
Near-black background, monochrome surfaces, minimal color used only for primary actions
Railway
Dark devtool interface with flat cards, border-defined shapes, restrained accent color
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
