Live Design System

Fitune Design System

Tokens, componentes y patrones que definen la identidad visual de Fitune. Todo está construido sobre una escala semántica — sin valores hardcodeados.

Vue 2.7 Tailwind CSS v3 Poppins WCAG AA

Colors

Tokens semánticos organizados por rol. Nunca uses hex directamente — usa la clase Tailwind.

Paletas Primitivas

50
100
200
300
400
500
600
700
800
900
950

Interactive

{{ swatch.token }}
{{ swatch.hex }}

Text

{{ swatch.token }}
{{ swatch.hex }}

Surface & Background

{{ swatch.token }}
{{ swatch.hex }}

Border

{{ swatch.token }}
{{ swatch.hex }}

Feedback

{{ state.name }}
{{ state.bg }}

Typography

Familia única: Poppins. Seis roles semánticos que cubren toda la jerarquía visual.

{{ role.name }}
{{ role.size }} / {{ role.weight }}
{{ role.sample }}

Font Weights

Ag
{{ w.name }}
{{ w.value }}

Spacing

Escala base 4px. Usa tokens — nunca valores px sueltos.

{{ s.token }}
{{ s.px }}px

Border Radius

Radios semánticos según el contexto del componente.

{{ r.class }}
{{ r.px }}px
{{ r.use }}

Elevation

Sombras para comunicar profundidad y jerarquía de capas.

{{ e.name }}
{{ e.use }}

Motion

Duraciones y curvas de animación. Usar en transiciones de componentes.

Durations
{{ d.name }}
{{ d.ms }}
Easings
{{ e.name }}
{{ e.value }}

Button

5 variantes · 3 tamaños · 5 estados. Radio: rounded-md · Props: variant size disabled loading

Button.vue · Capa 1 — Átomo

Demo interactivo
variant
size
<ds-button variant="{{ btnDemo.variant }}" size="{{ btnDemo.size }}"{{ btnDemo.disabled ? ' :disabled="true"' : '' }}{{ btnDemo.loading ? ' :loading="true"' : '' }} />
Variantes × Estados
Default
Disabled
Loading
Tamaños
{{ meta }}
Con iconos
sin icono
icon-leading
icon-trailing
secondary
ghost
danger
accent

Input

Estados del input. Radio: rounded-sm.

Default
Helper text
Hover
Helper text
Focus
Helper text
Error
El campo es requerido
Success
Email verificado ✓
Disabled
Campo deshabilitado

Badge

Labels de estado. Radio: rounded-full. Solo para estados — nunca como botón.

Success Warning Danger Info Neutral Brand
Activo Pendiente Cancelado Nuevo Pro

Checkbox

Estados: unchecked, checked, indeterminate, disabled.

Radio

Selección única dentro de un grupo.

Toggle

Activar / desactivar una configuración de forma inmediata.

Avatar

Variantes: image, initials, fallback. Radio: rounded-full.

Sizes
BL
{{ size.name }}
{{ size.px }}px
Variants
fallback
LM
initials
JR
accent
AM
online
Avatar Group
AM
LM
BL
+4

Tag / Chip

Variantes: default, selectable, removable. Radio: rounded-full.

Cardio {{ chip.label }}
Removable
{{ tag.label }}

Spinner

Variantes: brand, white, subtle. Usado para carga en botones y secciones.

brand
subtle
white — sobre fondos oscuros

Divider

Variantes: horizontal, vertical. Tokens: border-default / border-subtle.

Horizontal
border-default
border-subtle
Vertical
Item 1
Item 2
Item 3
With label
O continúa con

Tooltip

BG: bg-inverse · Text: text-inverse · Radio: rounded-sm.

Copiar al portapapeles
top
Eliminar elemento
bottom

FormField

Compuesto: Label + Input + HelperText. Gaps: label→input 4px, input→helper 2px.

Tal como aparece en tu documento
Ingresa un email válido
(opcional)
Puedes cambiarlo luego

Card

3 variantes de superficie. Radio: rounded-md. Padding interno de referencia: 24px.

surface-default
Plan Activo
3 sesiones esta semana
surface-subtle
Progreso
+12% este mes
surface-raised
Racha
7 días seguidos 🔥

Alert

4 variantes semánticas. Radio: rounded-md. Tokens: feedback-{estado}-bg/border/text.

Sesión completada
Tu entrenamiento fue guardado exitosamente.
Nivel de actividad bajo
No has registrado actividad en 5 días.
No se pudo guardar
Verifica tu conexión e intenta de nuevo.
Actualización disponible
Hay una nueva versión de tu plan personalizado.
Sistema en mantenimiento
Algunas funciones podrían no estar disponibles.

Tabs

Tab activo: text-brand + border-brand-strong. Inactivo: text-secondary.

Resumen de actividad
3 sesiones completadas esta semana · 142 min totales
Historial
Últimas 30 sesiones registradas en tu cuenta.
Configuración
Ajusta tu plan, objetivos y preferencias de notificación.
Fitune Design System · Actualizado Abr 2025
WCAG AA Vue 2.7