Fase 1 · guía de estilo viva

CS2 Hub
Sistema de diseño

Esta página lee los mismos tokens que el resto de la app. Si un color o una escala se rompe aquí, está roto en producción.

01 — Color

Paleta

Estructura

--bgCanvas

--surfaceCards

--surface-2Hover / elevado

--lineBorde

--line-strongBorde foco

Texto

--inkTexto principal

--ink-mutedTexto secundario

--ink-subtleMetadatos

Marca y dominio

--voltMarca

--side-tLado T

--side-ctLado CT

--util-smokeHumo

--util-flashFlash

--util-molotovMolotov

--util-heHE

02 — Tipografía

Tres voces

Display · Rajdhani 700

Mirage · Dust II · Inferno

Line-ups de humo desde T Spawn

Cuerpo · Inter

En una eco round no compras porque el equipo necesita llegar al siguiente round con dinero para un buy completo. La decisión no es “tengo poco dinero”: es cuánto va a tener el rival y si tu compra parcial sobreviviría a la suya.

Datos · JetBrains Mono, cifras tabulares

Derrotas	Bonus	Decisión
1ª	$1400	Eco
2ª	$1900	Eco
3ª	$2400	Force viable
4ª	$2900	Force
5ª+	$3400	Full buy

03 — Componentes

Button · Badge · Tooltip

Button

El volt está mapeado a --primary, no al --accent de shadcn (que es el hover sutil).

Badge de dominio

La utilidad nunca se distingue solo por color: siempre icono + texto.

Lado TLado CT

HumoFlashMolotovHE

FácilMediaDifícil

defaultsecondaryoutline

Tooltip

El mismo que usarán los pines del radar. Pasa el ratón o tabula.

04 — Elevación

Sin sombras

surface + border
reposo

+ highlight interior
card elevada

surface-2 + border-strong
hover

Una sombra negra sobre fondo casi negro no se ve, solo ensucia. La profundidad se hace con un borde de 1px y un filo de luz al 6% arriba.