Better Stack Design System
Dark Navy · Generated 18/04/2026 · 30 colors · 43 type tokens · 30 spacing steps · 4 motion tokens
v1.0.0
Color Palette
Background Colors
Dark Gray 2
#0B0C14
Dark Gray 3
#0F1019
Dark Gray
#0F101A
Dark Blue 5
#101828
Dark Blue 4
#171926
Dark Gray 4
#181925
Dark Blue 2
#1F2433
Dark Blue 3
rgba(47,53,71,.5)
Blue 4
#6C769D
Blue
#939DB8
Text Colors
Dark Blue
#3B4254
Blue 2
#646E87
Blue 3
#656A7B
Light Blue 2
#7C87F7
Light Blue 3
#98A4F7
Light Blue
#C9D3EE
White
#FFFFFF
Border & Fill Colors
Blue 8
rgba(114,125,161,.07)
Blue 6
rgba(147,157,184,.1)
Blue 11
rgba(147,157,184,.12)
Blue 10
#626C80
Blue 5
#737DA0
Blue 12
#7280A1
Blue 9
#919BB9
Blue 7
#5B63D3
Typography
Base Font · Roobert / DM Sans
Roobert
Monitor everything. Respond faster. Better Stack brings observability, uptime monitoring, and log management into one platform.
Regular · 400 Medium · 500 Semibold · 600 Bold · 700
Mono · Helvetica Now Text / DM Mono
HNT + HND
GET /api/v1/incidents?status=open Content-Type: application/json Authorization: Bearer bs_••••••••
Regular · 400 Medium · 500
Monitor all
Display 66px · Bold · line-height: 66px · letter-spacing: −0.4px
Error tracking
Display MD · 40px · Bold · line-height: 43.2px · letter-spacing: −0.4px
Uptime monitoring
Heading XL · 36px · Bold · line-height: 38.88px · letter-spacing: −0.36px
Log management
Heading LG · 28px · Bold · line-height: 32.76px · letter-spacing: −0.24px
Infrastructure alerts
Heading MD · 24px · Semibold · line-height: 28px · letter-spacing: −0.24px
On-call scheduling and incident response
Heading SM · 20px · Semibold · line-height: 24.8px · letter-spacing: −0.16px
Better Stack helps you monitor your entire stack — from your website and APIs to your databases and servers — all in one place.
Body · 16px · Regular · line-height: 25.6px · letter-spacing: −0.14px
Incident #1024 · Critical · Triggered 3 min ago · Assigned to on-call
Caption · 13px · Regular · monospace · line-height: 20.8px · letter-spacing: −0.12px
Line Heights
Tight
13px
Snug
13.87px
Normal
14.5px
Relaxed
17.14px
Loose
18px
LH-7
20.8px
LH-10
24px
LH-11
24.8px
LH-13
28px
LH-14
32.76px
LH-17
43.2px
LH-18
66px
Letter Spacing
Monitor
Tight · −0.4px
--letter-spacing-tight · display 40–66px
Uptime
Normal · −0.36px
--letter-spacing-normal · headings 28–40px
Incidents
Wide · −0.24px
--letter-spacing-wide · mid headings 20–28px
Alerts
LS-6 · −0.12px
--letter-spacing-ls-6 · body & UI text
Spacing
Spacing Scale
30 tokens — 1px → 386.7px
1
4
6
8
10
12
14
16
18
20
30
32
36
40
44
48
56
57.5
64
66.5
80
96
100
120
128
130
144
296.5
386.7
Borders
Border Radii
MD
4px
LG
6px
XL
8px
2XL
10px
Full
12px
R8
16px
R9
26px
R10
43px
Pill
9999px
Better Stack uses directional radii: SM has 0 0 16 16px (bottom-rounded) and R7 has 16 16 0 0px (top-rounded) — used for drawer/panel shapes.
Border Widths
--border-width-hairline
0.5px · ultra-thin dividers
--border-width-thin
1px · cards, inputs, modals
Better Stack uses a sub-pixel 0.5px hairline for internal dividers alongside the standard 1px border. The hairline creates very refined separations on high-DPI displays.
Shadow / Elevation
Shadow Tokens
1 token — inset highlight
--shadow-sm
rgba(255,255,255,0.25) inset
1px inset top highlight — used on interactive elements (buttons, cards) to simulate a subtle lit surface edge on dark backgrounds
Border-based
Depth without shadow
Depth is primarily expressed through stacked dark blue fills and rgba border opacity — no standard drop shadows are used
Gradient fills
Accent elevation
Gradient from #5B63D3 → #7C87F7 creates the signature periwinkle accent used on CTAs and logos
Z-Index
LayerValueUsage
--z-1-10Background decorations, canvas layers behind content
--z-210Sticky navigation, floating headers, fixed elements
--z-320Dropdowns, tooltips, hover popovers
--z-440Modals, dialogs, command palette, overlays
--z-599,999,999Maximum application layer — chat widgets, critical alerts
--z-6100,000,000Absolute top layer — cookie notices, emergency banners
Breakpoints
No Breakpoint Tokens Defined
Better Stack's design system does not expose breakpoint values as CSS custom properties. Responsive behavior is handled directly in component-level CSS without a shared breakpoint token layer.
📱
Mobile
~375px
Assumed mobile threshold
💻
Desktop
~1024px
Assumed desktop threshold
🖥️
Wide
~1280px
Assumed wide threshold
Opacity
No Opacity Tokens Defined
Better Stack's design system does not define named opacity tokens. Transparency is expressed directly as rgba color values in the color token layer — for example, rgba(147,157,184,0.1) for subtle borders and rgba(47,53,71,0.5) for semi-transparent surfaces.
rgba opacity .07
border-subtle
rgba opacity .1
border-default
rgba opacity .5
surface-dim
rgba opacity .25
inset-highlight
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
Text TokenBackground TokenRatioWCAG Rating
--color-light-blue--color-dark-gray12.65:1AAA
--color-light-blue--color-dark-gray-213.03:1AAA
--color-light-blue--color-dark-gray-411.65:1AAA
--color-light-blue--color-blue1.81:1Fail
--color-light-blue--color-blue-42.98:1Fail
--color-dark-blue--color-blue3.7:1AA Large
--color-dark-blue--color-dark-gray1.89:1Fail
--color-blue-2--color-dark-gray3.72:1AA Large
--color-blue-2--color-dark-gray-23.83:1AA Large
--color-blue-2--color-dark-gray-43.42:1AA Large
--color-light-blue-2--color-dark-gray6.01:1AA
--color-light-blue-2--color-dark-gray-26.19:1AA
--color-light-blue-2--color-dark-gray-45.53:1AA
--color-white--color-dark-gray18.93:1AAA
--color-white--color-dark-gray-219.5:1AAA
--color-white--color-dark-gray-417.43:1AAA
CSS Variables Reference
Background Colors10 tokens
Dark Gray 2--color-dark-gray-2#0B0C14
Dark Gray--color-dark-gray#0F101A
Dark Blue 5--color-dark-blue-5#101828
Dark Blue 4--color-dark-blue-4#171926
Dark Gray 4--color-dark-gray-4#181925
Dark Blue 2--color-dark-blue-2#1F2433
Dark Blue 3--color-dark-blue-3rgba(47,53,71,.5)
Dark Gray 5--color-dark-gray-5rgba(23,24,36,.5)
Blue 4--color-blue-4#6C769D
Blue--color-blue#939DB8
Text & Accent Colors8 tokens
Dark Blue--color-dark-blue#3B4254
Blue 2--color-blue-2#646E87
Blue 3--color-blue-3#656A7B
Blue 7 (accent)--color-blue-7#5B63D3
Light Blue 2--color-light-blue-2#7C87F7
Light Blue 3--color-light-blue-3#98A4F7
Light Blue--color-light-blue#C9D3EE
White--color-white#FFFFFF
Typography43 tokens
Base Font--font-family-baseRoobert
Text Font--font-family-2Helvetica Now Text
Display Font--font-family-3Helvetica Now Display
Regular--font-weight-regular400
Medium--font-weight-medium500
Semibold--font-weight-semibold600
Bold--font-weight-bold700
2XS--font-size-2xs10px
XS--font-size-xs10.4px
SM--font-size-sm12px
Base--font-size-base13px
LG--font-size-lg14px
XL--font-size-xl16px
2XL--font-size-2xl20px
3XL--font-size-3xl24px
4XL--font-size-4xl28px
5XL--font-size-5xl36px
6XL--font-size-6xl40px
Display--font-size-66px66px
Tight--letter-spacing-tight−0.4px
Normal--letter-spacing-normal−0.36px
Wide--letter-spacing-wide−0.24px
Wider--letter-spacing-wider−0.16px
Widest--letter-spacing-widest−0.14px
LS-6--letter-spacing-ls-6−0.12px
Spacing30 tokens
Space 1--space-11px
Space 2--space-24px
Space 3--space-36px
Space 4--space-48px
Space 5--space-510px
Space 8--space-812px
Space 12--space-1216px
Space 20--space-2020px
Space 40--space-4030px
Space 48--space-4832px
Space 128--space-12848px
Space 256--space-25664px
Space 24--space-2480px
Space 25--space-2596px
Space 27--space-27120px
Space 28--space-28128px
Space 30--space-30144px
Space 31--space-31296.5px
Space 32--space-32386.7px
Borders & Radius13 tokens
Hairline--border-width-hairline0.5px
Thin--border-width-thin1px
SM (bottom)--radius-sm0 0 16 16px
R7 (top)--radius-r716 16 0 0px
MD--radius-md4px
LG--radius-lg6px
XL--radius-xl8px
2XL--radius-2xl10px
Full--radius-full12px
R8--radius-r816px
R9--radius-r926px
R10--radius-r1043px
Pill--radius-r119999px
Motion & Layers10 tokens
Instant--duration-instant50ms
Fast--duration-fast150ms
Normal--duration-normal200ms
Slow (pulse)--duration-slow1s
Shadow--shadow-sminset 0 1px rgba(255,255,255,.25)
Background--z-1-10
Navigation--z-210
Popovers--z-320
Modals--z-440
Max App--z-599,999,999
Absolute Top--z-6100,000,000
Design System Preview · Better Stack (Dark Navy) · Generated 18/04/2026 · 30 color tokens · 12 font-size · 3 font-family · 4 font-weight · 18 line-height · 6 letter-spacing · 30 spacing · 11 radius · 2 border-width · 1 shadow · 4 duration · 6 z-index · no breakpoints · no opacity