Empezar

Ketea DS es el sistema de diseño de la tienda de Ketea. Reúne tokens, componentes y patrones con una sola fuente de verdad, de Figma al código.

GitHub
Storybook
Figma

Qué incluye

Foundations: los design tokens (color, tipografía, spacing, radius, shadow, border, opacity, motion y size).
Componentes y patrones: las piezas reales de la tienda, publicadas en Storybook.

Instalar los tokens

Los tokens viven en un repositorio propio y se instalan por versión.

npm install github:e-roman/ketea-design-tokens#v2.1.0

Repositorio: https://github.com/e-roman/ketea-design-tokens

Usarlos en CSS

import "@ketea/tokens/tokens.css"

.btn-primary {
  background: var(--color-brand-default);
  color: var(--color-semantic-text-on-brand);
  border-radius: var(--radius-md);
}