Fundamentos
La capa más baja del sistema: los valores atómicos de los que dependen todos los componentes. Tokens con nombre estable, pensados para exportarse como variables CSS y como objeto TS.
Colores
Paleta extraída de la guía Look & Feel original en XD. Se conservan los nombres del XAML (ColorAccent, ColorLeading) y se añaden semánticos y soft variants necesarios para producto.
Acento — marca
Uso: botón primario, foco, estado activo en navegación, elementos interactivos críticos. Nunca en texto corrido ni en fondos extensos (reservado para acentuar, no para dominar).
Leading — texto y estructura
Uso: #172836 es el color de texto principal y base de todas las sombras. Las derivadas .7 y .3 son el mismo color a 70% y 30% de opacidad — texto secundario y deshabilitado. Nunca negro puro.
Superficies por contexto
Jerarquía real de Onaris. El sistema distingue tres contextos: app (Background), Fields (campos sobre la app) y Drawer (panel lateral, con sus propios campos internos). Cada contexto define su superficie, el color de los elementos encima y su borde (= superficie oscurecida 10%).
Bordes
Los bordes son sólidos, derivados de su superficie oscurecida un 10%. Cada contexto tiene el suyo para mantener el contraste correcto.
Semánticos
Cuatro familias (Success, Warning, Danger, Info), cada una con solo dos tokens: principal y text (versión oscura para texto sobre fondo claro). Los fondos soft y bordes que usan los componentes se derivan automáticamente del principal — no son tokens propios.
Success
Warning
Danger
Info
Tipografía
Dos familias: Plus Jakarta Sans para todo el producto y las webs, JetBrains Mono para códigos SKU, metadatos, contadores y lo que deba alinearse verticalmente (tabular-nums).
Plus Jakarta Sans
Sans geométrico con personalidad. Neutral para producto, expresivo en displays grandes.
JetBrains Mono
Para datos técnicos: SKUs, IDs, contadores, timestamps. Tabular nums para alinear columnas.
Roles tipográficos
Ocho roles semánticos en lugar de una escala numérica. Cada componente usa el rol que le corresponde; así el sistema se mantiene simple y consistente.
700
-0.02em
600
-0.01em
400
1.5
600
1.5
400
1.5
400
1.4
700
+0.08em
500
tabular
Pesos
Sombra
Un único nivel de elevación para todo lo que se superpone al contenido: desplegables, drawers, modales, popovers, sliders. Con tinte leading (#172836 con alpha), nunca negro puro.
Foco
Los campos de texto (Input, Textarea, Select) marcan el foco solo con el borde accent, sin sombra. Los botones y controles de selección (checkbox, radio, switch) sí muestran un anillo de foco con accent al 22% para accesibilidad de teclado.
Movimiento
Tres duraciones y tres curvas. Discreto por defecto: la UI no baila, acompaña.
| Token | Valor | Uso |
|---|---|---|
--duration-fast | 120ms | Hover, press de botón, cambio de color |
--duration-normal | 180ms | Default para transiciones de UI |
--duration-slow | 280ms | Drawers, modals, elementos grandes |
--ease-out | cubic-bezier(.4, 0, .2, 1) | Curva default. Entra rápido y asienta. |
--ease-spring | cubic-bezier(.34, 1.56, .64, 1) | Overshoot sutil para feedbacks positivos |
Breakpoints
Cinco cortes mobile-first alineados con Tailwind/Radix — facilita adopción.
| Token | min-width | Contexto |
|---|---|---|
sm | 640px | Phablet / móvil landscape |
md | 768px | Tablet portrait |
lg | 1024px | Desktop pequeño / tablet landscape |
xl | 1280px | Desktop estándar |
2xl | 1536px | Desktop amplio |