Skip to main content

Design System

The house style behind Clustersco's deliverables. Goal: every artifact reads as one system — calm, dense, enterprise-grade, and correct in both light and dark.

Non-negotiables​

  • Self-contained. A standalone deliverable is one .html file — inline all CSS/JS, embed assets as data: URIs. No external stylesheets, fonts, scripts, or network calls.
  • Theme-aware. Ship light and dark. Drive tokens from @media (prefers-color-scheme: dark) and :root[data-theme="dark"] / [data-theme="light"] so a manual toggle wins both ways.
  • Token-driven. Never hard-code a hex in a component — use the CSS variables below.
  • Accessible by construction. Body text ≥ 4.5:1 contrast in both themes; honor prefers-reduced-motion. (See UI/UX.)
  • Spelling: always "Clustersco".

Tokens​

:root{
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --radius:14px; --radius-sm:9px;
  --surface:#fff;        --surface-2:#f4f7fc;
  --ink:#172033;         --ink-2:#455169;   --ink-3:#71809b;
  --line:#d5deea;        --line-2:#c4cfdf;
  --accent:#2f6feb;      --accent-2:#1b50c2;
  --gw-solid:#2f6feb; --gw-on:#fff;   /* solid fill + white text = 4.57:1 in both themes */
  --b-main:#e0484d; --b-develop:#6d59d6; --b-feature:#1f9a60;
  --b-release:#a97e00; --b-hotfix:#dd5e2a; --b-bugfix:#0d8a9c; --b-support:#5f6b7a;
}
:root[data-theme="dark"]{
  --surface:#0f1626;     --surface-2:#141d30;
  --ink:#e8eef8;         --ink-2:#a9b6cc;   --ink-3:#7a889f;
  --line:#253248;        --line-2:#32405b;
  --accent:#5c9bff;      --accent-2:#8fb8ff;
  --b-main:#ff6b6b; --b-develop:#9d8dff; --b-feature:#3ec283;
  --b-release:#e0b23a; --b-hotfix:#ff7c48; --b-bugfix:#40c0d0; --b-support:#8b98a8;
}

This very docs site is themed from these tokens.

Usage rules​

  • Text on surface: --ink (primary), --ink-2 (secondary), --ink-3 (decorative only — it can dip near the 4.5:1 line, so never use it for meaningful text).
  • Tints, don't invent hexes: color-mix(in srgb, var(--b-release) 14%, var(--surface)).
  • Solid buttons/badges with white text: fill with --gw-solid (a raw --accent fill with white can fail contrast).
  • Semantic hues (--b-develop, --b-feature, …) are reused for anything categorical (environments, statuses) so color meaning stays consistent.

Components​

Masthead (eyebrow + h1 + lede) · section with §NN eyebrow · callouts (with a tag label) · code blocks (mono, tinted header) · tables in a horizontal-scroll wrap · chips/legend carrying a semantic color · cards. Wide content scrolls inside its own overflow-x:auto container — the page body never scrolls sideways.

Reference implementation: the Git & Versioning Workflow.