Empezar

Orali DS es el sistema de diseño de Tienda Orali, un e-commerce de compra por packs. Reúne tokens, componentes y patrones con una sola fuente de verdad, de Figma al código.

Qué mirar primero

ButtonOcho jerarquías, estados y tokens leídos en vivo. La página más completa.Design tokensLa arquitectura en tres capas que sostiene todo lo demás.Product cardUn patrón real, compuesto con Button, Price y Stepper.

Decisiones clave

Tokens primero. Primitive → semantic → component. Un componente nunca usa un valor suelto ni un primitivo de color.
Accesibilidad como mínimo. Texto 4.5:1 y elementos gráficos 3:1 (WCAG AA). El contraste de cada componente se calcula desde los tokens reales.
Una sola fuente de verdad. Tokens Studio (Figma) → GitHub → Style Dictionary → sitio. Los componentes se ven y se prueban también en Storybook.
Documentación conectada al código. Los componentes de estas páginas son los de la tienda, y sus tokens se leen del paquete real.

Enlaces

Storybook de Orali ↗: componentes y patrones, interactivos.
orali-design-tokens ↗: el repo de tokens, con su CHANGELOG.

Para desarrolladores

Cuatro repos: orali-design-tokens (tokens), tienda-orali (sitio en Next.js + Tailwind), ds-docs-theme (el theme de esta documentación) y sytem-docs-orali (los datos de Orali).

1. Instalar los tokens

Desde GitHub, fijando un tag. La tienda usa la v4.1.0.

"dependencies": {
  "@orali/design-tokens": "github:e-roman/orali-design-tokens#v4.1.0"
}

Fijá siempre un tag: si apuntás a una rama, un cambio de tokens puede llegar sin aviso.

2. Cargar estilos y Tailwind

// app/layout.tsx
import "@orali/design-tokens/tokens.css"

// tailwind.config.ts
import oraliTokens from "@orali/design-tokens/tailwind"
export default { presets: [oraliTokens] }

El preset trae colores, radios y tipografía con nombres semánticos. Si falta un valor, se crea el token; no se agrega en tailwind.config.ts.

3. Usar los componentes

import { Button } from "@/components/ui/button"

<Button variant="add-to-cart">Agregar</Button>

Cada página de Componentes documenta props, estados, tokens y reglas de uso.

Reglas

Nomenclatura en kebab-case: {categoría}-{grupo}-{rol}-{estado}, por ejemplo color-action-primary-bg-hover.
Los cambios de tokens se hacen en Tokens Studio, en una rama, y el sitio sube de versión por tag.

Correr esta documentación

npm install
npm run dev     # http://localhost:3200

Necesita tienda-orali y ds-docs-theme en la carpeta vecina: copia sus componentes y estilos a una carpeta local (shop/) antes de arrancar.