ONSIDE v0.1.0

Tokens

Sistema cromático

Fuente de verdad: tokens/*.tokens.json (W3C DTCG). Cada muestra se lee directo del JSON; los alias se resuelven a su hex final y el OKLCH exacto va como metadato.

Core — primitivos

Valores crudos. No consumir en UI directamente.

lima

color.lima.50 #F4FFCC oklch(0.979 0.067 117.5)
color.lima.100 #E9FF99 oklch(0.962 0.129 118.8)
color.lima.200 #DBFF66 oklch(0.945 0.181 121.2)
color.lima.300 #CAFF33 oklch(0.931 0.218 124.1)
color.lima.400 #BDFF14 oklch(0.922 0.233 126.4)
color.lima.500 #B5FF00 oklch(0.917 0.239 127.9) — LIMA DE MARCA
color.lima.600 #9FDB00 oklch(0.819 0.211 126.9)
color.lima.700 #83B800 oklch(0.718 0.186 127.5)
color.lima.800 #618A00 oklch(0.581 0.151 127.6)
color.lima.900 #435F00 oklch(0.446 0.115 126.9)

neutral

color.neutral.50 #F5F5F5 oklch(0.970 0 0) — texto primario (dark) / superficie (light)
color.neutral.100 #E8E8E8 oklch(0.931 0 0)
color.neutral.200 #D4D4D4 oklch(0.870 0 0)
color.neutral.300 #B4B4B4 oklch(0.770 0 0) — texto secundario (dark)
color.neutral.400 #8F8F8F oklch(0.650 0 0)
color.neutral.500 #6B6B6B oklch(0.528 0 0) — texto atenuado
color.neutral.600 #454545 oklch(0.390 0 0)
color.neutral.700 #2E2E2E oklch(0.301 0 0) — borde por defecto
color.neutral.800 #1F1F1F oklch(0.239 0 0) — superficie elevada / borde fuerte
color.neutral.900 #141414 oklch(0.191 0 0) — superficie
color.neutral.950 #0A0A0A oklch(0.145 0 0) — fondo base (carbon)

white

color.white #FFFFFF oklch(1 0 0) — Blanco de marca

carbon

color.carbon #0F0F0F oklch(0.168 0 0) — Carbon Profundo de marca

feedback

color.feedback.success #3BB273 oklch(0.682 0.141 156.0) — esmeralda apagado, distinto del lima
color.feedback.warning #E0A82C oklch(0.764 0.145 82.1) — ámbar/oro
color.feedback.error #E05545 oklch(0.631 0.177 29.5) — rojo controlado (no #FF3B30)
color.feedback.info #6E8AD1 oklch(0.642 0.112 266.9) — azul acero apagado (no #007AFF)

Semánticos — roles de UI

La capa que se consume. Alias → primitivos (tema dark).

bg

color.bg.base #0A0A0A ← {color.neutral.950} fondo de página (carbon)
color.bg.surface #141414 ← {color.neutral.900} tarjetas, paneles
color.bg.elevated #1F1F1F ← {color.neutral.800} menús, popovers, superficie elevada

border

color.border.subtle #1F1F1F ← {color.neutral.800} separadores tenues
color.border.default #2E2E2E ← {color.neutral.700} bordes de componentes
color.border.strong #454545 ← {color.neutral.600} bordes de énfasis / foco no-accent

text

color.text.primary #F5F5F5 ← {color.neutral.50} texto principal sobre fondo oscuro
color.text.secondary #B4B4B4 ← {color.neutral.300} texto secundario
color.text.muted #6B6B6B ← {color.neutral.500} texto atenuado / metadatos
color.text.onAccent #0F0F0F ← {color.carbon} texto sobre superficies lima (carbon, no blanco: el lima es muy claro)

accent

color.accent.default #B5FF00 ← {color.lima.500} acción primaria, énfasis, serie destacada
color.accent.hover #BDFF14 ← {color.lima.400} hover
color.accent.pressed #9FDB00 ← {color.lima.600} pressed / active
color.accent.subtle #435F00 ← {color.lima.900} fondos lima sutiles sobre oscuro

Gráficos — dataviz

Paleta validada (banda L, chroma, daltonismo, contraste).

chart

color.chart.highlight #B5FF00 ← {color.lima.500} Lima de marca. NO es una serie categórica más (L 0.92 fuera de banda). Rol: métrica primaria, serie destacada, KPI, valor activo/seleccionado.
color.chart.categorical.1 #2AA898 oklch(0.662 0.108 182.3) — teal
color.chart.categorical.2 #E0663F oklch(0.653 0.162 38.1) — coral
color.chart.categorical.3 #7E8CE8 oklch(0.669 0.137 275.5) — periwinkle
color.chart.categorical.4 #B8841F oklch(0.649 0.126 78.4) — ámbar
color.chart.categorical.5 #CF5FA0 oklch(0.642 0.159 346.6) — magenta
color.chart.categorical.6 #5AA84A oklch(0.660 0.151 140.3) — verde
color.chart.categorical.7 #4F93D6 oklch(0.648 0.122 249.9) — azul cielo
color.chart.sequential.from #E9FF99 ← {color.lima.100}
color.chart.sequential.to #618A00 ← {color.lima.800}
color.chart.surface #141414 ← {color.neutral.900} superficie de gráfico (fondo de plot) usada para validar contraste
color.chart.grid #1F1F1F ← {color.neutral.800} líneas de rejilla/ejes recesivas