Sistema de diseño

Documentación viva de los componentes, tokens y patrones usados en los flujos de alta de cliente. Cada componente incluye anatomía, estados, specs en pixeles y nombres de token listos para llevar a Figma o producción.

Principios

Claridad sobre densidad. Etiquetas siempre arriba del campo, asterisco rojo opcional para requeridos, validación visible al lado del input.

Rojo de marca como acento. El primario se reserva para acciones, headers de sección y enlaces. Nunca como fondo de bloques largos.

Confirmación verde inmediata. Cada vez que un valor se valida, aparece el check verde a la derecha del campo. No hay duda de qué sigue.

Color #color

Tres familias: marca, neutros e indicadores semánticos. Los nombres siguen familia/escala y son directamente compatibles con Figma Variables.

Brand · Primary

Neutrals · Ink

Semantic

Tipografía #typography

DM Sans para todo el producto · JetBrains Mono para tokens, código y specs. Cargar pesos 400, 500, 600 y 700.

Escala tipográfica

Espaciado #spacing

Grid base 4 px. Usa sp/2–sp/4 dentro de componentes; sp/6+ entre secciones de página.

Radios #radius

Cinco escalones. radius/md es el default para inputs y botones; radius/lg para botones grandes y cards.

Elevación #elevation

Cinco niveles, de pop sutil a modal. Las sombras usan negro RGBA con dos capas para un degradado natural.

Iconografía #iconography

24×24 px, stroke 2 px, terminaciones round. Heredan color con currentColor.

Button #button

Cuatro variantes (primary, secondary, ghost, destructive) en tres tamaños (SM 32 · MD 40 · LG 48). El primary es la única acción de continuar — máximo uno por vista.

// Variantes
<button class="btn btn-primary">Siguiente</button>
<button class="btn btn-secondary">Cancelar</button>
<button class="btn btn-ghost">Saltar</button>
<button class="btn btn-destructive">Eliminar</button>

Estados

Tamaños

<button class="btn btn-primary btn-sm">Botón SM</button>
<button class="btn btn-primary">Botón MD</button>
<button class="btn btn-primary btn-lg">Botón LG</button>

Specs

Input #input

Campo base. El asterisco rojo indica requerido; el check verde a la derecha aparece cuando el valor pasa validación.

<label class="field-label">
  <span class="req">*</span>Apellido Paterno
</label>
<input class="input" value="CORONEL"/>
<span class="valid-icon">✓</span>

Estados

Specs

Select #select

Mismo chasis que Input. Caret a la derecha; cuando hay valor mostramos opcionalmente clear (×) y separador (|).

Date picker #datepicker

Tres campos numéricos separados por /. Auto-avance al completar cada par, validación al perder foco.

Checkbox #checkbox

Selección múltiple. Caja 18×18 px, radio 4 px. El estado activo usa el rojo de marca.

Radio #radio

Selección única en un grupo. Mismo tamaño que checkbox; punto interior 8 px.

Toggle / Sí–No #toggle

El switch para preferencias persistentes; el grupo Sí/No para decisiones binarias dentro de un formulario.

Badge & Tag #badge

Badges para estado (no interactivos), tags para filtros (removibles).

Alert #alert

Mensaje inline persistente. Borde izquierdo 4 px en el tono semántico, fondo en versión 100, texto en 800.

Toast #toast

Confirmación temporal en esquina inferior derecha. Auto-dismiss 4 s para success/info, manual para errores.

Modal #modal

Bloqueante con overlay 40% negro. Centra título en rojo + cuerpo + botones (secundario izquierda, primario derecha).

Tabs #tabs

Para alternar vistas hermanas dentro de la misma pantalla. Indicador inferior 2 px en el tono primario.

Stepper #stepper

Para procesos lineales obligatorios. Pasos completados con check, paso actual con número en marca, futuros en gris.

Progress #progress

Barra horizontal lineal. 6 px de alto, radio completo. Para indeterminada usar gradiente animado.

Header / Nav #header

Barra superior fija con logo, navegación primaria, acciones e ícono de carrito/sesión.

Card #card

Contenedor genérico. Border 1 px, radius 10 px, padding sp/5 default; sombra shadow/sm opcional.

Table #table

Headers en mayúsculas + mono, filas con divisor sutil. Estado en columna dedicada con badge.

Formulario de alta · Datos personales #pat-form

Composición de Input + Select + Date + botón primario. Grid de 2 columnas en desktop, 1 en móvil.

Aviso de privacidad #pat-aviso

Layout centrado: título en rojo, cuerpo justificado, dos checkboxes alineados a la izquierda dentro de un bloque centrado, CTA primario.

Términos & código SMS #pat-terms

Combinación de toggle Sí/No + campo telefónico + código SMS con botón "Solicitar código" alineado al input.

Validación de identidad por QR #pat-id

Bloque QR + lista de instrucciones, separador con dot, fallback de SMS, CTA primario.