AXISDesign SystemReference Lab
← Todos los patterns

Iconografía de La órbita

Dos voces, una esfera

El Trazo nombra lo que se mide; Plastilina, lo que se crea. Comparten el fondo, la tinta y la esfera, que no es parte del dibujo sino un estado: aparece cuando el ícono responde. Esta página es la guía para el equipo y la referencia para agentes; la misma fuente, en datos, está en /references/iconography.json. La forma madre vive en La órbita.

Trazo
44 glifos
Plastilina
49 glifos
Volumen
49 PNG
Estado
Canónica · 26-09
Paquete
axis-graphic-line 0.9.0

01

El porqué

Los íconos no decoran: cada decisión de estilo sale de cómo es Efeonce. Así se traduce la personalidad de marca en forma, y qué evita cada decisión.

Criterio de diseño a partir de la personalidad de marca de Efeonce (sus rasgos y creencias). No es un dato medido: que el estilo se reconozca como Efeonce se comprueba con una prueba de reconocimiento sin logo.

02

Las dos voces

La voz la decide la línea de servicio de la pieza. Nunca se mezclan en un mismo grupo: si conviven en una pieza, Plastilina manda en grande y el Trazo apoya en chico.

Voz y acento por línea de servicio (fondo #001a33 en todas, D21)
LíneaVozAcento sobre oscuroAcento sobre papel
GrowthTrazo#36c8bf#0e8c82
BrandPlastilina#ff6500#bb1954
EngineTrazo#0375db#0375db
VoicePor decidir#f83902#f83902
Revenue · HubSpotTrazo#e86bd0#8e1b82
Revenue · SalesforceTrazo#2fb8ff#00739e

04

Receta del Trazo

Trazo limpio en reposo; la esfera aparece cuando responde, de dos maneras: reemplaza una pieza del glifo (la punta de la flecha de Revenue) o completa el gesto donde la acción se resuelve (el foco de la lupa).

Revenue en respuesta sobre la grilla 24 (margen 2 en azul, guías círculo 10, cuadrado 18 y rectángulo 20 × 16). El círculo punteado marca la esfera con su aire de 0,5.
Construcción · efeonceGraphicLine.icons.stroke
Grilla24 × 24, margen 2 (el dibujo vive en 20 × 20)
Guíascírculo de radio 10, cuadrado de 18, rectángulo de 20 × 16
Trazo1,5; 1,75 a 20 px o menos; nunca más de 4 px en pantalla sobre 64 px
Remates y unionesredondos
Esferarellena, radio 1,75, en el acento de la línea; 0,5 de aire contra todo trazo
Respuestadesde 20 px; más chico, sólo reposo
Tinta#ffffff sobre #001a33; #023c70 sobre papel #f7f8f6

05

Receta de Plastilina

Masa blanda con actitud: inclinada, con calados redondos, y la esfera es lo que el objeto hace: la luz del bombillo, la gota del cuentagotas, la punta del pincel. El protagonista suma un gesto en tinta.

El bombillo en respuesta con gesto, sobre la grilla 48 y el círculo de radio 22,5 donde cabe la silueta. La esfera va en la luz, con su anillo calado.
Construcción · efeonceGraphicLine.icons.plastilina
Grilla48 × 48; la silueta cabe en un círculo de radio 22,5 centrado
Tamaño ópticopor área: ~560 u² sin calados; k = min(√(560 / área), 22,5 / radio)
Siluetamasa plana y gorda, contorno con mano; nunca una esquina viva
Giro y caladosinclinada, tomada en uso; recortes redondos contra el fondo
Esferaradio 3,4 donde está la acción, con anillo calado de 4,5 (sólo en respuesta)
Gesto2 a 5 trazos de 2,8 en tinta, sólo en el protagonista
Pantallasbarras redondeadas de 2,6 en tinta
Tamaño mínimo32 px; más chico, Trazo
La firma de Plastilina: el protagonista dentro de su órbita sesgada. El objeto va en reposo; la esfera de la pieza es la de la órbita. La voz (pregunta y respuesta) va debajo, fuera de la órbita.
Órbita sesgada · efeonceGraphicLine.icons.skewedOrbit
Formaelipse inclinada -16°, alta un tercio de su ancho
Profundidadpasa detrás del objeto arriba y delante abajo, con un calado de 12 px del color del fondo (a 1080 de ancho)
Anilloblanco al 22 %, 2,4 px
Arco y esferaarco de 3,8 px en el acento de 118° a 52°; esfera de radio 8,3, fuera del objeto
Usouna por pieza, sólo alrededor del protagonista; el objeto va en reposo; nunca cruza el texto ni mide
Mínimoobjeto de 320 px o más a 1080 de ancho

06

Plastilina en volumen

La tercera capa: la misma forma, en arcilla mate. Complementa al plano, no lo reemplaza; va sólo donde el objeto es protagonista. Cada PNG sale del vector aprobado y trae alfa, con los calados abiertos.

Plastilina en volumen · efeonceGraphicLine.icons.volume
Qué escada glifo de Plastilina en arcilla mate, inflada, generado desde su vector aprobado
EntregaPNG con alfa de 1024 px en @efeoncepro/axis-brand-assets (volume/<glifo>.png), en respuesta, con el acento de Brand y el gesto donde existe
Tamaño mínimo160 px; más chico, el plano
Por pieza1, como protagonista
Generacióngpt-image-2.5-sunburst · high · edición desde la referencia a 760 px sobre #001a33
Recortepor color contra el fondo: alfa de 28 a 95 de distancia RGB; nunca con IA
QAsilueta ≥ 0,75 y los mismos calados y piezas que el plano; un aviso se revisa al 100 %
Dónde va y dónde no
SíMomentos protagonistas: portada, key visual, pieza social con un solo objeto, escenario, merch y el objeto en escena.
SíSobre cualquier fondo: el PNG trae alfa, con los calados abiertos.
NoListas, tablas, navegación, contenido de deck, dashboards ni UI: ahí van el plano o el Trazo.
NoMezclado con Plastilina plana o con el Trazo en el mismo grupo; una pieza lleva un solo volumen.
NoMás chico que el mínimo: bajo ese tamaño se lee mejor el plano.
NoUna forma nueva generada directo en 3D: primero entra al set plano; el volumen se genera desde ese vector.

Un glifo en volumen

  1. Referencia desde el vector. pnpm icons:volume -- refs pinta el ícono plano aprobado en respuesta (con su gesto si lo tiene) a 760 px sobre el fondo navy, centrado en 1024.
  2. Genera con el prompt canónico. Edición de imagen con la referencia y docs/agent-composition/iconography/volume-prompt.txt, sin cambiarlo: el modelo pone volumen y arcilla mate, nunca otra forma. Hoy, GPT Image 2.5 Sunburst en high, 1024 × 1024 (la familia 2.5 no acepta input_fidelity: la fidelidad la da el prompt). Si un detalle falla, agrega UNA línea que lo nombre (el laptop necesitó «la pantalla es sólida, sus ranuras atraviesan»).
  3. Recorta por color. pnpm icons:volume -- key saca el alfa contra el fondo liso. Nunca un recorte con IA: rellena los calados y deja semitransparente una esfera suelta.
  4. Revisa contra el plano. pnpm icons:volume -- check mide la silueta, los calados y las piezas. Un aviso no es un rechazo: se mira al 100 %. Se rechaza si la forma se reinventó, si un calado se volvió relieve o si figura y fondo se invirtieron.
  5. Publica sellado. pnpm icons:volume -- publish comprime, copia a @efeoncepro/axis-brand-assets (volume/<glifo>.png) y al Lab, y sella el hash. La prueba del paquete falla si un PNG cambia sin sellar.
pnpm icons:volume -- refs --out ./ref
# generación con ./ref/<glifo>.png y el prompt canónico → ./crudo/<glifo>.png
pnpm icons:volume -- key --in ./crudo --out ./alfa
pnpm icons:volume -- check --refs ./ref --in ./alfa
pnpm icons:volume -- publish --in ./alfa

El prompt canónico no se reescribe: si un detalle falla, se agrega una línea que lo nombre.

Avisos revisados del set

Cada aviso del QA se miró al 100 % contra el plano. «Piezas 2 → 1» —la esfera apoyada en la masa— se acepta siempre; los demás, con su razón:

  • laptop. Tercera pasada: pantalla sólida con ranuras pasantes. Queda algo menos inclinado que el plano (silueta 0,44).
  • escritorio. La perspectiva y el grosor bajan la silueta (0,64); la forma es la misma.
  • telefono. Igual que escritorio (0,73).
  • pluma. La barra superior se une a la plumilla.
  • tijeras. Las hojas se unen en el pivote, como en unas tijeras reales.
  • megafono. El anillo de la esfera queda como un hueco dentro de la campana.
  • audifonos. Los auriculares se unen al arco.
  • lampara. Oficio (D25). Segunda pasada: la primera dejó un anillo inclinado alrededor de la esfera, como un planeta; se agregó una línea que lo nombra.
  • trofeo. Oficio (D25). La esfera se apoya en la copa: su anillo calado desaparece y queda una pieza menos.
  • lapiz. Oficio (D25). La virola suma una ranura; la forma es la misma.
  • varita. Oficio (D25). El anillo de la esfera queda como hueco en la estrella.
  • chispa. IA y social (D26). El destello chico con su esfera cambia la proporción (silueta 0,60); se lee como chispa.
  • gorra. IA y social (D26). Las costuras del plano se funden en el volumen.
  • aro-de-luz. IA y social (D26). El aro y el soporte se juntan; el teléfono queda al centro.
  • mano. Desliza (D29). La esfera se funde con la punta del dedo: piezas 3 → 2; la flecha queda entera.

07

Cuándo responde

Responde el que importa, y sólo si nadie más está respondiendo. Vale para las dos voces.

Estado del ícono según la situación
SituaciónEstadoPor qué
El ícono es la pieza (protagonista, sin otra esfera)RespuestaSu esfera es la única de la pieza.
Una fila o grupo de íconosResponde uno soloEl activo: la sección donde vamos, el servicio que se vende.
La pieza ya tiene esfera (órbita o voz con esfera)ReposoEl canon ya cierra con esa esfera; el ícono no suma otra.
Dentro de una órbita (firma de equipo, pieza con órbita sesgada)ReposoLa órbita responde por él.
Listas, tablas, contacto, navegación, satélitesReposoLa esfera nunca es viñeta.
Trazo a menos de 20 pxReposoLa esfera no se lee. Plastilina no baja de 32 px: usa el Trazo.

08

Un ícono nuevo

Un glifo que no está en el catálogo no se dibuja dentro de una pieza: primero entra al set. El método es el mismo para personas y agentes; los comandos corren en el repositorio de AXIS.

Trazo

  1. Dibuja en la grilla 24. Margen 2 medido en el eje del trazo (el borde puede llegar a 1,25), trazo 1,5, remates y uniones redondos. El cuerpo llena su guía: círculo de radio 10 (redondos), cuadrado de 18 (compactos) o rectángulo de 20 × 16 (apaisados); los apéndices pueden salir de la guía, nunca del margen. Un punto se dibuja como M x yh.01.
  2. Prevé la esfera desde el dibujo. Elige el modo. Reemplaza: una pieza del glifo se vuelve la esfera (la punta de la flecha, un punto). Completa: la esfera aparece donde la acción se resuelve (el foco de la lupa). Déjale su lugar.
  3. Escribe el glifo en JSON. Claves key, label, use («Línea · temas»), mode, rest, response y dot (centro de la esfera). En reemplaza, response es rest sin la pieza que ocupa la esfera; en completa, es igual. Ejemplo: docs/examples/iconography/stroke-glyph-keynote.json.
  4. Verifica. pnpm icons:check falla si el aire de la esfera es menor que 0,5, si algo sale del margen, si faltan label o use o si mode no coincide con los trazos. Deja hojas de control a 160, 64, 32, 24 y 20 px sobre #001a33 y papel.
  5. Pide el alta. Con las hojas de control, el operador aprueba. Recién entonces el glifo se agrega a STROKE_GLYPHS (icons-stroke-data.ts) con su prueba, y se usa en piezas.
pnpm icons:check -- --glyph docs/examples/iconography/stroke-glyph-keynote.json --out ./control

Plastilina

  1. Genera la forma, nunca el color. Con la referencia de estilo y el prompt modelo de AXIS: rejilla 3 × 3, sólo fondo liso y blanco, sin naranja ni puntos. Para un solo objeto, pide nueve variantes. Hoy, gpt-image-2 a 1024 × 1024 con la referencia como imagen.
  2. Vectoriza y normaliza. pnpm icons:vectorize separa los objetos por componentes conexos (nunca por celda fija), los traza con potrace, los normaliza por área (k = min(√(560 / área), 22,5 / radio)) y lista sus calados con la esfera propuesta en el más grande. Elige la variante inclinada, gorda y dentro del peso del set (394–559 u²).
  3. Pon la esfera donde está la acción. La gota, la luz, la punta, la boca de la guitarra (usa el centro del calado que da vectorize). Radio 3,4 con su anillo calado de 4,5: si el calado es más chico, el anillo la separa. Completa label y use.
  4. Dibuja el gesto si será protagonista. 2 a 5 trazos rectos en TINTA (2,8), de 2,4 a 5,6 de largo, desde la acción hacia afuera, con al menos 0,5 de aire contra la silueta y dentro de la grilla 48.
  5. Verifica y pide el alta. pnpm icons:check mide el peso contra el set, los calados y el gesto, y deja hojas a 160, 64 y 32 px. A ojo: que se lea como familia. Con la aprobación del operador, entra a PLASTILINA_GLYPHS.
pnpm icons:vectorize -- --sheet hoja.png --names guitarra,bateria,piano,… --out ./vector
pnpm icons:check -- --glyph ./vector/guitarra.json --out ./control
Hoja de referencia de estilo de Plastilina: nueve objetos blancos inflados sobre azul oscuro.
La referencia de estilo que va con cada generación (descargar) y el prompt modelo: sólo se cambia la lista de objetos. La referencia conserva los puntos naranjas de la exploración; el prompt pide no copiarlos, porque la esfera se compone después.

09

Lo que no se hace

Cada error trae lo que se hace en su lugar.

10

Para agentes

El agente llama al paquete; nunca transcribe HEX ni px ni copia el SVG de esta página a mano. Valores en efeonceGraphicLine.icons (@efeoncepro/axis-tokens); geometría y reglas en @efeoncepro/axis-graphic-line/icons; guía completa en docs/agent-composition/iconography.md.

Instrucción para el agente

Vas a usar la iconografía de La órbita de Efeonce (marca propia; nunca trabajo de clientes ni UI de producto).
Fuente de verdad: AXIS. Valores en efeonceGraphicLine.icons (@efeoncepro/axis-tokens); geometría y reglas en
@efeoncepro/axis-graphic-line/icons; guía en docs/agent-composition/iconography.md y en /references/iconography/.

1. Elige la voz por la línea de servicio de la pieza: iconVoiceForLine(line). Trazo = lo que se mide; Plastilina = lo que se crea.
2. Busca el glifo en ICON_CATALOG. Si no existe, NO lo dibujes dentro de la pieza: sigue el método de alta de la guía.
3. Pinta con resolveIcon({ glyph, state, size, line, surface, gesture, label }). Nunca transcribas HEX ni px.
4. Reposo por defecto. Responde uno solo, el que importa, y sólo si la pieza no tiene otra esfera.
5. Antes de entregar, pasa el grupo por auditIconGroup(items, { pieceHasSphere }) y resuelve cada issue.
6. Plastilina protagonista en una pieza: skewedOrbitHeroSvg (el objeto en reposo, la órbita pone la esfera).
7. Un objeto protagonista en volumen: usa el PNG de @efeoncepro/axis-brand-assets (volumeIconUrl(glyph)); nunca lo generes de nuevo ni lo uses en listas o UI.
8. Reporta los avisos (warnings) de resolveIcon y lo que quedó pendiente.
Pintar un ícono
import { resolveIcon } from '@efeoncepro/axis-graphic-line/icons'

const { svg, state, warnings } = resolveIcon({
  glyph: 'medicion',      // ICON_CATALOG
  state: 'response',      // 'rest' por defecto
  size: 48,               // px
  line: 'growth',         // la línea de la PIEZA pone el acento
  surface: 'dark',        // #001a33 o papel
  label: 'Medición'       // sin label, decorativo
})
Revisar un grupo antes de entregar
import { auditIconGroup } from '@efeoncepro/axis-graphic-line/icons'

const { ok, issues } = auditIconGroup(
  [{ glyph: 'medicion', state: 'response' }, { glyph: 'web' }, { glyph: 'informe' }],
  { pieceHasSphere: false }
)
// issues: mixed-voices · more-than-one-response · response-with-piece-sphere · more-than-one-gesture
Plastilina protagonista con su órbita sesgada
import { skewedOrbitHeroSvg } from '@efeoncepro/axis-graphic-line/icons'

const svg = skewedOrbitHeroSvg({
  glyph: 'bombillo', line: 'brand',
  width: 1080, height: 1350,
  object: { x: 220, y: 150, size: 640 },
  gesture: true
})
Plastilina en volumen (PNG con alfa)
import { volumeIconUrl, AXIS_VOLUME_ICONS } from '@efeoncepro/axis-brand-assets'

const url = volumeIconUrl('bombillo')   // file URL del PNG dentro del paquete
// AXIS_VOLUME_ICONS: glyph, label, gesture, size, png, sha256
// Sólo como protagonista; nunca en listas, deck ni UI.
Exportar el set como archivos
pnpm icons:export -- --out ./iconos --line brand --surface dark --size 96
# 60 SVG (reposo y respuesta) + manifest.json
Todo en datos /references/iconography.json

11

Pendiente de decisión

Lo que el operador todavía no decide y el valor que rige mientras tanto.

Decisiones abiertas de la iconografía
TemaMientras tanto
Voz de la línea Voice (Reach)Sin voz fija: elegir con criterio y declararlo en la pieza.
Aire de la esfera del Trazo a 20 pxA 20 px el trazo sube a 1,75 y el aire baja a ~0,4. Rige «respuesta desde 20 px»; se evalúa subir a 24 px.
Opacidad del anillo de la órbita sesgada22 %. En teléfono casi desaparece; se prueba 30 %.
En piezas con las dos voces, ¿la esfera en la voz o en el ícono?En la voz (canon de la línea gráfica); el ícono descansa.
Automatización en respuesta se puede leer como un indicador de cargaSe mantiene el glifo aprobado; revisar si el círculo abierto con la esfera choca con «la órbita nunca se llena como un loader».