// CLAVERO · COMPONENTES · 2026.04
UI Kit.
Cada pieza con sus estados (default · hover · focus · active · disabled). Todo lo que aparece en las pantallas se construye combinando estos componentes — no crear nuevos sin justificación.
LOGO · 5 TAMAÑOS
C-key — círculo + barra horizontal + dot. Geométrico, original.
BUTTON · 4 VARIANTES
primary | secondary | ghost | danger · sizes sm/md/lg
PRIMARY · CTA principal
SECONDARY · acción complementaria
GHOST · acción terciaria
DANGER · destructiva
Sizes: sm (7px 12px · 12) · md (9px 16px · 13) — default · lg (12px 22px · 14.5)
INPUT · 5 ESTADOS
comparten chasis: text · search · select · textarea
DEFAULT
FOCUSED
FILLED
ERROR
El correo no es válido
DISABLED
TAG / BADGE / STATUS PILL
tag (skills) · badge (códigos mono) · status pill (semántico)
TAG · habilidad
BADGE · código
STATUS · semántico (siempre punto + texto)
CARD · 3 NIVELES
flat (border) · raised (shadow) · accent (tinted bg)
FLAT
Tarjeta plana
Default. Sólo borde 1px. Para listados densos y formularios.
RAISED
Tarjeta elevada
Con sombra suave. Para foco aislado: hero, modales.
ACCENT
Tarjeta de aviso
Para info crítica: renovaciones, callouts, consejos.
ALERT INLINE · 4 INTENTS
Próxima renovación
Pago recibido
Vence pronto
No encontrado
BREAKPOINTS · 3 NIVELES
mobile
< 640px
1 columna · stack vertical · CTA fullwidth · padding 16-22px
tablet
640 — 1024
2 columnas · sidebar opcional · padding 22-28px
desktop
≥ 1024
3-4 columnas · sidebar fija · padding 28-32px · max-width 1280