Saltar al contenido principal

Vista General

La sección de Fundamentos cubre los bloques de construcción centrales del Sistema de Diseño de Tiendana. Estos son los tokens de diseño fundamentales y principios que garantizan consistencia en todas las plataformas.

¿Qué son los Tokens de Diseño?​

Los tokens de diseño son los átomos de diseño visual del sistema de diseño — específicamente, son entidades nombradas que almacenan atributos de diseño visual. Actúan como una única fuente de verdad para colores, espaciado, tipografía y otras decisiones de diseño.

Beneficios de Usar Tokens​

  • Consistencia: Los mismos valores en Angular, Flutter y CSS
  • Mantenibilidad: Actualiza una vez, aplica en todas partes
  • Escalabilidad: Fácil de agregar nuevos temas o variantes
  • Experiencia del Desarrollador: Nombres semánticos en lugar de números mágicos

Categorías de Tokens​

Colores​

Colores de marca, colores semánticos, grises neutros y colores de estado derivados del manual de marca de Tiendana.

Ver Colores →

Tipografía​

Familias de fuentes, tamaños, pesos, alturas de línea y estilos de texto.

Ver Tipografía →

Espaciado​

Escala de espaciado consistente para márgenes, padding y espacios.

Ver Espaciado →

Bordes, sombras y z-index​

Logomark​

La d con su sonrisa, sus cuatro expresiones oficiales y sus colourways (primary, reverse, neon y mono) sobre la paleta de marca.

Ver Logomark →

Cómo Funcionan los Tokens en Diferentes Plataformas​

Angular​

Los tokens están disponibles a través de @tiendana/web-foundation como propiedades personalizadas CSS:

// En estilos del componente
.my-component {
  color: var(--color-forrest);
  padding: var(--spacing-md);
}

Flutter​

Los tokens están integrados en la configuración del tema:

// Acceso vía tema
Container(
  color: Theme.of(context).colorScheme.primary,
  padding: EdgeInsets.all(TiendanaTokens.spacingMd),
)

CSS/SCSS​

Los tokens están disponibles como variables CSS o variables SCSS:

// Variables SCSS
@use '@tiendana/web-foundation' as tdn;

.element {
  color: tdn.$color-forrest;
  padding: tdn.$spacing-md;
}

// Variables CSS
.element {
  color: var(--color-forrest);
  padding: var(--spacing-md);
}

Principios de Diseño​

Nuestro sistema de diseño sigue estos principios fundamentales:

1. Accesibilidad Primero​

Todos los componentes cumplen con los estándares WCAG 2.1 AA con:

  • Contraste de color suficiente (mínimo 4.5:1)
  • Soporte de navegación por teclado
  • Compatibilidad con lectores de pantalla
  • Indicadores de foco

2. Mobile-First y Responsivo​

  • Optimizado para objetivos táctiles (mínimo 44x44px)
  • Breakpoints responsivos
  • Diseños adaptativos

3. Soporte de Modo Oscuro​

La clase scheme-dark en <body> redefine los grises, las superficies --bg-*dp, el texto principal y los bordes; los colores de marca y semánticos no cambian. Ver CSS.

4. Rendimiento​

  • Huella CSS mínima
  • Componentes tree-shakeable
  • Renderizado optimizado

5. Experiencia del Desarrollador​

  • Documentación clara
  • Soporte de TypeScript
  • Nomenclatura semántica
  • APIs consistentes

Próximos Pasos​

Explora los temas específicos de fundamentos:

  • Colores - Paletas de colores de marca y semánticos
  • Tipografía - Escalas de fuentes y estilos de texto
  • Espaciado - Sistema de espaciado y cuadrícula
  • Tokens - Referencia completa de tokens
  • Logomark - El símbolo de Tiendana, sus expresiones y colourways