Skip to content

03. Design System & UI Kit

Fase: 04 — Modelado del Sistema
Entregable: 03
Proyecto: NoteVault (PC, Mac, Android, iPhone)

1. Tokens de Diseño y Componentes Base

NoteVault implementa un sistema de diseño sobrio, de alto contraste y estéticamente refinado:

  • Tipografía:
  • Texto de Interfaz: Inter Variable (alta legibilidad en tamaños pequeños).
  • Código y Fórmulas: JetBrains Mono Variable (espaciado monoespaciado exacto).
  • Paleta de Colores (Modo Oscuro / Slate):
  • Fondo Primario: #0f172a (Slate 900)
  • Fondo Secundario / Paneles: #1e293b (Slate 800)
  • Bordes y Separadores: #334155 (Slate 700)
  • Acento Primario: #6366f1 (Indigo 500)
  • Éxito / Completado: #22c55e (Emerald 500)
  • Peligro / Alerta: #ef4444 (Red 500)
  • Componentes Nativos:
  • Barras de progreso de bloques cuadrados.
  • Checkboxes cuadrados vacíos que se rellenan con check sobrio.
  • Bordes superiores con acento de color distintivo por módulo.

2. Marco Conceptual: Token de Sistema de Diseño

1. **Entidad principal e independiente.** 2. **Es la entidad líder del conjunto de datos:** posee un identificador global único que fija un valor atómico de estilo (`design_token_id`: `TOKEN-COLOR-PRIMARY-INDIGO`) consultado por Tailwind CSS y el tema Flutter. 3. **Existe por sí misma en el diseño visual sin depender de componentes aislados**, y es la única responsable de asegurar consistencia cromática y contraste accesible en todas las plataformas. 4. **Punto de entrada y límite de consistencia:** Todo componente de UI debe utilizar tokens semánticos en lugar de valores hexadecimales quemados.