Design System¶

Vertivo cuenta con un design system documentado mediante Widgetbook, que permite visualizar y probar todos los componentes de UI de forma aislada. Los tokens de diseno se definen en un archivo JSON centralizado procesado por Style Dictionary.

Widgetbook¶

Widgetbook es una herramienta de catalogacion de widgets para Flutter (equivalente a Storybook para web). Cada componente reutilizable tiene una entrada donde se prueban variantes, estados y temas.

# Levantar Widgetbook en desarrollo
cd apps/widgetbook
flutter run -d chrome

Design Tokens (tokens.json)¶

Los tokens de diseno (colores, tipografia, espaciado, bordes, motion) se definen en style-dictionary/tokens.json. Style Dictionary los transforma a:

• Dart constants para Flutter
• CSS variables para Jaspr/dashboard
• YAML para documentacion

style-dictionary/
  tokens.json         # Fuente unica de verdad
  build/
    dart/             # Constantes Dart generadas
    css/              # Variables CSS generadas

Paleta de Colores¶

Basada en la identidad de marca Vertivo:

Tipografia¶

Material 3¶

La app Flutter usa Material 3 con ColorScheme.fromSeed() basado en los tokens de marca. El tema soporta light y dark mode automaticamente.

// Generacion del tema desde tokens
final colorScheme = ColorScheme.fromSeed(
  seedColor: VertivoColors.primary, // #772583
  brightness: Brightness.light,
);

Principio Rosa Test¶