v1.0.0 Estable

Tokens de Color

Arquitectura en 3 capas: Primitivos (valores brutos) → Semánticos (significado contextual) → Componente (uso específico en UI).

Verde NutriPaw Primitivo
green-50#f0fdf4
green-100#dcfce7
green-200#c8e6c9
green-300#86efac
green-500 ★#4CAF50
green-600#16a34a
green-700#2E7D32
green-800#166534
Morado CalmPaw Primitivo
purple-50#faf5ff
purple-200#ede9fe
purple-400#a78bfa
purple-500 ★#7C3AED
purple-700#5B21B6
purple-800#4c1d95
Estado / Semántico Semántico
Successgreen-500
Warningamber-500
Dangerred-500
Infoblue-500
Tokens Semánticos — Texto
--text-primary
slate-900 / slate-50
--text-secondary
slate-600 / slate-300
--text-tertiary
slate-400 / slate-500
--text-brand
green-700 / green-300
Tokens Semánticos — Superficie
--surface-default
white / slate-900
--surface-subtle
slate-50 / slate-800
--surface-brand
green-500 / green-600
--surface-calm
purple-500 / purple-600

Tipografía

Tres familias con roles diferenciados: Inter (UI funcional), Fraunces (display emocional), JetBrains Mono (datos/código).

Display XL --text-5xl / display
NutriPaw Pro
Heading 1 --text-3xl / bold
Plan de Nutrición Personalizado
Heading 2 --text-2xl / semibold
Análisis de Ingredientes
Body Base --text-base / regular
La dieta personalizada de Luna incluye proteínas de alta calidad, omegas esenciales y un equilibrio nutricional adaptado a su edad y actividad.
UI Small --text-sm / medium
Actualizado hace 2 horas · Dr. García · Clínica Sur
Code Mono --font-mono / text-sm
--interactive-primary: var(--color-green-500);

Button

5 variantes × 3 tamaños. Tokens de componente: --btn-*

Variantes
Tamaños

Card

3 variantes de card para diferentes contextos: estadísticas de dashboard, producto y perfil.

🐶 Mascotas Activas
1.842
↑ +12,4% vs mes ant.
🩺 Veterinarios
247
↑ +8 nuevos
🐾🥩
Pack Senior Plus Activo
Nutrición adaptada para perros mayores de 7 años. Alta en glucosamina y omega-3.
39,90 €/mes
🐕
Luna García
Golden Retriever · 3 años · 28 kg
Saludable
A
Condición
94%
Adherencia
12
Semanas

Badge

Indicadores de estado semánticos para mascotas, planes y alertas clínicas.

Saludable Revisión Pendiente Alerta Crítica En Seguimiento NutriPaw CalmPaw

Input & Form

Campos con label, helper text, error state y soporte de iconos.

🐾
Nombre tal como aparece en la ficha veterinaria.
Se usará para personalizar el plan nutricional.
⚠ El peso debe ser mayor que 0 kg.
Recibirá los informes de evolución mensual.

Alert

Mensajes de sistema con 4 niveles de severidad.

Plan Nutricional Actualizado
El plan de Luna se ha sincronizado correctamente con el portal del veterinario. Próxima revisión: 14 jul 2026.
⚠️
Adherencia por Debajo del Umbral
Rocky lleva 5 días sin registrar ingesta. Se recomienda contactar al propietario para verificar el seguimiento del plan.
🚨
Alergia Detectada — Acción Requerida
El ingrediente «harina de trigo» en el Pack Adulto Pro puede generar reacción en Mía. Revise el plan antes de continuar.
ℹ️
Nuevas Fórmulas CalmPaw Disponibles
3 nuevas variantes de la línea CalmPaw ya están disponibles para prescripción. Accede desde el catálogo de productos.

Temas: Claro / Oscuro

Sistema de temas basado en CSS Custom Properties con data-theme attribute. Detección automática via prefers-color-scheme.

☀️ Modo Claro — Portal Clientes
Luna García · Golden
Plan Senior Plus · Semana 12 de 24
Adherencia 94%
Última ingesta: hace 3 horas
🌙 Modo Oscuro — App Veterinaria
Luna García · Golden
Plan Senior Plus · Semana 12 de 24
Adherencia 94%
Última ingesta: hace 3 horas

Pipeline Figma → Código

Sincronización automatizada de tokens desde Figma hasta CSS, iOS y Android via Style Dictionary.

🎨
Figma Tokens Plugin
📦
tokens.json Export
⚙️
Style Dict. Transform
🔄
CI/CD GitHub Action
🌐
CSS Vars Web
📱
iOS/Android Swift / XML

Style Dictionary Config

Configuración de Style Dictionary para generar tokens multi-plataforma de NutriPaw desde un único fuente de verdad.

style-dictionary.config.js
// 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
    }
  }
}