---
version: alpha
name: WebRadar Dark Default
description: Original dark theme for CS2 WebRadar — a tactical esports radar with rounded "Rebirth" softness, high-contrast team colors, and monospace data density.

colors:
  # Backgrounds
  bg-base: "#080b0f"
  bg-panel: "#0d1117"
  bg-card: "#111620"
  bg-card-hover: "#161c28"
  bg-border: "#1e2736"
  bg-border-dim: "#151c27"

  # Team
  t-color: "#f5a623"
  t-dim: rgba(245,166,35,0.12)
  t-border: rgba(245,166,35,0.22)
  ct-color: "#4a9eff"
  ct-dim: rgba(74,158,255,0.12)
  ct-border: rgba(74,158,255,0.22)

  # Text
  primary: "#ffffff"
  on-surface: "#c2c2c2"
  muted: "#2e3d50"

  # Status
  hp-high: "#3dd68c"
  hp-mid: "#f0b429"
  hp-low: "#e05252"
  money: "#3dd68c"

  # Radar
  radar-primary: "#b1d0e7"
  radar-secondary: "#6492b4"
  radar-green: "#50904c"
  radar-red: "#c90b0be6"

typography:
  display-lg:
    fontFamily: TASAOrbiter
    fontSize: 28px
    fontWeight: 900
    lineHeight: 1
    letterSpacing: "-0.02em"
  display-md:
    fontFamily: TASAOrbiter
    fontSize: 24px
    fontWeight: 900
    lineHeight: 1
  headline-sm:
    fontFamily: TASAOrbiter
    fontSize: 18px
    fontWeight: 800
    lineHeight: 1
    letterSpacing: "0.02em"
  label-lg:
    fontFamily: TASAOrbiter
    fontSize: 13px
    fontWeight: 800
    lineHeight: 1
    letterSpacing: "0.18em"
  label-md:
    fontFamily: TASAOrbiter
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: "0.1em"
  label-sm:
    fontFamily: TASAOrbiter
    fontSize: 9px
    fontWeight: 800
    lineHeight: 1
    letterSpacing: "0.18em"
  body-lg:
    fontFamily: TASAOrbiter
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.2
  body-md:
    fontFamily: TASAOrbiter
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1.2
  body-sm:
    fontFamily: TASAOrbiter
    fontSize: 10px
    fontWeight: 600
    lineHeight: 1.2
  caption:
    fontFamily: TASAOrbiter
    fontSize: 8px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: "0.06em"
  mono-display:
    fontFamily: ui-monospace
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1
  mono-dense:
    fontFamily: ui-monospace
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1

rounded:
  none: 0px
  sm: 4px
  DEFAULT: 6px
  md: 8px
  card: 10px
  panel: 14px

spacing:
  unit: 4px
  gap-xs: 2px
  gap-sm: 4px
  gap-md: 6px
  gap-lg: 8px
  gap-xl: 10px
  pad-xs: "2px 5px"
  pad-sm: "4px 6px"
  pad-md: "6px 10px"
  pad-lg: "8px 12px"
  pad-xl: "16px 14px"
  panel-min-width: 140px

components:
  player-card:
    backgroundColor: "{colors.bg-card}"
    textColor: "{colors.primary}"
    rounded: "{rounded.card}"
    padding: "{spacing.pad-sm}"
    height: 72px
  player-card-hover:
    backgroundColor: "{colors.bg-card-hover}"
    textColor: "{colors.primary}"
  scoreboard:
    backgroundColor: "{colors.bg-panel}"
    rounded: "{rounded.panel}"
  settings-panel:
    backgroundColor: "{colors.bg-panel}"
    textColor: "{colors.primary}"
    rounded: "{rounded.panel}"
    padding: "{spacing.pad-lg}"
  button-sm:
    textColor: "{colors.primary}"
    rounded: "{rounded.DEFAULT}"
    padding: "3px 8px"
    height: 26px
  button-icon:
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    height: 26px
    width: 26px
  bomb-timer:
    backgroundColor: rgba(40,8,8,0.9)
    rounded: "{rounded.md}"
  connecting-ring:
    backgroundColor: transparent
    size: 44px
  c4-badge:
    backgroundColor: rgba(239,68,68,0.18)
    rounded: "{rounded.sm}"
  toggle:
    height: 18px
    width: 34px
  input-field:
    backgroundColor: "{colors.bg-card}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: "4px 10px"
  separator:
    backgroundColor: "{colors.bg-border-dim}"
    height: 1px
  team-label-t:
    textColor: "{colors.t-color}"
    typography: "{typography.label-sm}"
  team-label-ct:
    textColor: "{colors.ct-color}"
    typography: "{typography.label-sm}"
  t-badge:
    backgroundColor: "{colors.t-dim}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
  ct-badge:
    backgroundColor: "{colors.ct-dim}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
  health-bar-high:
    backgroundColor: "{colors.hp-high}"
    rounded: "{rounded.sm}"
    height: 3px
  health-bar-mid:
    backgroundColor: "{colors.hp-mid}"
    rounded: "{rounded.sm}"
    height: 3px
  health-bar-low:
    backgroundColor: "{colors.hp-low}"
    rounded: "{rounded.sm}"
    height: 3px
  money-display:
    textColor: "{colors.money}"
    typography: "{typography.mono-dense}"
  muted-label:
    textColor: "{colors.muted}"
    typography: "{typography.caption}"
  radar-container:
    backgroundColor: "{colors.bg-base}"
    rounded: "{rounded.panel}"
  team-border-t:
    backgroundColor: "{colors.t-border}"
    height: 1px
  team-border-ct:
    backgroundColor: "{colors.ct-border}"
    height: 1px
  radar-dot-ct:
    backgroundColor: "{colors.ct-color}"
    size: 8px
  radar-dot-t:
    backgroundColor: "{colors.t-color}"
    size: 8px
  radar-grid:
    backgroundColor: "{colors.radar-primary}"
    textColor: "{colors.radar-secondary}"
  radar-overlay-green:
    backgroundColor: "{colors.radar-green}"
  radar-overlay-red:
    backgroundColor: "{colors.radar-red}"
---

# Overview

WebRadar Dark Default is the original dark theme for the CS2 tactical radar web app. The brand personality is **Tactical Esports** — a blend of military-grade information density with the polished softness of the "Rebirth" rounded design language.

The emotional tone is focused and intense: dark backgrounds absorb ambient light, team colors (Amber for Terrorists, Blue for Counter-Terrorists) provide instant visual identification, and the rounded corners signal a premium, modern experience without losing the competitive edge.

This is a **data-dense, real-time** interface. Every pixel serves gameplay awareness — health bars, weapon icons, bomb status, and kill feeds must be parsed at a glance.

# Colors

The palette is built around three pillars: **deep dark surfaces**, **team identity chromatics**, and **status semantics**.

- **Surface Hierarchy**: The background stack progresses from `#080b0f` (base) → `#0d1117` (panel) → `#111620` (card). Each step lifts content visually through increasing luminosity while staying firmly dark. The `bg-card-hover` state at `#161c28` provides the subtlest lift on interaction.
- **Team Colors**: Amber (`#f5a623`) for Terrorists and Blue (`#4a9eff`) for Counter-Terrorists are the two dominant chromatic anchors. They are never used as backgrounds at full opacity — always dimmed (12% alpha fills) or as thin borders (22% alpha) to maintain the dark aesthetic.
- **Status Triad**: Health uses a three-state traffic light — green `#3dd68c` (high), amber `#f0b429` (mid), red `#e05252` (low). Money is always green.
- **Borders**: `#1e2736` for active borders, `#151c27` for dim separators. These are subtle enough to not distract but visible enough to define structure.

# Typography

The type system is engineered for **glanceability** — information must be parsed faster than it can be read.

- **Primary Font**: TASAOrbiter, a variable-width monospace-inspired typeface with a technical, geometric character. Fallback chain: `Rajdhani, ui-monospace, monospace`.
- **Monospace**: `ui-monospace` is used for timers, scores, money counts, and kill feeds — any data where digit alignment matters.
- **Information Hierarchy**:
  - **Display** (24–28px, w900): Scoreboard timer, round count. Used sparingly for maximum impact.
  - **Labels** (9–13px, w700–800, tracked): Uppercase with wide letter-spacing (0.1–0.25em). Team headers, section titles, toggles.
  - **Body** (10–12px, w500–600): Player names, weapon names, descriptions. The workhorse sizes.
  - **Caption** (8px, w700): Tiny metadata, kill feed weapon labels. Must remain legible at very small sizes.
- **Anti-aliasing**: `-webkit-font-smoothing: antialiased` is globally enabled for crisp rendering on dark backgrounds.

# Layout & Spacing

The layout is a **hybrid adaptive grid** — desktop uses a side-by-side radar + player list arrangement, mobile stacks vertically with responsive breakpoints.

- **Base Unit**: 4px grid governs all spacing. Common gaps are 6px, 8px, and 10px.
- **Content Density**: The interface is intentionally dense — player cards stack with 0 gap, panels nest with 1px separators. Whitespace is earned, not given.
- **Minimum Touch Target**: 44×44px on touch devices, enforced via `min-height` and `min-width` media queries.
- **Safe Areas**: CSS `env(safe-area-inset-*)` is used for notch devices, with fallbacks to `1rem` bottom padding.
- **Fullscreen Mode**: Layout shifts to a PIP-style floating panel system with the radar taking full viewport.

# Elevation & Depth

Depth is conveyed through **luminosity stepping**, not drop shadows. Higher surfaces are lighter.

- **Level 0 (Base)**: `#080b0f` — the darkest, furthest surface.
- **Level 1 (Panel)**: `#0d1117` — settings panels, scoreboard containers.
- **Level 2 (Card)**: `#111620` — player cards, list items.
- **Shadows**: Used sparingly for modals and panels. The settings panel uses `0 16px 48px rgba(0,0,0,0.7)`. The radar container uses `0 8px 48px rgba(0,0,0,0.7)` with a `0 0 0 1px rgba(255,255,255,0.04)` outline.
- **Glass Effect**: HUD overlay panels use `backdrop-filter: blur(12px) saturate(1.4)` with semi-transparent panel backgrounds for a frosted-glass depth effect.
- **Inner Light**: `inset 0 1px 0 rgba(255,255,255,0.04)` provides a subtle top-edge highlight simulating a light source from above.

# Shapes

The "Rebirth" design language prioritizes **rounded softness** — every container uses generous corner radii.

- **Cards**: `10px` radius — the default for player cards and content containers.
- **Panels**: `14px` radius — settings panel, scoreboard, and larger structural containers.
- **Buttons**: `8px` (standard), `6px` (compact), `4px` (small badges).
- **Radar**: `14px` panel radius with a 1px outline glow.
- **Custom Scrollbar**: 4px width, 2px radius on the thumb.
- **Circular**: Connecting ring and player dots are fully rounded (`border-radius: 50%`).

# Components

## Player Card

The primary data-dense unit. Contains portrait, name, HP bar, weapon icon, money, and utility indicators. Cards stack vertically within team columns with no gap. On hover, a subtle `translateY(-3px) scale(1.01)` micro-animation lifts the card. Dead players reduce to 38% opacity with 60% grayscale.

## Scoreboard

The top-center scoreboard shows round score, timer, and bomb status. Uses the panel radius with a structural border. Timer urgency increases — at low time, a `scale(1.04)` pulse with text-shadow glow signals countdown pressure.

## Bomb Indicator

During C4 events, a dedicated bomb timer panel appears with red accent borders and a pulsing glow animation (`bombTimerPulse` at 1s interval). The C4 carrier badge uses a `c4CarrierGlow` animation.

## Settings Panel

Full customization drawer with toggle switches, sliders, and color pickers. Uses the panel radius with deep shadow. Toggles use an 18×34px switch pattern.

## Kill Feed

Slide-in animation (`translateX(30px) → 0`, 0.3s ease-out). Each entry is compact: 5px 8px padding, 8px font size, monospace alignment. Headshot kills get extra letter-spacing (0.04em).

## Radar Canvas

The central tactical display. Uses panel radius, deep shadow, and a subtle 1px luminous outline. Player dots are rendered with team-colored fills and optional glow filters.

# Do's and Don'ts

**Do**:
- Use team colors only as accents (borders, text, dots) — never as large-area fills
- Keep font sizes ≥8px for legibility on the monospace stack
- Apply letter-spacing ≥0.1em for uppercase labels to prevent character collision
- Use `backdrop-filter: blur()` when layering HUD panels over the radar
- Test all status colors against both `bg-card` and `bg-panel` for WCAG contrast
- Use the `dead` state (opacity 0.38 + grayscale 0.6) for eliminated players

**Don't**:
- Never use pure white (`#ffffff`) as a background fill — it shatters the dark aesthetic
- Avoid font sizes below 8px — even 7px becomes illegible on mobile
- Don't mix team colors (amber T + blue CT) on the same element without a neutral separator
- Never apply glow effects (text-shadow, box-shadow) to body text — reserve for labels and urgent states only
- Avoid sharp (0px) corner radii on cards and panels — the Rebirth language demands softness
- Don't animate the radar canvas position — it disorients spatial awareness
