Fundamentos visuales

Principios

Sobriedad: superficies claras, jerarquía tipográfica fuerte y sombras discretas.
Semántica antes que paleta: los componentes consumen intención (primary, danger, surface) y no tonos de producto directos.
Accesibilidad visible: foco, errores y estados no dependen únicamente del color.
Composición: DsStack, DsInline, DsPanel y encabezados resuelven layouts repetidos sin acoplarse a páginas.
Movimiento funcional: transiciones breves, anuladas con prefers-reduced-motion.

Los valores predeterminados viven en src/tokens/.

Familia	Variables principales
Fondos	`--ds-color-background`, `--ds-color-surface`, `--ds-color-surface-muted`, `--ds-color-surface-inverse`
Texto	`--ds-color-text`, `--ds-color-text-muted`, `--ds-color-text-inverse`, `--ds-color-text-danger`
Bordes y foco	`--ds-color-border`, `--ds-color-border-hover`, `--ds-color-border-danger`, `--ds-color-focus-ring`
Acciones	`--ds-color-primary`, `--ds-color-primary-hover`, `--ds-color-primary-active`, `--ds-color-primary-disabled`, `--ds-color-danger`
Estado	variables `info-`, `success-`, `warning-` y `error-`
Espacio	`--ds-space-1` a `--ds-space-12`
Forma	`--ds-radius-sm` a `--ds-radius-xl`, `--ds-shadow-sm`, `--ds-shadow-md`
Controles	`--ds-control-height-sm`, `--ds-control-height-md`, `--ds-control-height-lg`
Movimiento	`--ds-duration-fast`, `--ds-duration-normal`

El sistema no usa gradientes, transparencias de tipo glass, sombras decorativas ni movimiento ornamental.

Sobrescribe variables después de importar la hoja del paquete:

:root {
  --ds-color-primary: #2563eb;
  --ds-color-primary-hover: #1d4ed8;
  --ds-radius-md: 0.5rem;
  --ds-page-width: 80rem;
}

No sobrescribas selectores internos salvo que estés corrigiendo una limitación documentada. La API estable de theming son las variables --ds-*.