Cada cliente trae su color primario y su color de fondo — el sistema entero se recolorea en runtime. Sin forks, sin rebuilds. Elige una marca abajo y mira toda la landing responder.
* Retail / Panadera / SuperMX son marcas ilustrativas. Colores aproximados para demostrar el modelo multi-marca — no implican relación comercial.
El playground de arriba cambia tu vista. Esta sección muestra tres marcas conviviendo simultáneamente — cada una con su primary, su surface, sus focus rings. El mismo Card, el mismo Button, el mismo Input.
Red de conveniencia. Alta rotación, ticket bajo, tenants por plaza.
Consumo masivo regional. Pedidos recurrentes por ruta, CFDI global.
Autoservicio nacional. Complementos de pago, conciliación por tienda.
Solo dos variables cambian entre marcas — --color-primary y --color-surface. Los primitivos no se tocan, no se
forkean, no se recompilan. El DS absorbe la marca en runtime desde la
raíz del árbol.
shadcn nos ahorraba un trimestre. No lo adoptamos — por razones concretas. Aquí está el mismo Card de factura en ambos lados.
JetBrains Mono con tnum alinea folios, RFCs y montos. Inter
los desajusta.
El operador fiscal lee FOL-00158, no INV-00158. La palabra es "Timbrar", no "Submit".
Grises cálidos vs slate fríos. Evita sentirse como un SaaS gringo rentado.
shadcn envuelve. Goyo absorbe la marca en runtime sin fork ni rebuild.
Cada decisión de diseño del DS pasa por este filtro. Si un primitivo falla una de estas seis, no entra.
Timbrar, folio, RFC, CFDI, complemento, uso SAT. El vocabulario fiscal está en la UI, no en notas de implementación.
El operador fiscal pasa 6 horas al día aquí. Tablas densas, formularios compactos, respiración mínima deliberada — no aire decorativo.
Focus rings visibles, ratios AA contra surface, targets ≥44px, roving tabindex. Los primitivos ya vienen accesibles.
Montos, folios, RFCs, fechas — monoespaciado con tnum activado. Columnas que se alinean sin pensar.
Un primary por vista, usado para intención (CTA, foco, estado activo). El resto es neutral. Sin arcoíris UI.
Cada primitivo expone props para streaming, tool-calls, y estados de generación. No retrofit — designed-in.
Una muestra del catálogo — los más usados, recoloreados con la marca activa del hero. El catálogo completo vive aparte, con props, estados y código para cada pieza.
5 variantes · loading · icon slot.
Label · prefix · errores · focus tonal.
Header · Body · Footer. Jerarquía fiscal.
5 intents · dot · count.
Modal · focus trap · esc.
useToast · auto-dismiss · live-region.
Cambia la marca en el hero y estos colores cambian contigo. Una sola fuente de verdad para toda la aplicación — sin mantener paletas paralelas por cliente.
Todos los neutrales corren en OKLCH a hue 60°. El warmth
es consistente entre surface, neutral-100, neutral-500 y neutral-700 sin hue drift. El primary + primary-deep se derivan
automáticamente del hex que elijas: sin curvas manuales por marca.
Cada primitivo pasa estas cuatro pruebas antes de publicarse. No son aspiracionales — son check-gates automatizados en CI.
Contraste mínimo 4.5:1 contra surface en todos los primarios y deep. Validado en CI contra los 4 presets.
Todo interactivo cumple 2.5.5 de WCAG. El operador táctil en almacén no pelea con la UI.
Roving tabindex, focus trap en overlays, arrow-keys en radio/menu. Cada primitivo prueba su teclado.
Un cambio de --color-primary repinta el árbol
sin reflow. Sin rebuild, sin fork.
Componentes, tokens y guías — todo lo que necesitas para empezar.