← 20 Below
Visual Identity
Style Guide
Core Palette
Background
--bg
#0A1720
Page background
Panel
--panel
#12232E
Cards, dropdowns, raised surfaces
Panel Border
--panel-border
#24404F
Dividers, card borders
Text
--text
#EAF5FB
Primary text
Text Dim
--text-dim
#8FADBE
Secondary text, captions, labels
Accent
--accent
#3D84C4
Links, active states, brand blue
Accent Dim
--accent-dim
#1C3548
Hover backgrounds, CTA fill
Semantic / Role Colors (Battle Tracker)
PC
--pc
#5ECB6B
Player character role color
Ally
--ally
#C39A5A
Friendly NPC - shared with Backwater Static's brass
NPC / Danger
--npc / --danger
#E0685C
Enemy role, critical/low-stat warnings
Elements
Earth
--element-earth
#8A6D4E
Warm stone/clay brown - distinct from Ally's brighter brass
Air
--element-air
#A8C9E0
Pale sky blue - separate from Water's teal and the UI's accent blue
Fire
--element-fire
#E0663F
Orange-leaning red - distinct from the NPC/danger red
Water
--element-water
#078F9B
Teal/cyan - echoes Backwater Static's cyan
Moira (Fate)
--element-moira
#A06FD1
Violet - the one hue nothing else on the site uses
Front Page Hero System (front page only)
Taken from the "How 20 Below Works" infographic - a near-black ground, poster display type, and glowing colour-coded step cards. This one is deliberately scoped to the front page's hero; rules pages, the app and the Battle Tracker keep the clean functional style above. Use it the same way if you want a splash page, and use the rest of this guide everywhere else.
HOW 20 BELOW WORKS
A Character-Driven RPG of Fate, the Gifted, and Worlds Below Our Own
1
#D9D9D9
2
#3D84C4
3
#3FD0E0
4
#D99A3D
5
#A06FD1
6
#D9455F
7
#7BC47F
5
Compare Roll to Target
Roll 2d10, sum them, and compare against your target number to see what happens next.
Roll Under to Succeed
Typography
Segoe UI / system-ui
site-wide default
20 Below
Body text and UI across rules pages, the app, and the Battle Tracker
Anton
Google Font · front page hero only
20 Below
Big display headlines ("HOW 20 BELOW WORKS")
Bebas Neue
Google Font · front page hero only
20 BELOW
Step badges, titles, and the colored stamp callouts
Montserrat
Google Font · front page hero only
20 Below
Subtitle and card body copy in the hero system
Fraunces
Google Font · Backwater Static
Backwater Static
Backwater Static's wordmark, used on index.html's campaign card only
Space Mono
Google Font · Backwater Static
STATIC
Uppercase labels on Backwater Static's campaign card
Consolas
system monospace
#3D84C4
Hex codes and CSS tokens on this style guide
Anton, Bebas Neue, and Montserrat are proposed for the front-page hero system only (see above) - not used anywhere else on the site yet. Fraunces and Space Mono are Backwater Static's own faces, appearing on 20 Below's index.html only for its campaign card. Everything else on the site uses "Segoe UI" / system-ui.