Fundamentos

Mismos huesos de SAP Horizon, modernizados: escala más ajustada, superficies calmadas, tres paletas de marca y modo oscuro completo. Todo lo de esta página son variables reales — probá el switcher de tema y paleta arriba y estas muestras cambian en vivo.

Densidad: Pro · --h-control 28px · --h-row 32px · --fs-body 13px Tipografía: SAP 72 · fallback de sistema

Paletas de marca

Todo el sistema se recolorea vía data-palette en el <html>: hover/focus, badges, links y gráficos siguen la paleta activa. Cada tarjeta abajo previsualiza su propia rampa (--accent-300 … --accent-700) sin importar la paleta activa del sitio.

Royal

Evolución del azul SAP, más profunda — la más cercana a la marca actual de Clavisco, más brillante.

Indigo

Índigo/violeta refinado de Clavisco — segura, moderna, distintiva.

Slate

Pizarra fría con un toque teal — sobria, estilo Linear, ultra-pro.

Rampa de acento

Nueve pasos de --accent-50 a --accent-800. Estos sí siguen la paleta activa del sitio (probá el selector de arriba).

100

200

300

400

500

600

700

800

Colores semánticos

Positivo, advertencia, negativo e info. Cada uno con su par claro/oscuro — probá el toggle de tema.

Positive

500

600

700

Warning

500

600

700

Negative

500

600

700

Info

500

600

700

Superficies, texto y bordes

Nunca uses grises fijos: usá --bg-*, --fg-* y --border-* para que la UI responda al tema.

Superficies

--bg-app

--bg-canvas

--bg-subtle

--bg-muted

--bg-shell

Texto

--fg-1 (títulos)

--fg-2 (cuerpo)

--fg-3 (muted)

--fg-4 (placeholder)

Bordes

--border-1 (hairline)

--border-2 (default)

--border-3 (strong)

Escala tipográfica

SAP 72, ajustada respecto a Horizon por defecto. Números tabulares en columnas numéricas (.num o .cl-mono).

--fs-display 36px