UI Kit

Sistema de diseño · v1.2 · solo claro

Todo el sistema, en vivo.

Cada token y componente definido en sistema-de-diseno.md, renderizado e interactivo. El documento es la fuente de verdad; esta página lo implementa exactamente. Bajo cada bloque tienes los tokens que usa: púlsalos y el valor se copia al portapapeles, listo para pegar en el CSS de cualquier proyecto.

§2 · Tokens de color

Color

Un solo acento: el azul es la única voz de acción. Los semánticos comunican estado, nunca decoran. Clic en una muestra para copiar su hex.

Neutros

Fondos, texto y bordes

Acento y semánticos

El texto sobre acento o semánticos es siempre blanco
§3 · Tipografía

Tipografía

Stack del sistema: en Mac/iOS renderiza SF Pro automáticamente. Jerarquía por peso y espacio, no por color.

Display define la páginaDisplay · 34/40 · 700 · −0.02em
Título 1 para secciones grandesTítulo 1 · 28/34 · 700 · −0.015em
Título 2 encabeza tarjetas y modalesTítulo 2 · 22/28 · 600 · −0.01em
Título 3 marca subseccionesTítulo 3 · 17/24 · 600
Cuerpo para texto general y celdas de tabla.Cuerpo · 15/22 · 400
Cuerpo fuerte da énfasis dentro del cuerpo.Cuerpo fuerte · 15/22 · 600
Caption acompaña: labels, ayudas y metadatos.Caption · 13/18 · 400
Micro para badgesMicro · 11/14 · 500 · +0.01em
Micro en mayúsculas para cabeceras y labelsMicro caps · 11/14 · 500 · +0.06em
§4.1 – §4.2 · Espaciado y radios

Espaciado y radios

Base de 4 px. Padding interno 12–16, entre componentes 16–24, entre secciones 32–48.

Escala de espaciado

8 pasos · base 4 px
4
8
12
16
24
32
48
64

Radios

De inputs a modales
--radius-sm · 8
--radius-md · 12
--radius-lg · 16
--radius-full · 999
§4.3 – §4.4 · Elevación y material

Sombras y material

Profundidad por material, no por bordes: sombras neutras y difusas, y superficies translúcidas con blur como firma visual.

Elevación

Nunca sombras duras ni de color
--shadow-1 · reposo
--shadow-2 · hover
--shadow-3 · modal

Material translúcido

Header, sidebar y popovers · pasa el cursor para ver el fondo moverse bajo el material
--bg-material + blur(20px)
§5 · Movimiento

Movimiento

Toda animación responde a una interacción; nada se mueve solo. Solo se animan opacity, transform, color, background-color y box-shadow.

Duraciones

Pulsa una tarjeta: el punto hace el recorrido de ida y vuelta con esa duración

Curvas

Misma duración (250 ms), distinta personalidad
Pressed universal Todo elemento interactivo se encoge a scale(0.97) durante el clic — pruébalo

Reglas

  • Solo se animan opacity, transform, color, background-color y box-shadow (rendimiento).
  • Toda animación responde a una interacción; nada se mueve solo.
  • Con prefers-reduced-motion activo, las transiciones pasan a ser cambios instantáneos.
§7 · Botones

Botones

Altura 40 px, radio --radius-md, tipografía 15/600. Cuatro variantes; el destructivo siempre precedido de confirmación.

En vivo

Prueba hover, pressed y focus con teclado

Estados congelados

Forzados para comparar
DefaultHoverPressedFocusDeshabilitadoCargando Primario Guardar Guardar Guardar Guardar Guardar Guardar Secundario Cancelar Cancelar Cancelar Cancelar Cancelar — Ghost Ver más Ver más Ver más Ver más Ver más — Destructivo Eliminar Eliminar Eliminar Eliminar Eliminar Eliminar
§6 · Iconos

Iconos

Lucide con trazo 1.5 px. El icono hereda el color del texto (currentColor). Área táctil mínima 40×40 aunque el icono mida 20.

Estados del botón de icono

Los congelados arriba; abajo, clicables
Default
Hover
Pressed
Activo
Deshabilitado
Clic = estado activo · el deshabilitado no responde
16 · inline 20 · botones y sidebar 24 · header y estados vacíos
§8 · Formularios

Formularios

Campos de 44 px con label encima en Caption. Focus con borde acento y anillo suave.

Campo de texto

Default, focus, error y disabled

Introduce un correo válido.

Controles

Toggle, checkbox, radio, select y segmented, funcionando
Toggle · 51×31 · encendido --success
Checkbox · 20×20
Radio · punto interior 8 px
Select · panel con --shadow-2
Select · deshabilitado y error

El entorno es obligatorio.

Segmented · la píldora se desliza
§9 · Tabla

Tabla

Orden por columna, selección, acciones en hover, paginación y estado vacío. Busca algo sin resultados para verlo.

Estado Responsable
—
§10 – §11 · Sidebar y header

Layout

Esta misma página es la demo: sidebar de 260 px con material y blur, header sticky de 56 px cuyo borde solo aparece al hacer scroll.

Colapsa la sidebar y verás los tooltips sobre los iconos; haz scroll y fíjate en el borde inferior del header; enfoca el buscador y se expandirá de 200 a 280 px.
§12 · Componentes de apoyo

Apoyo

Tarjeta, modal, toast, badges, chips, tooltip y tabs.

Tarjeta clicable

Hover: --shadow-2 y translateY(−2px)

Despliegues del mes

24

+6 respecto a junio

Modal y toast

Modal con overlay 40 % · toast autodescartado a los 4 s

Badges

Micro 500 · fondo suave + texto del semántico

Producción Staging Caído Desarrollo Archivado

Chips filtrables

Seleccionado = fondo acento, texto blanco

Tooltip

Aparece tras 400 ms de hover, fade 150 ms

Tabs

Subrayado de 2 px que se desliza (250 ms)

Tres servicios activos y ningún incidente abierto.