UI Kit · Sistema de Diseño

Sistema de diseño · v1.3 · 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

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

Nombre del proyecto

Focus (forzado)

Correo

Introduce un correo válido.

Deshabilitado

Controles

Toggle, checkbox, radio, select y segmented, funcionando

Toggle · 51×31 · encendido --success Notificaciones por correo Copias de seguridad Acceso root (bloqueado)

Checkbox · 20×20 Desplegar con SSL Añadir a PM2 Usuario aislado (obligatorio)

Radio · punto interior 8 px Producción Staging Legacy

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		Acciones

§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

+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

Alert inline

Persistente; el toast es efímero

Hay una versión nueva de la CLI disponible.

Dominio verificado correctamente.

El certificado caduca en 7 días.

No se pudo desplegar

El puerto ya está en uso. Revisa la configuración.

Menú contextual

Panel como el select · destructivo en rojo

Breadcrumbs

Caption · actual en 500 sin enlace

Progreso

Barra con scaleX · spinner 16/20/28

Skeleton

La silueta imita el layout final · pulso solo al cargar

María García

Actualizó los ajustes de vitalapp y relanzó el despliegue.

Tarjeta KPI · peticiones/día

48,2 k

12 % respecto a la semana pasada

Lista de actividad

Icono en círculo accent-soft + tiempo en Caption

Pablo desplegó gymbros v2.4.1hace 2 horas
Certbot renovó el certificado de style.pgrhub.eshace 2 días

Tabs

Subrayado de 2 px que se desliza (250 ms)

Tres servicios activos y ningún incidente abierto.

§15 · Plantillas de página

Plantillas

Pantallas completas montadas solo con piezas del sistema. Ábrelas para probarlas: cada una lleva una píldora para volver aquí.