betterstack.com DESIGN.md

Overview

betterstack.com presents a predominantly dark surface treatment in the captured pages. The system is anchored by #939db8, #000000, and #0f101a, with typography led by Helvetica Now. The guide below names reusable design roles only where the captured evidence supports them.

The reference set uses representative captured pages. It is a design reference, not a claim about the site’s private source code or a complete responsive specification.

Design tokens

The token names are practical labels for the recorded values. They are not claims about the source site’s variable names.

Colors

token	value	observed use
color.text	#939db8	text on page content
color.surface	#000000	surface on page content
color.surface	#0f101a	surface on page content
color.surface	#171824	surface on page content
color.text	#ffffff	text on page content
color.border	#727da1	border on page content
color.border	#646e87	border on page content in the footer
color.text	#c9d3ee	text on page content
color.text	#98a4f7	text on page content
color.surface	#171926	surface on page content
color.surface	#5b63d3	surface on page content in the button
color.surface	#2f3547	surface on page content

Typography

token	font family	size	weight	line height	letter spacing	observed use
type.body-16px	Helvetica Now	16px	400	24px	normal	<div>, <p>, <h3>, <a>, and <button> in the button
type.body-14px	Helvetica Now	14px	400	21.7px	normal	<div>, <div> in the main, <button> in the button, <p> in the main, <a> in the main, <div> in the nav, <div> in the footer, <a> in the nav, <p> in the footer, and <a> in the footer
type.body-16px	Helvetica Now	16px	500	24px	normal	<h4>, <div>, <h3>, and <button> in the button
type.display-36px	Helvetica Now	36px	700	38.88px	-0.36px	<h2> and <h4>
type.display-53px	Helvetica Now	53px	500	58.3px	normal	<span> and <h1>
type.body-14px	Helvetica Now	14px	400	20.3px	normal	<div>
type.utility-13px	Helvetica Now	13px	400	13px	normal	<span>, <a> in the nav, <div> in the nav, and <button> in the button
type.utility-13px	Helvetica Now	13px	400	20.8px	normal	<a> and <p>
type.body-20px	Helvetica Now	20px	400	24px	normal	<p>
type.utility-12px	Helvetica Now	12px	400	18px	normal	<div> in the footer
type.heading-16px	Helvetica Now	16px	700	24px	normal	<div>
type.display-40px	Helvetica Now	40px	700	43.2px	-0.4px	<h2>
type.body-16px	Helvetica Now	16px	400	24px	-0.16px	<p>
type.heading-28px	Helvetica Now	28px	700	32.76px	normal	<h3>
type.body-16px	Helvetica Now	16px	400	24.8px	normal	<p>
type.body-16px	Helvetica Now	16px	400	23.2px	-0.16px	<p>
type.utility-10px	Helvetica Now	10px	400	14.5px	-1%	<p>
type.display-40px	Helvetica Now	40px	700	24px	normal	<h2>
type.utility-12px	Helvetica Now	12px	400	17.1429px	normal	<a> and <div>
type.heading-28px	Helvetica Now	28px	700	40.6px	normal	<span>

Spacing

value	property	observed element
20px	padding	page content
12px 0px 0px	margin	page content
8px 0px 0px	margin	page content
-20px	margin	page content
0px 0px 48px	margin	page content
40px 0px 0px	margin	page content
0px 297.5px	margin	page content
152px 0px 0px	padding	page content

Shape and depth

The captured pages use 1px solid 16px, 1px solid 16px, 1px 0px 0px solid 0px, 1px solid 26px, 1px solid 9999px, 2px solid 12px, 1px solid 44px, and 1px solid 8px border treatments. Recorded gradients include 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(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(165deg, rgb(255, 255, 255) 10.57%, rgb(147, 157, 184) 142.07%), linear-gradient(162deg, rgb(255, 255, 255) 25.49%, rgb(147, 157, 184) 110.77%), and linear-gradient(353deg, rgb(91, 99, 211) 17.51%, rgb(124, 135, 247) 183.08%). Recorded shadows include rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px and rgba(255, 255, 255, 0.25) 0px 1px 3px 0px inset.

Colors

The visual system is predominantly dark surface treatment. Surface colors include #000000, #0f101a, and #171824. Text colors include #939db8, #ffffff, and #c9d3ee. Keep image-derived colors separate from interface colors.

Typography

The captured type system uses Helvetica Now. The table records measured size, weight, leading, and tracking where available; it does not establish licensing or a complete fallback stack.

Layout

The captured pages use values such as 20px, 12px 0px 0px, 8px 0px 0px, -20px, and 0px 0px 48px for padding and margin. These are measured usages, not a resolved scale. The available evidence does not establish container widths, grid rules, or breakpoints.

Visual language

The captured visual language is predominantly dark surface treatment. Surface treatment centers on #000000, #0f101a, #171824, and #171926. Depth is supported by the returned gradients and shadows.

Components and states

The captured pages include repeated styling on <div>, <h4>, <p>, <h2>, <h3>, <a>, <span>, and <button> elements. The evidence does not identify reusable component boundaries or interaction states. Treat loading, focus, hover, pressed, error, and disabled states as implementation work to validate rather than as captured facts.

Responsive behavior

The captured token set does not establish breakpoint values or mobile behavior. Validate stacking, navigation changes, image treatment, and type scaling against the representative captures before implementing a responsive adaptation.

Practical implementation guidance

• Preserve the dark surface relationship and the measured type hierarchy before adding decorative treatment.
• Start from the returned typography, spacing, color, and border values; name any new scale or semantic role as an adaptation rather than as a source fact.
• Keep the captured font families separate from licensing decisions.
• Use screenshots to validate component anatomy, responsive behavior, focus treatment, and motion before shipping.
• Avoid introducing gradients or shadows beyond the captured treatment; the returned evidence includes those treatments.

Scope note

The guide uses representative captured pages. The evidence supports the values and observations above; it does not establish component semantics, interaction states, motion timing, breakpoint rules, font licensing, or a complete source stylesheet.