Saltar al contenido principal

Design System OmniBuy

El Design System de OmniBuy define los tokens, componentes y patrones visuales usados en el Admin Panel, el Storefront y la futura App Móvil.

Stack​

  • Admin Panel: HTMX + Tailwind CSS + Alpine.js
  • Storefront: Go Templates + Tailwind CSS (tema Dawn)
  • Mobile (próximamente): Flutter + ThemeData

Principios​

  1. Consistencia — mismos tokens de color, tipografía y espaciado en todos los surfaces
  2. Accesibilidad — WCAG 2.1 AA mínimo
  3. Performance — CSS mínimo, sin JS frameworks innecesarios
  4. Server-side first — renderizado en servidor, JS solo para interactividad imprescindible

Referencia de diseño​

El archivo claude-design/OmniBuy Admin.html contiene la referencia React del shell (sidebar, header, nav) con los componentes Shell.jsx, Icon.jsx y tokens.jsx. Consultar antes de modificar el layout del admin panel.