Principios de diseño
Los principios son los criterios de decisión del sistema. Cuando hay dos opciones válidas, los principios determinan cuál elegir. No son aspiraciones — son restricciones que aplican a todo componente, token y patrón del DS.
Campo primero
Field-first design
Los gestores trabajan bajo el sol, en contextos ruidosos, con señal deficiente y a veces con guantes. Cada decisión de diseño debe tolerar esas condiciones. Si algo es difícil en campo, está mal diseñado.
Criterios de cumplimiento
- ✓Áreas táctiles mínimas de 40×40px
- ✓Contraste mínimo 4.5:1 en texto (WCAG AA)
- ✓Flujos que funcionan con señal baja (offline-first donde sea posible)
- ✓Tipografía legible a plena luz del sol
Claridad sobre creatividad
Clarity over creativity
Un gestor tiene 2 minutos para registrar una visita. No tiene tiempo para descubrir interfaces. La UI debe ser tan obvia que no requiera onboarding. Si algo necesita explicación, debe rediseñarse.
Criterios de cumplimiento
- ✓Etiquetas explícitas — nunca solo íconos sin texto en acciones principales
- ✓Jerarquía visual clara: qué es lo más importante en pantalla
- ✓Estados visibles: el usuario siempre sabe qué está pasando
- ✓Mensajes de error que dicen qué hacer, no solo qué salió mal
Consistencia sistemática
Systematic consistency
El mismo patrón para el mismo problema en toda la app. Una vez que el usuario aprende cómo funciona un input, todos los inputs deben funcionar igual. El sistema elimina la sorpresa.
Criterios de cumplimiento
- ✓Un componente para cada necesidad — no soluciones ad-hoc
- ✓Los tokens definen valores, los componentes los aplican
- ✓Mismo vocabulario en diseño y código
- ✓No inventar variantes sin documentar y aprobar
Accesibilidad no negociable
Accessibility by default
La accesibilidad no es una feature — es un requisito de calidad. Un diseño que excluye a usuarios con discapacidades visuales, motrices o cognitivas es un diseño defectuoso, independientemente de lo que diga el cliente.
Criterios de cumplimiento
- ✓WCAG 2.1 AA como mínimo en toda la UI
- ✓Navegación completa por teclado en web
- ✓Soporte de VoiceOver / TalkBack en mobile
- ✓No usar solo color para comunicar estado
Trazabilidad Figma → Código
Figma-to-code traceability
Cada decisión de diseño tiene un origen documentado. Si no está en Figma, no existe. Si está en Figma pero no en el DS, hay deuda técnica. El sistema cierra esa brecha continuamente.
Criterios de cumplimiento
- ✓Toda variante de componente documentada en Figma
- ✓Todo token usado en código referenciado en tokens.json
- ✓Estados de trazabilidad: Extraído / Normalizado / Inferido / Propuesto
- ✓Changelog actualizado con cada cambio de especificación
Anti-principios (qué no somos)
✗ No somos un Design System genérico
✓ Somos específicos para investigación de campo en México
✗ No priorizamos la novedad visual
✓ Priorizamos la eficiencia y claridad operativa
✗ No inventamos componentes por cada caso especial
✓ Extendemos los existentes con variantes documentadas
✗ No ignoramos el contexto de uso real
✓ Toda decisión considera al gestor en campo bajo el sol
“El mejor diseño es el que el usuario no nota porque simplemente funciona.”
— Principio rector del DS Investigación 2.0