Un único origen de valores
Todos los tokens viven en src/styles.css. Ningún componente declara colores, sombras ni radios propios.
PRD-022 · Design System oficial
El lenguaje visual de Cielo
Fuente única de verdad para color, tipografía, espaciado, radios, elevación, breakpoints, estados, movimiento e iconografía. Cualquier módulo nuevo hereda este sistema automáticamente: se compone con sus componentes y nunca declara estilos propios.
Color
Tipografía
Espaciado y retícula
Border radius
Sombras y elevación
Breakpoints
Estados
Movimiento
Iconografía
Principios
Seis reglas que mantienen la consistencia
Se aplican a todas las áreas: sitio público, plataforma del alumno, panel administrativo y Business OS.
Componer, nunca duplicar
Antes de crear una pantalla se reutiliza el inventario oficial. Si falta una pieza, se añade al sistema, no al módulo.
Semántica antes que estética
El color comunica significado: sky informa, success confirma, warning avisa, destructive detiene y gold distingue lo premium.
Ritmo y jerarquía constantes
Mismo contenedor, mismos gaps y misma escala tipográfica en el sitio público, la plataforma, el panel y el Business OS.
Accesibilidad de serie
Contraste WCAG 2.2 AA, foco visible en todo elemento interactivo y respeto por prefers-reduced-motion.
Herencia automática
Un módulo nuevo que use Container, stack-page, surface-panel y el inventario oficial ya cumple el sistema sin CSS adicional.
Fundamentos
Design Tokens
Color
Definido en oklch con contraste verificado (WCAG 2.2 AA). El dorado es exclusivo de premium, certificados y logros.
Primario
Azul profundo · identidad
Azul cielo
Secundario · datos y foco
Dorado
Premium · logros
Fondo
Blanco cálido
Superficie
Tarjetas y paneles
Éxito
Confirmación
Advertencia
Atención
Error
Bloqueo
| Token | Uso | Utilidad |
|---|---|---|
| background | Fondo global (blanco cálido / grafito en oscuro) | bg-background |
| surface | Superficie elevada neutra | bg-surface |
| card | Tarjetas, paneles y widgets | bg-card |
| primary | Identidad y acciones principales | bg-primary |
| primary-soft | Fondos tintados de la marca | bg-primary-soft |
| sky | Color secundario: foco, datos, énfasis | bg-sky |
| sky-soft | Fondos informativos suaves | bg-sky-soft |
| gold | Solo premium, certificados y logros | bg-gold |
| muted / muted-foreground | Texto y fondos secundarios | text-muted-foreground |
| success / warning / info / destructive | Estados semánticos (+ variantes -soft) | bg-success-soft |
| border / border-strong | Bordes por defecto y de énfasis | border-border |
| ring | Anillo de foco accesible | focus-cielo |
| overlay | Velo de modales, sheets y drawers | surface-overlay |
| chart-1 … chart-5 | Series de gráficas, en orden fijo | text-chart-1 |
Tipografía
Instrument Serif para display y cifras; Manrope para interfaz y lectura.
H1 — Liderazgo con propósito
H2 — Formación que transforma
H3 — Acompañamiento cercano
H4 — Subtítulo de sección
Texto destacado (lead) para introducciones.
Texto base para lectura continua, con altura de línea generosa.
Label UI · etiqueta de interfaz
Caption · metadatos y notas.
Eyebrow · etiqueta de sección
1.248
| Token | Uso | Utilidad |
|---|---|---|
| font-display | Instrument Serif — h1…h4 y KPIs | font-display |
| font-sans | Manrope — interfaz, cuerpo y datos | font-sans |
| font-mono | Identificadores técnicos y código | font-mono |
| h1 … h4 | clamp() fluido, interlineado 1.06 | h1 |
| text-lead | Entradilla de sección | text-lead |
| eyebrow | Antetítulo en mayúsculas espaciadas | eyebrow |
| label-ui | Etiqueta de interfaz y formularios | label-ui |
| text-caption | Texto auxiliar y notas | text-caption |
| text-kpi | Cifra protagonista de dashboards | text-kpi |
| tabular | Cifras alineadas en tablas | tabular |
Espaciado y retícula
Base 4px, ritmo vertical constante.
4
8
12
16
24
32
48
64
| Token | Uso | Utilidad |
|---|---|---|
| spacing (4px) | Unidad base de toda la escala | p-4 |
| Contenedor | max-w-6xl con padding 24/40px | Container |
| Sección pública | py-20 / sm:py-28 | Section |
| Pantalla interna | Ritmo vertical de 32px entre bloques | stack-page |
| Rejilla de KPIs | 1 → 2 → 4 columnas, gap 16px | grid-kpi |
| Rejilla de tarjetas | 1 → 2 → 3 columnas, gap 24px | grid-cards |
| Padding de panel | 24px (20px en KPIs) | p-6 |
Border radius
sm
lg
xl
2xl
3xl
full
| Token | Uso | Utilidad |
|---|---|---|
| radius-sm | Chips internos y celdas | rounded-sm |
| radius-lg | Inputs, selects y botones | rounded-lg |
| radius-xl | Popovers, menús y superficies internas | rounded-xl |
| radius-2xl | Tarjetas, paneles y widgets | rounded-2xl |
| radius-3xl | Modales y superficies mayores | rounded-3xl |
| full | Badges, avatares y pills | rounded-full |
Sombras y elevación
shadow-e1
shadow-e2
shadow-e3
shadow-e4
| Token | Uso | Utilidad |
|---|---|---|
| shadow-e1 | Nivel base: tarjetas y paneles en reposo | shadow-e1 |
| shadow-e2 | Elementos accionables y botones sólidos | shadow-e2 |
| shadow-e3 | Flotantes: popovers, menús, toasts | shadow-e3 |
| shadow-e4 | Modales, sheets y hover elevado | shadow-e4 |
| shadow-focus | Halo de foco en campos de formulario | focus-visible:shadow-[var(--shadow-focus)] |
Breakpoints
| Token | Uso | Utilidad |
|---|---|---|
| xs · 384px | Móvil grande | xs: |
| sm · 640px | Móvil horizontal | sm: |
| md · 768px | Tablet | md: |
| lg · 1024px | Laptop y sidebar fijo | lg: |
| xl · 1280px | Escritorio | xl: |
| 2xl · 1536px | Pantallas amplias | 2xl: |
Estados
| Token | Uso | Utilidad |
|---|---|---|
| hover | Elevación o tinte suave, nunca cambio de color de marca | hover-lift / hover-glow |
| focus-visible | Anillo de 2px con color --ring y offset 2px | focus-cielo |
| active | Compresión sutil al pulsar (0.985) | press |
| selected | Borde azul cielo con halo del 12% | state-selected |
| loading | Skeleton o shimmer, nunca spinners de bloqueo | shimmer |
| disabled | Opacidad 50% y sin eventos | state-disabled |
| error | Borde destructivo y mensaje semántico | aria-[invalid=true] |
Movimiento
reveal
reveal-soft
reveal-scale
| Token | Uso | Utilidad |
|---|---|---|
| ease-cielo | Curva única de la marca | ease-[var(--ease-cielo)] |
| duration-instant · 120ms | Cambios de color y tinte | duration-[120ms] |
| duration-quick · 180ms | Hover, foco y pulsación | duration-200 |
| duration-soft · 380ms | Elevación y desplazamiento | duration-[380ms] |
| reveal | Entrada de bloques al montar | reveal |
| reveal-soft / reveal-scale | Entradas suaves y de tarjetas | reveal-soft |
| shimmer | Carga de contenido | shimmer |
Iconografía
| Token | Uso | Utilidad |
|---|---|---|
| icon-xs · 14px | Dentro de badges y microtextos | icon-xs |
| icon-sm · 16px | Tamaño por defecto en interfaz | icon-sm |
| icon-md · 20px | Cabeceras de widget y estados vacíos | icon-md |
| icon-lg · 24px | Hero y cabeceras destacadas | icon-lg |
| icon-tile | Contenedor 36px con fondo azul cielo | icon-tile |
| icon-tile-lg | Contenedor 44px con borde y degradado | icon-tile-lg |
Biblioteca
Componentes reutilizables
Inventario oficial. Antes de crear una pantalla se compone con estas piezas; si falta una, se añade al sistema, nunca al módulo.
Botones
KPIs y widgets
Misma retícula en alumno, admin y Business OS.
Alumnos activos
1.248
+12%
MRR
18.4k €
+6,2%
Retención
94%
estable
Abandono
2,1%
-0,4%
Progreso del programa
Libertad Infinita
68% completado · 8 de 12 módulos
Actividad reciente
- hace 2 h
Nueva mentoría reservada
- ayer
Certificado emitido
- 3 días
Pago confirmado
Tarjetas
Tarjeta estándar
Radio 2xl, borde suave y elevación e1.
Contenido de la tarjeta con jerarquía tipográfica consistente.
Premium
Gold
El dorado solo distingue lo premium.
Certificaciones, logros y planes superiores.
Sin resultados
Estado vacío único para tablas, listados y widgets.
Formularios
Retroalimentación
Información
Tono informativo en azul cielo.
Todo correcto
Confirmación de una acción completada.
Requiere atención
Aviso que no bloquea la operación.
Error
Impide continuar hasta resolverse.
Default
Soft
Sky
Éxito
Aviso
Error
Premium
Contorno
Superficies flotantes y navegación
Pestañas con superficie de tarjeta en el estado activo.
Datos y carga
| Alumno | Programa | Estado | Progreso |
|---|---|---|---|
| Ana Duarte | Libertad Infinita | Activo | 82% |
| Marco Silva | Finanzas con Fe | Pendiente | 34% |
Herencia automática
Inventario oficial de componentes
Cada pieza indica su origen y la regla que debe respetarse. Es el contrato visual de la plataforma.
| Componente | Origen | Regla |
|---|---|---|
| Buttons | @/components/ui/button | Variantes cielo, sky, gold, outline, quiet y ghost. Alturas 32/36/40/48. |
| Cards | @/components/ui/card | Radio 2xl, borde suave y shadow-e1. Interacción con hover-lift. |
| Inputs | @/components/ui/input · textarea | Altura 40, radio lg y halo de foco azul cielo. |
| Selects | @/components/ui/select | Idéntico al input; panel con surface-floating. |
| Modals | @/components/ui/dialog · alert-dialog · sheet · drawer | Velo surface-overlay y superficie surface-dialog. |
| Tables | @/components/ui/table · DataTable | Cabecera en mayúsculas, cifras tabulares y filas con hover. |
| Widgets | @/components/ui/kpi (Widget) | Contenedor único de bloque con título, icono y acción. |
| KPIs | @/components/ui/kpi (KpiCard) | text-kpi, etiqueta en mayúsculas y tendencia semántica. |
| Dashboards | grid-kpi · grid-cards · stack-page | Misma retícula en alumno, admin y Business OS. |
| Charts | @/components/ui/chart | Series siempre en el orden chart-1 → chart-5. |
| Calendars | @/components/ui/calendar | Celdas con radio lg y día seleccionado en primary. |
| Alerts | @/components/ui/alert | Tonos default, info, sky, success, warning, destructive y gold. |
| Toasts | @/components/ui/sonner | Superficie flotante e3; se monta una sola vez en la raíz. |
| Badges | @/components/ui/badge | Tonos suaves; gold reservado a premium y logros. |
| Timeline | @/components/ui/timeline | Cronologías de progreso, actividad y auditoría. |
| Navigation | AppShell · Header · Footer | Se deriva de architecture.ts; sidebar con acento sky. |