Sistema de Diseno - MedTime¶

Identificador: MTS-UI-DESIGN-SYSTEM Version: 1.0.0 Fecha: 2025-12-05 Autor: SpecQueen (Consolidacion FASE 5) Estado: Aprobado

1. Proposito¶

Este documento define el Sistema de Diseno oficial de MedTime. Establece los tokens de diseno, paletas de colores, tipografia, espaciado, iconografia y grid system que garantizan consistencia visual y funcional en toda la aplicacion.

2. Principios de Diseno¶

2.1. Principios Fundamentales¶

Principio	Descripcion	Aplicacion
Claridad	Informacion medica debe ser inequivoca	Sin ambiguedad en alertas, dosis, horarios
Confianza	Transmitir profesionalismo y seguridad	Colores sobrios, tipografia legible
Control	Usuario siempre en control de sus datos	Acciones explicitas, confirmaciones
Accesibilidad	Usable por todos, sin excepciones	WCAG 2.1 AA minimo
Eficiencia	Tareas criticas con minimo esfuerzo	One-tap actions, smart defaults

2.2. Personalidad de Marca¶

MedTime es:
- Profesional pero accesible
- Serio sin ser frio
- Confiable y predecible
- Respetuoso del tiempo del usuario
- Empoderador, no paternalista

MedTime NO es:
- Gamificado en exceso (salud es seria)
- Infantil o condescendiente
- Alarmista innecesariamente
- Complejo o abrumador

3. Tokens de Diseno¶

3.1. Colores Primarios¶

Token	Valor Hex	RGB	Uso
`primary.main`	#2196F3	33, 150, 243	Acciones principales, links, estados activos
`primary.light`	#64B5F6	100, 181, 246	Hover states, fondos suaves
`primary.dark`	#1976D2	25, 118, 210	Pressed states, texto sobre fondo claro
`primary.contrast`	#FFFFFF	255, 255, 255	Texto sobre primary

3.2. Colores Secundarios¶

Token	Valor Hex	RGB	Uso
`secondary.main`	#9C27B0	156, 39, 176	Tier Perfect, acciones secundarias
`secondary.light`	#CE93D8	206, 147, 216	Fondos secundarios
`secondary.dark`	#7B1FA2	123, 31, 162	Pressed states
`secondary.contrast`	#FFFFFF	255, 255, 255	Texto sobre secondary

3.3. Colores Semanticos¶

Token	Valor Hex	Ratio vs White	Uso
`success.main`	#4CAF50	3.0:1	Tomas completadas, confirmaciones
`success.dark`	#388E3C	5.1:1	Texto success
`success.light`	#C8E6C9	-	Backgrounds success
`warning.main`	#FF9800	3.0:1	Alertas moderadas, inventario bajo
`warning.dark`	#F57C00	3.5:1	Texto warning
`warning.light`	#FFE0B2	-	Backgrounds warning
`error.main`	#F44336	4.0:1	Errores, alertas criticas
`error.dark`	#D32F2F	5.0:1	Texto error
`error.light`	#FFCDD2	-	Backgrounds error
`info.main`	#2196F3	4.5:1	Informacion general
`info.dark`	#1976D2	5.5:1	Texto info
`info.light`	#BBDEFB	-	Backgrounds info

3.4. Colores Neutrales¶

Token	Valor Hex	Uso
`neutral.50`	#FAFAFA	Backgrounds claros
`neutral.100`	#F5F5F5	Cards filled, dividers light
`neutral.200`	#EEEEEE	Borders disabled
`neutral.300`	#E0E0E0	Borders, dividers
`neutral.400`	#BDBDBD	Placeholder text, disabled icons
`neutral.500`	#9E9E9E	Secondary text light
`neutral.600`	#757575	Secondary text, icons
`neutral.700`	#616161	Body text secundario
`neutral.800`	#424242	Body text, headers
`neutral.900`	#212121	Primary text, headings

4. Paleta por Severidad (Interacciones Medicamentosas)¶

4.1. Escala de Severidad¶

Nivel	Color Principal	Background	Border	Icono
CONTRAINDICADO	#D32F2F	#FFEBEE	2dp solid	error
SERIO	#F57C00	#FFF3E0	2dp solid	warning
MODERADO	#FFC107	#FFFDE7	1dp solid	info
MENOR	#4CAF50	#E8F5E9	1dp dashed	check

4.2. Guia de Aplicacion¶

CONTRAINDICADO (Critical):
- Modal bloqueante obligatorio
- Border pulsing (si reduce motion = false)
- Requiere accion explicita para continuar
- Icono: error (X en circulo)

SERIO (Serious):
- Modal importante, dismissable con confirmacion
- Border solido naranja oscuro
- Recomendacion de consultar medico
- Icono: warning (triangulo)

MODERADO (Moderate):
- Card inline expandible
- Border amarillo
- Informativo, usuario decide
- Icono: info (i en circulo)

MENOR (Minor):
- Texto informativo simple
- Border verde punteado (opcional)
- Solo informativo
- Icono: check (opcional)

5. Paleta por Tier de Suscripcion¶

5.1. Colores de Tier¶

Tier	Color Principal	Badge BG	Text	Acento
Free	#9E9E9E	#F5F5F5	#616161	neutral.500
Pro	#2196F3	#E3F2FD	#1976D2	primary.main
Perfect	#9C27B0	#F3E5F5	#7B1FA2	secondary.main

5.2. Indicadores de Tier en UI¶

Badge de Tier:
+------------------------------------------+
|  [Crown]  PERFECT                        |  <- Solo Perfect tiene crown
|  [Star]   PRO                            |  <- Pro tiene star
|  [O]      FREE                           |  <- Free tiene circulo vacio
+------------------------------------------+

Uso en cards de comparacion:
- Border del tier actual: 2dp solid [tier color]
- "MAS POPULAR" ribbon: secondary.main background

Paywall indicators:
- Icono de lock en features bloqueadas
- Tooltip con "Disponible en Pro/Perfect"
- Link a pantalla de upgrade

5.3. Feature Availability Visual¶

Feature disponible:
[v] Texto de feature              <- Check en success.main

Feature no disponible:
[x] Texto de feature (grayed)     <- X en neutral.400, texto opacity 50%

Feature limitada:
[~] Hasta 3 medicamentos          <- Tilde en warning.main

6. Tipografia¶

6.1. Font Family¶

iOS:
- Primary: SF Pro Display (headings)
- Secondary: SF Pro Text (body)
- Monospace: SF Mono (codes, PIN)

Android:
- Primary: Roboto (all)
- Monospace: Roboto Mono (codes, PIN)

Fallbacks:
- System font stack
- -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial

6.2. Escala Tipografica¶

Token	Size	Weight	Line Height	Uso
`display.large`	57sp	400	64sp	Hero sections (raro)
`display.medium`	45sp	400	52sp	Titulos de seccion principal
`display.small`	36sp	400	44sp	Stats grandes
`headline.large`	32sp	400	40sp	Titulos de pantalla
`headline.medium`	28sp	400	36sp	Titulos de seccion
`headline.small`	24sp	400	32sp	Subtitulos destacados
`title.large`	22sp	500	28sp	Card headers
`title.medium`	16sp	500	24sp	List item titles
`title.small`	14sp	500	20sp	Labels importantes
`body.large`	16sp	400	24sp	Body principal
`body.medium`	14sp	400	20sp	Body secundario
`body.small`	12sp	400	16sp	Captions, helpers
`label.large`	14sp	500	20sp	Button labels
`label.medium`	12sp	500	16sp	Chips, tabs
`label.small`	11sp	500	16sp	Timestamps, badges

6.3. Text Scaling Support¶

Base Size	100%	150%	200%
12sp	12sp	18sp	24sp
14sp	14sp	21sp	28sp
16sp	16sp	24sp	32sp
20sp	20sp	30sp	40sp

REQUISITOS:
- Soportar escalado hasta 200%
- Texto hace wrap, no truncate
- Contenedores se expanden verticalmente
- No scroll horizontal a 320dp de ancho
- Respeta preferencias de sistema

7. Espaciado¶

7.1. Escala de Espaciado¶

Token	Valor	Uso
`spacing.none`	0dp	Sin espacio
`spacing.xs`	4dp	Micro-espacios, entre iconos y texto
`spacing.sm`	8dp	Padding interno de chips, badges
`spacing.md`	16dp	Padding estandar de cards, inputs
`spacing.lg`	24dp	Margenes entre secciones
`spacing.xl`	32dp	Margenes de pantalla
`spacing.2xl`	48dp	Separacion de bloques mayores
`spacing.3xl`	64dp	Hero sections

7.2. Aplicacion de Espaciado¶

Pantalla:
+------------------------------------------+
|          <- 16dp padding horizontal ->   |
|                                          |
|  [Section 1]                             |
|                                          |
|          <- 24dp entre secciones ->      |
|                                          |
|  [Section 2]                             |
|                                          |
+------------------------------------------+

Card:
+------------------------------------------+
| <- 16dp ->                   <- 16dp ->  |
|                                          |
| ^                                        |
| 16dp                                     |
| v                                        |
|                                          |
+------------------------------------------+

8. Border Radius¶

8.1. Escala de Radios¶

Token	Valor	Uso
`radius.none`	0dp	Elementos cuadrados
`radius.xs`	2dp	Micro-elementos
`radius.sm`	4dp	Chips, badges, small buttons
`radius.md`	8dp	Buttons, inputs, small cards
`radius.lg`	12dp	Cards estandar
`radius.xl`	16dp	Bottom sheets, modales
`radius.2xl`	24dp	Dialogs
`radius.full`	9999dp	Circles (avatars, FABs)

8.2. Aplicacion¶

Button: 8dp (radius.md)
Input: 8dp (radius.md)
Card: 12dp (radius.lg)
Bottom Sheet: 16dp top-left/right only
Modal: 24dp (radius.2xl)
Avatar: 9999dp (circle)
FAB: 9999dp (circle)

9. Elevacion y Sombras¶

9.1. Niveles de Elevacion¶

Level	Shadow	Uso
`elevation.0`	none	Flat surfaces
`elevation.1`	0 1dp 3dp rgba(0,0,0,0.12)	Cards, buttons
`elevation.2`	0 2dp 6dp rgba(0,0,0,0.16)	Cards hover, FAB
`elevation.3`	0 4dp 12dp rgba(0,0,0,0.20)	Bottom sheets
`elevation.4`	0 8dp 24dp rgba(0,0,0,0.24)	Modals, dialogs
`elevation.5`	0 16dp 48dp rgba(0,0,0,0.28)	Tooltips flotantes

9.2. Dark Mode Considerations¶

En Dark Mode:
- Elevacion representada por surface color, no sombra
- elevation.0: surface.main
- elevation.1: surface + 5% white
- elevation.2: surface + 8% white
- elevation.3: surface + 11% white
- elevation.4: surface + 14% white

10. Iconografia¶

10.1. Sistema de Iconos¶

Set principal: Material Symbols
Estilo: Outlined (default), Filled (estados activos)
Tamanos: 16dp, 20dp, 24dp, 32dp, 48dp

Consideraciones:
- Iconos consistentes en toda la app
- Siempre acompanados de texto cuando sea critico
- Touch target minimo: 44x44dp (icono puede ser menor)

10.2. Iconos de Forma Farmaceutica¶

Forma	Icono	Descripcion
Tableta/Pastilla	pill	Ovalo horizontal
Capsula	capsule	Forma capsula dos tonos
Liquido	water_drop	Gota
Inyeccion	syringe	Jeringa
Gotas	eye_drops	Gotero
Crema/Topico	cream	Tubo
Inhalador	air	Inhalador
Parche	healing	Parche cuadrado
Supositorio	suppository	Forma ojiva

10.3. Iconos de Estado¶

Estado	Icono	Color
Completado	check_circle	success.main
Pendiente	schedule	warning.main
Omitido	cancel	neutral.400
Vencido	error	error.main
Emergencia	emergency	error.main
Pospuesto	snooze	info.main

10.4. Iconos de Navegacion¶

Destino	Icono Inactivo	Icono Activo
Inicio	home_outline	home_filled
Medicamentos	medication_outline	medication_filled
Agregar (+)	add	add
Calendario	calendar_outline	calendar_filled
Mas	more_horiz	more_horiz

11. Grid System¶

11.1. Mobile Grid (< 600dp)¶

+------------------------------------------+
| M |          Content Area           | M  |
+------------------------------------------+
    ^                                  ^
    16dp                              16dp

- Columnas: 4
- Gutter: 16dp
- Margin: 16dp
- Max content width: 100%

11.2. Tablet Grid (600-840dp)¶

+------------------------------------------------------+
|  M  |            Content Area                 |  M   |
+------------------------------------------------------+
      ^                                          ^
      24dp                                      24dp

- Columnas: 8
- Gutter: 24dp
- Margin: 24dp
- Max content width: 100%

11.3. Large Tablet / Desktop (> 840dp)¶

+----------------------------------------------------------------------+
|      |              Content Area (max 1200dp)               |        |
+----------------------------------------------------------------------+
       ^                                                       ^
       Fluid                                                  Fluid

- Columnas: 12
- Gutter: 24dp
- Margin: 24dp min
- Max content width: 1200dp
- Contenido centrado

11.4. Breakpoints¶

Name	Min Width	Columns	Margin	Gutter
compact	0dp	4	16dp	16dp
medium	600dp	8	24dp	24dp
expanded	840dp	12	24dp	24dp
large	1200dp	12	24dp	24dp

12. Motion y Animaciones¶

12.1. Duraciones Estandar¶

Token	Duracion	Uso
`duration.instant`	0ms	Cambios inmediatos
`duration.fast`	100ms	Micro-interacciones
`duration.normal`	200ms	Transiciones estandar
`duration.slow`	300ms	Transiciones de pantalla
`duration.slower`	500ms	Animaciones complejas

12.2. Easing Curves¶

Token	Curve	Uso
`easing.standard`	cubic-bezier(0.4, 0, 0.2, 1)	Movimiento general
`easing.decelerate`	cubic-bezier(0, 0, 0.2, 1)	Entradas
`easing.accelerate`	cubic-bezier(0.4, 0, 1, 1)	Salidas
`easing.sharp`	cubic-bezier(0.4, 0, 0.6, 1)	Movimiento rapido

12.3. Reduce Motion Support¶

Cuando prefers-reduced-motion: reduce

- Transiciones de pantalla: instant o 100ms fade
- Spinners: estaticos con cambio de opacidad
- Parallax: deshabilitado
- Auto-scroll: deshabilitado
- Haptic feedback: mantenido

Deteccion:
iOS: UIAccessibility.isReduceMotionEnabled
Android: Settings.Global.ANIMATOR_DURATION_SCALE

13. Temas (Light / Dark)¶

13.1. Light Theme (Default)¶

Surface	Value
Background	#FFFFFF
Surface	#FFFFFF
Surface Variant	#F5F5F5
On Background	#212121
On Surface	#212121
Outline	#E0E0E0

13.2. Dark Theme¶

Surface	Value
Background	#121212
Surface	#1E1E1E
Surface Variant	#2D2D2D
On Background	#E0E0E0
On Surface	#E0E0E0
Outline	#424242

13.3. Semantic Colors en Dark¶

Los colores semanticos se ajustan para dark mode:

Error:
- Light: #D32F2F
- Dark: #EF5350 (mas claro para contraste)

Success:
- Light: #388E3C
- Dark: #66BB6A

Warning:
- Light: #F57C00
- Dark: #FFB74D

Info:
- Light: #1976D2
- Dark: #42A5F5

14. Touch Targets y Hit Areas¶

14.1. Tamanos Minimos¶

Elemento	Tamano Minimo	Recomendado
Botones	44x44dp	48x48dp
Iconos interactivos	44x44dp	48x48dp
List items	44dp height	56dp height
Checkboxes/Radios	44x44dp	48x48dp
Links inline	44dp height	-

14.2. Espaciado Entre Targets¶

+------------------------------------------+
|  [Button 1]      8dp      [Button 2]     |
|                  ^^^                     |
|           Minimo 8dp entre targets       |
+------------------------------------------+

Esto previene toques accidentales y cumple
con guidelines de accesibilidad.

15. Referencias¶

15.1. Documentos Relacionados¶

02-component-library.md - Componentes UI
03-accessibility-guidelines.md - Accesibilidad
patterns/ - Patrones de diseno

15.2. Referencias Externas¶

16. Historial de Cambios¶

Version	Fecha	Cambios
1.0.0	2025-12-05	Version inicial - Consolidacion FASE 5

Documento generado por SpecQueen "Un sistema de diseno es el lenguaje comun que permite escalar sin perder identidad."