Design System · Web + Mobile
Arquitectura en 3 capas: Primitivos (valores brutos) → Semánticos (significado contextual) → Componente (uso específico en UI).
Tres familias con roles diferenciados: Inter (UI funcional), Fraunces (display emocional), JetBrains Mono (datos/código).
5 variantes × 3 tamaños. Tokens de componente: --btn-*
3 variantes de card para diferentes contextos: estadísticas de dashboard, producto y perfil.
Indicadores de estado semánticos para mascotas, planes y alertas clínicas.
Campos con label, helper text, error state y soporte de iconos.
Mensajes de sistema con 4 niveles de severidad.
Sistema de temas basado en CSS Custom Properties con data-theme attribute. Detección automática via prefers-color-scheme.
Sincronización automatizada de tokens desde Figma hasta CSS, iOS y Android via Style Dictionary.
Configuración de Style Dictionary para generar tokens multi-plataforma de NutriPaw desde un único fuente de verdad.
// NutriPaw Design System — Style Dictionary Config import StyleDictionary from 'style-dictionary' export default { source: ['tokens/**/*.json'], platforms: { web: { transformGroup: 'css', prefix: 'np', // np = NutriPaw buildPath: 'dist/web/', files: [ { destination: 'tokens.css', format: 'css/variables' }, { destination: 'tokens.js', format: 'javascript/esm' } ] }, ios: { transformGroup: 'ios-swift', buildPath: 'dist/ios/', files: [{ destination: 'NutriPawTokens.swift', format: 'ios-swift/class.swift', className: 'NutriPawTokens' }] }, android: { transformGroup: 'android', buildPath: 'dist/android/', files: [ { destination: 'colors.xml', format: 'android/colors' }, { destination: 'dimens.xml', format: 'android/dimens' } ] } }, transform: { 'color/semantic': { type: 'value', matcher: token => token.attributes.category === 'color', transformer: token => token.original.value.startsWith('{primitive') ? resolveAlias(token.original.value) : token.original.value } } }