Tokens
Iconografía
Phosphor Icons (MIT) como librería del sistema [SG-11b]. Retícula 24×24, trazo 2 px, uniones redondeadas. Los iconos se renderizan inline (zero-JS) y heredan color con currentColor. Tokens en tokens/icon.tokens.json.
Pesos
Cuatro roles. Regular es el uso por defecto.
Regular Estilo principal de interfaz (por defecto).
Bold Énfasis y acciones clave (estados activos).
Fill Selección, alertas o acciones críticas (uso controlado).
Duotone Piezas editoriales y comunicaciones de marca.
Tamaños
Escala en px. 24 = estándar de UI.
icon-size-20 20px UI compacto (tablas densas, chips)
icon-size-24 24px UI estándar (por defecto)
icon-size-32 32px UI grande / destacado
icon-size-48 48px editorial
icon-size-64 64px editorial / hero
Estados
Color por estado. La alerta usa el error del DS, no el rojo descartado.
Set por categoría
Selección representativa de las familias del styleguide [SG-06/11].
Análisis y datos
chart-line
chart-bar
chart-pie-slice
presentation-chart
pulse
table
Deporte y partido
soccer-ball
trophy
flag-checkered
timer
medal
ranking
Rendimiento físico
heartbeat
gauge
lightning
ruler
fire
person-simple-run
Tecnología y sistema
gear
database
cpu
cloud
wifi-high
device-mobile
Navegación y acciones
house
list
magnifying-glass
funnel
arrow-right
sliders-horizontal
Buenas prácticas
Cómo se usan los iconos en ONSIDE.
- Regular por defecto; Bold para lo activo; Fill para lo crítico; Duotone solo en editorial.
- Usar la escala de tamaños (20 / 24 / 32 / 48 / 64); 24 px es el estándar de UI.
- Color por currentColor: el icono hereda el color del texto o del estado.
- Nombres consistentes de Phosphor en el código (kebab-case).
- No modificar proporciones ni el grosor de trazo.
- No aplicar sombras, degradados ni efectos.
- No mezclar pesos distintos dentro de un mismo grupo.
- No usar el rojo #FF3B30 del styleguide para alerta: usar el token error del DS.