Design system

Zealous — Brand & UI Reference

Locked palette, type, and component tokens to reuse consistently across the main site, docs, status page, and any future properties.

1

Color palette

Background
#0A1128
Surface
#001F54
Surface 2 / border
#034078
Accent
#1282A2
Accent light
#6FB3D9
Text
#F0F4F8
Text muted
#8FA3BF
Success / online
#4ADE80
Warning
#F0B43C
Error / danger
#EF5350
2

Typography

Primary — body & UI
Inter
Headings, body copy, nav, buttons — everything except stats/data
Accent — data & stats
JetBrains Mono
Prices, TPS/uptime numbers, server IDs — anywhere precision matters
Heading / H1Inter 600 · 32px · -0.3px
Heading / H2Inter 600 · 22–28px
Heading / H3Inter 500 · 14–15px
Body textInter 400 · 13–14px
$26 / 19.9 TPSJetBrains Mono 500–600
3

Radius & surface tokens

8px
Buttons, inputs
10px
Default radius
16px
Cards, panels
Full
Badges, avatars, dots
4

Buttons

5

Badges & pills

Eyebrow / callout tag Popular Online 1,240+
6

Form elements

Toggle — on state
Toggle — off state
Checkbox — checked
7

Alerts & callouts

Heads up — use for neutral, informational messages.
Success — confirmations, completed actions.
Warning — something needs attention but isn't broken.
Error — something failed or blocked an action.
8

Cards

Feature card

Icon badge, title, short description. Used for feature grids and info tiles.

Most popular

Featured / plan card

Same shape as a standard card, with an accent border and badge to mark it as highlighted.

9

Spacing scale

4px
8px
12px
16px
24px
32px
48px
10

Icon library — Lucide

11

Usage notes

  • Accent color (#1282A2) is used sparingly — CTAs, active states, highlights. It is never the dominant color on a page.
  • Background stays near-black (#0A1128) across every property for brand consistency — avoid pure white backgrounds.
  • Text muted (#8FA3BF) is for secondary copy only; body copy that matters uses full Text (#F0F4F8).
  • Keep flat design — no gradients or drop shadows except the subtle dropdown/menu shadow and the hero grid fade mask.
  • JetBrains Mono is reserved for numbers and data — never used for headings or body prose.
  • Pills/badges use full rounding (999px) to stay visually distinct from buttons, which use 8px radius.
  • Only one alert type should ever appear for a given message — don't combine warning and error styling on the same element.
  • Warning (#F0B43C) is for "needs attention, nothing is broken yet" — a plan nearing its player cap, a backup running behind schedule. Error (#EF5350) is for "something failed or blocked an action" — a payment decline, a migration that couldn't complete. Don't use error styling for a state the user can still recover from without intervention.
  • Spacing scale is 4px-based (4, 8, 12, 16, 24, 32, 48) — avoid arbitrary values like 10px or 18px outside of icon/border sizing.
  • Icons render via <i data-lucide="name"></i> plus a call to lucide.createIcons() — they're inline SVG, not a font, so size/color come from CSS width/height/color, not font-size.