# Faber Design System

> El sistema de diseño de Faber (Grupo Faber): los tokens, las piezas y las
> razones detrás de cada decisión. Esto es la vitrina de
> `@pantherkit/design-system`, y consume el paquete de verdad — lo que se ve
> aquí es lo que hay en producción, no una captura.

> Cada página HTML tiene un gemelo en markdown en la misma ruta con `.md`,
> generado de la misma fuente. Lee el `.md`. Lee solo lo que tu tarea
> necesite (just-in-time).

> ⚠️ **Antes de escribir una línea de interfaz de Faber, lee
> [/convenciones.md](/convenciones.md).** Es el entregable principal del
> sistema, a la altura del código: sin él, cada run reinventa el criterio y el
> resultado se parece a Faber por casualidad.

## Empieza aquí
- [/convenciones.md](/convenciones.md): ★ CÓMO SE CONSTRUYE — cómo se elige un color y por qué nunca un hex suelto, cuándo se anima y cuándo no, qué va en tokens/componentes/patrones/secciones, por qué la landing no lleva React, y qué hacer cuando algo no se ve bien. Incluye el vocabulario completo (tokens y clases) y la lista de comprobación de cierre.
- [/](/): la portada. Qué es el sistema, para quién y qué problema resuelve. Es la única página sin gemelo en markdown: no dice nada que no esté en /convenciones.md.

## Tokens (el valor nace aquí y en ningún otro sitio)
- [/tokens.md](/tokens.md): la referencia completa — color, tipografía, espacio, radios y movimiento, cada uno con el porqué de su valor. Si vas a escribir un literal, la respuesta está aquí.

## Piezas (lo que se puede usar tal cual)
- [/componentes.md](/componentes.md): el inventario. Qué existe, en qué capa vive y qué se importa para tenerlo.
- [/componentes/boton.md](/componentes/boton.md): `.fbtn` — el botón de cristal fluido. Variantes `--primario` y `--compacto`. La primera pieza que nace en el sistema en vez de portarse desde la landing.
- [/componentes/cristal.md](/componentes/cristal.md): `.cristal` — el MATERIAL, no la barra: velo, desenfoque, filo y brillo especular. Solo funciona donde el contenido le pasa por detrás.
- [/componentes/ficha.md](/componentes/ficha.md): `.caso-*` — la hoja tipo App Store de un proyecto. No trae su CTA ni sus chips, y es deliberado.
- [/componentes/tira.md](/componentes/tira.md): `.tira` y `.marquee` — la prueba social. Son DOS patrones, no uno: la estática es la opción por defecto.
- [/componentes/carrusel.md](/componentes/carrusel.md): `.car` — encaje nativo con `scroll-snap` y coverflow. Funciona sin JavaScript. Se importa aparte y no entra en `components.css`.

## El paquete
- Nombre: `@pantherkit/design-system` (v0.4.1), publicado en GitHub Packages.
- Repo: https://github.com/PantherKit/faber-design-system
- Entradas: `/tokens.css`, `/components.css`, `/carrusel.css` y el índice React.
- `tokens.css` se importa siempre y primero: los componentes no traen ni un
  valor literal, así que sin él las `var(--…)` quedan sin resolver y la
  página se rompe sin dar un error.

## Fuera de este sitio (la decisión, no la implementación)
- `marca/DesignSystem/PLAN.md`: las tres decisiones macro, el inventario de qué asciende a componente y la política de motion.
- `marca/DesignSystem/docs/para-agentes.md`: las reglas operativas, escritas como prohibiciones.
- `marca/DesignSystem/docs/lo-que-gusta.md`: lo aprobado y lo rechazado, con el motivo de cada rechazo. No inventes criterio: si no está ahí, no está bendecido.
- `operaciones/faber-ai-first/llms.txt`: el cerebro de la empresa. Qué vende Faber, a quién y con qué stack.