← Todas las superficies

La órbita por superficie · Web

El hero de la página

Lo primero que ve quien llega al sitio: una pregunta, una respuesta que domina, oficio real en la foto y una sola acción. La línea aparece como voz, como lente cuando la receta la pide y como selección sobre la respuesta y el botón. Guía completa: docs/agent-composition/surfaces/web.md.

web
4 aprobadas
Token
surfaces.web

01 · web

Hero web

Decir en una pregunta y una respuesta qué hace Efeonce y llevar a una sola acción.

Formatos · efeonceGraphicLine.surfaces.web.formats
FormatoMedidasCómo se lee
desktop1440 × 900 pxA unos 60 cm, con tiempo para leer: el ojo entra por la respuesta y baja al botón.
phone-360360 × 780 pxA una mano, con el pulgar. Toma vertical nativa; todo en fracciones del viewport.
phone-390390 × 844 pxEl mismo HTML que a 360 y 430: nada de coordenadas fijas.
phone-430430 × 932 pxEl botón cae en la zona del pulgar.

Reglas de la superficie

Recetas aprobadas y pendientes

hero-lens

Aprobadapapel hero · formato desktop
Web · A · lente gigante
Web · A · lente gigante

La foto dentro de una lente grande a la derecha; pregunta y una respuesta de una palabra a la izquierda, bajada y botón.

Token
efeonceGraphicLine.surfaces.web.recipes['hero-lens']
Tablero del canvas
web · WebHeroAlLado
Valores del token
{
  "status": "approved",
  "role": "hero",
  "formats": [
    "desktop"
  ],
  "voice": {
    "mode": "question-answer"
  },
  "lens": {
    "anatomyFrom": "deck-cover",
    "region": "center-end",
    "circle": {
      "cxOfWidth": 0.7291666666666666,
      "cyOfHeight": 0.5555555555555556,
      "rOfHeight": 0.36666666666666664
    },
    "arc": {
      "startDeg": 200,
      "endDeg": 250
    }
  },
  "reserves": {
    "nav": {
      "side": "top",
      "share": 0.09333333333333334
    },
    "voice": {
      "side": "start",
      "share": 0.5,
      "inset": 0.06666666666666667,
      "fromTop": 0.2777777777777778
    },
    "lens": {
      "side": "end",
      "share": 0.5
    },
    "body": {
      "side": "start",
      "fromTop": 0.6222222222222222
    },
    "cta": {
      "side": "start",
      "fromTop": 0.7511111111111111
    }
  },
  "type": {
    "question": {
      "px": 30
    },
    "answer": {
      "px": 200,
      "tracking": "-0.045em"
    },
    "body": {
      "px": 20,
      "lineHeight": 1.55,
      "maxWidthPx": 470
    }
  },
  "selection": {
    "target": "answer",
    "targetKind": "text",
    "variant": "eight-handles",
    "padding": "standard",
    "overlay": "subtle",
    "anchor": "bottom-end",
    "participantKind": "role",
    "label": "Estrategia",
    "collaboratorScale": 1.5
  },
  "rules": [],
  "references": [
    {
      "id": "hero-lens",
      "title": "Web · A · lente gigante",
      "status": "approved",
      "image": "/references/surfaces/web/hero-lens.jpg",
      "canvasPage": "web",
      "canvasBoard": "WebHeroAlLado.dc.html"
    }
  ]
}

hero-bleed

Aprobadapapel hero · formato desktop
Web · B · puesta en escena a sangre
Web · B · puesta en escena a sangre

La foto a sangre reserva la mitad izquierda, oscura y calma, para una respuesta de dos palabras.

Token
efeonceGraphicLine.surfaces.web.recipes['hero-bleed']
Tablero del canvas
web · WebHeroB
Valores del token
{
  "status": "approved",
  "role": "hero",
  "formats": [
    "desktop"
  ],
  "voice": {
    "mode": "question-answer"
  },
  "photo": {
    "placement": "bleed"
  },
  "reserves": {
    "nav": {
      "side": "top",
      "share": 0.09333333333333334
    },
    "voice": {
      "side": "start",
      "inset": 0.06666666666666667,
      "fromTop": 0.3333333333333333
    },
    "cta": {
      "side": "start",
      "fromTop": 0.68
    }
  },
  "type": {
    "question": {
      "px": 30
    },
    "answer": {
      "px": 166,
      "tracking": "-0.045em"
    }
  },
  "selection": {
    "target": "answer",
    "targetKind": "text",
    "variant": "eight-handles",
    "padding": "standard",
    "overlay": "subtle",
    "anchor": "bottom-end",
    "participantKind": "role",
    "label": "Growth",
    "collaboratorScale": 1.5
  },
  "rules": [],
  "references": [
    {
      "id": "hero-bleed",
      "title": "Web · B · puesta en escena a sangre",
      "status": "approved",
      "image": "/references/surfaces/web/hero-bleed.jpg",
      "canvasPage": "web",
      "canvasBoard": "WebHeroB.dc.html"
    }
  ]
}

hero-uniform-tablet

Aprobadapapel hero · formato desktop
Web · C · uniforme + la tableta viene hacia ti
Web · C · uniforme + la tableta viene hacia ti

Toma subjetiva: la persona del equipo acerca la tableta hacia quien mira; la respuesta se parte en dos líneas.

Token
efeonceGraphicLine.surfaces.web.recipes['hero-uniform-tablet']
Tablero del canvas
web · WebHeroSobre
Valores del token
{
  "status": "approved",
  "role": "hero",
  "formats": [
    "desktop"
  ],
  "voice": {
    "mode": "question-answer"
  },
  "photo": {
    "placement": "bleed",
    "lever": "pov"
  },
  "reserves": {
    "nav": {
      "side": "top",
      "share": 0.09333333333333334
    },
    "voice": {
      "side": "start",
      "inset": 0.06111111111111111,
      "fromTop": 0.19555555555555557
    },
    "cta": {
      "side": "start",
      "fromTop": 0.68
    }
  },
  "type": {
    "question": {
      "px": 32
    },
    "answer": {
      "px": 176,
      "lineHeight": 0.9,
      "tracking": "-0.05em"
    }
  },
  "selection": {
    "target": "answer",
    "targetKind": "text",
    "variant": "eight-handles",
    "padding": "standard",
    "overlay": "subtle",
    "anchor": "bottom-end",
    "participantKind": "role",
    "label": "Growth",
    "collaboratorScale": 1.5
  },
  "rules": [],
  "references": [
    {
      "id": "hero-uniform-tablet",
      "title": "Web · C · uniforme + la tableta viene hacia ti",
      "status": "approved",
      "image": "/references/surfaces/web/hero-uniform-tablet.jpg",
      "canvasPage": "web",
      "canvasBoard": "WebHeroSobre.dc.html"
    }
  ]
}

hero-mobile-native

Aprobadapapel hero · formato phone-360 · phone-390 · phone-430
Web · teléfono: foto vertical nativa a 360 · 390 · 430 px
Web · teléfono: foto vertical nativa a 360 · 390 · 430 px
Web · teléfono a 390 px (tamaño real)
Web · teléfono a 390 px (tamaño real)

Toma vertical nativa para el teléfono, en fracciones del viewport; el botón en la zona del pulgar.

Token
efeonceGraphicLine.surfaces.web.recipes['hero-mobile-native']
Tablero del canvas
web · WebMovil

Reglas de la receta

  • phone-mobile-firstNada de escritorio encogido: el teléfono usa toma vertical nativa y todo se mide en fracciones del viewport.
  • cta-thumb-zoneEn teléfono el CTA va en la zona del pulgar.
Valores del token
{
  "status": "approved",
  "role": "hero",
  "formats": [
    "phone-360",
    "phone-390",
    "phone-430"
  ],
  "voice": {
    "mode": "question-answer"
  },
  "photo": {
    "placement": "bleed",
    "native": "9:16",
    "cropCenterXOfFile": 0.595703125
  },
  "reserves": {
    "statusBar": {
      "side": "top",
      "share": 0.056
    },
    "nav": {
      "side": "top",
      "share": 0.065
    },
    "voice": {
      "side": "start",
      "inset": 0.06,
      "fromTop": 0.135
    },
    "cta": {
      "side": "bottom",
      "fromTop": 0.79
    }
  },
  "type": {
    "question": {
      "ofWidth": 0.044
    },
    "answer": {
      "ofWidth": 0.218,
      "lineHeight": 0.9,
      "tracking": "-0.055em",
      "gapBelowQuestionOfWidth": 0.085
    }
  },
  "selection": {
    "target": "answer",
    "targetKind": "text",
    "variant": "eight-handles",
    "padding": "standard",
    "overlay": "subtle",
    "anchor": "bottom-end",
    "participantKind": "role",
    "label": "Growth",
    "collaboratorScaleOfWidth": 0.0017857142857142857
  },
  "rules": [
    "phone-mobile-first",
    "cta-thumb-zone"
  ],
  "references": [
    {
      "id": "hero-mobile-native",
      "title": "Web · teléfono: foto vertical nativa a 360 · 390 · 430 px",
      "status": "approved",
      "image": "/references/surfaces/web/hero-mobile-native.jpg",
      "canvasPage": "web",
      "canvasBoard": "WebMovil.dc.html"
    },
    {
      "id": "hero-mobile-native-390",
      "title": "Web · teléfono a 390 px (tamaño real)",
      "status": "approved",
      "image": "/references/surfaces/web/hero-mobile-native-390.jpg",
      "canvasPage": "web",
      "canvasBoard": "WebMovil.dc.html"
    }
  ]
}

Firma

Cómo firma

La regla general es el logo de Efeonce centrado. Cada superficie la adapta a cómo se lee.

Rechazado

Lo que el operador rechazó

Lo rechazado no es receta: no tiene id ni imagen de referencia. Queda escrito para no repetirlo.

Para agentes

Intent de ejemplo

Pasa por el contrato real al construir esta página: si trae un error, el Lab no se publica. Cópialo, cambia el texto y resuélvelo.

docs/examples/surfaces/web-hero-lens-intent.json

{
  "contract": "efeonce.surface-composition",
  "version": "0.1.1",
  "surface": "web",
  "format": "desktop",
  "role": "hero",
  "recipe": "hero-lens",
  "line": "growth",
  "theme": "dark",
  "voice": {
    "question": "¿Qué hace Efeonce?",
    "answer": [
      "Crecer"
    ]
  },
  "body": "Estrategia, contenido, web y medición conectados para que tu marketing mida lo que vende.",
  "cta": {
    "label": "Conversemos",
    "descriptor": "Revisamos contigo qué mide hoy tu marketing."
  },
  "nav": {
    "links": [
      "Servicios",
      "Casos",
      "Insights",
      "Nosotros"
    ],
    "action": "Conversemos"
  },
  "photo": {
    "register": "puesta-en-escena",
    "subject": "person",
    "plateRef": "ai-generations/2026-09-26_deck-web-motion/plates/P2-web-hero-taller.png",
    "alt": "Una estratega de Efeonce trabaja en el taller frente al tablero del cliente"
  },
  "selection": {
    "target": "answer",
    "label": "Estrategia",
    "participantKind": "role"
  }
}

Resolverlo

pnpm surface:resolve -- --input docs/examples/surfaces/web-hero-lens-intent.json --out /tmp/surface-manifest.json
Manifest resuelto (axis.surface-composition.v1)
{
  "schema": "axis.surface-composition.v1",
  "contract": {
    "id": "efeonce.surface-composition",
    "version": "0.1.2",
    "lifecycle": "candidate"
  },
  "status": "resolved",
  "surface": "web",
  "format": "desktop",
  "role": "hero",
  "recipe": {
    "id": "hero-lens",
    "status": "approved",
    "role": "hero"
  },
  "use": null,
  "layout": null,
  "line": "growth",
  "theme": "dark",
  "palette": {
    "background": "#001a33",
    "accent": "#36c8bf",
    "ink": "#ffffff",
    "soft": "#e2e2e2"
  },
  "canvas": {
    "width": 1440,
    "height": 900,
    "unit": "px",
    "format": "desktop"
  },
  "safeArea": null,
  "reserves": [
    {
      "band": "nav",
      "side": "top",
      "share": 0.0933
    },
    {
      "band": "voice",
      "side": "start",
      "share": 0.5,
      "inset": 0.0667,
      "fromTop": 0.2778
    },
    {
      "band": "body",
      "side": "start",
      "fromTop": 0.6222
    },
    {
      "band": "cta",
      "side": "start",
      "fromTop": 0.7511
    },
    {
      "band": "lens",
      "region": "center-end",
      "circle": {
        "cxOfWidth": 0.7292,
        "cyOfHeight": 0.5556,
        "rOfHeight": 0.3667
      },
      "source": "surfaces.recipe.lens",
      "side": "end",
      "share": 0.5
    }
  ],
  "type": {
    "question": {
      "family": "Poppins",
      "weight": 300,
      "px": 30,
      "lineHeight": null,
      "tracking": null,
      "uppercase": false,
      "color": "#ffffff"
    },
    "answer": {
      "family": "Bricolage Grotesque",
      "weight": 760,
      "px": 200,
      "lineHeight": null,
      "tracking": "-0.045em",
      "uppercase": false,
      "color": "#ffffff"
    },
    "body": {
      "family": "Poppins",
      "weight": 300,
      "px": 20,
      "lineHeight": 1.55,
      "tracking": null,
      "uppercase": false,
      "color": "#ffffff",
      "maxWidthPx": 470
    }
  },
  "dominance": {
    "ratio": 6.67,
    "min": 3,
    "ok": true
  },
  "steps": null,
  "signature": {
    "status": "option",
    "mode": "site-header",
    "photoCarriesLogo": false,
    "orbitDelegate": "surface-owned"
  },
  "timeline": null,
  "rules": [
    {
      "id": "efeonce-dark-ground",
      "text": "El fondo Efeonce (#001a33) se mantiene en toda pieza de línea; la línea sólo aporta el acento (operador, 2026-09-26)."
    },
    {
      "id": "one-sphere-per-piece",
      "text": "Una esfera por pieza: cierra la respuesta; nunca es viñeta ni adorno."
    },
    {
      "id": "one-orbit-per-piece",
      "text": "Una órbita por pieza o lámina: anillo, lente, indicador o medida, uno solo."
    },
    {
      "id": "accent-text-min-size",
      "text": "El acento nunca colorea texto de menos de 24 px: ahí el texto va en blanco o suave sobre oscuro (navy sobre claro); el acento marca con un elemento de 24 px o más o con el ícono."
    },
    {
      "id": "timings-from-tokens",
      "text": "Los tiempos salen de efeonceGraphicLine (surfaces.*.timeline y motion); nunca se escriben en el script."
    },
    {
      "id": "answer-dominates-3x",
      "text": "La respuesta mide al menos 3 veces la pregunta (type.answer.minRatioOverQuestion)."
    },
    {
      "id": "figures-with-source",
      "text": "Cifras sólo con fuente; precios siempre como marcador."
    },
    {
      "id": "isotype-composed",
      "text": "El isotipo en prendas generadas se compone desde @efeoncepro/axis-brand-assets; nunca el que dibuja el modelo."
    },
    {
      "id": "cine-only-nexa-or-proposal",
      "text": "Registro cine sólo con Nexa protagonista o en las recetas de cine del deck (photo.cine.recipes: proposal-cinematic y, desde el 2026-09-27, la portada de brochure, las contraportadas con foto, la sección de cine, la lente de la propuesta sobria desde el 2026-09-28 y, como excepción aprobada con personas del equipo en luz dramática, la sección partida); proporciones reales (cámara a ~2 m, 85 mm)."
    },
    {
      "id": "no-close-gaze-pairs",
      "text": "Nunca dos personas mirándose de cerca: se lee romántico (rechazo del operador, 2026-09-27)."
    },
    {
      "id": "semantic-reserves-only",
      "text": "Sin coordenadas libres: regiones semánticas y fracciones que salen de tokens."
    },
    {
      "id": "web-photo-no-logo",
      "text": "La foto de la web no lleva logo: firma el encabezado del sitio."
    },
    {
      "id": "selection-includes-sphere",
      "text": "La caja de selección mide la respuesta CON su esfera."
    },
    {
      "id": "cta-descriptor-under-cursor",
      "text": "El descriptor del CTA va bajo el cursor, no bajo el botón."
    }
  ],
  "references": [
    {
      "id": "hero-lens",
      "title": "Web · A · lente gigante",
      "status": "approved",
      "image": "/references/surfaces/web/hero-lens.jpg",
      "canvasPage": "web",
      "canvasBoard": "WebHeroAlLado.dc.html"
    }
  ],
  "delegates": {
    "orbit": [
      {
        "scene": "main",
        "contract": "efeonce.graphic-line-orbit",
        "intent": {
          "canvas": {
            "width": 1440,
            "height": 900,
            "line": "growth",
            "surface": "dark",
            "channel": "screen"
          },
          "elements": [
            {
              "kind": "voice",
              "id": "voice",
              "questionId": "question",
              "answerId": "answer",
              "answerText": "Crecer"
            },
            {
              "kind": "lens",
              "id": "lens",
              "photoId": "ai-generations/2026-09-26_deck-web-motion/plates/P2-web-hero-taller.png",
              "alt": "Una estratega de Efeonce trabaja en el taller frente al tablero del cliente",
              "region": "center-end"
            }
          ]
        }
      }
    ],
    "close": null,
    "selection": [
      {
        "contract": "efeonce.collaboration-selection",
        "intent": {
          "targetId": "answer",
          "targetKind": "text",
          "variant": "eight-handles",
          "padding": "standard",
          "overlay": "subtle",
          "cursors": [
            {
              "id": "collaborator",
              "kind": "collaborator",
              "targetId": "answer",
              "anchor": "bottom-end",
              "label": "Estrategia",
              "participantKind": "role"
            }
          ]
        },
        "collaboratorScale": 1.5,
        "targetKind": "text",
        "variant": "eight-handles",
        "padding": "standard",
        "overlay": "subtle"
      },
      {
        "contract": "efeonce.collaboration-selection",
        "intent": {
          "targetId": "cta",
          "targetKind": "group",
          "variant": "open-brackets",
          "padding": "compact",
          "cursors": [
            {
              "id": "local",
              "kind": "local",
              "targetId": "cta",
              "anchor": "end-center"
            }
          ]
        },
        "collaboratorScale": 1.1,
        "targetKind": "group",
        "variant": "open-brackets",
        "padding": "compact"
      }
    ],
    "icons": [],
    "photo": {
      "register": "puesta-en-escena",
      "subject": "person",
      "plateRef": "ai-generations/2026-09-26_deck-web-motion/plates/P2-web-hero-taller.png",
      "alt": "Una estratega de Efeonce trabaja en el taller frente al tablero del cliente",
      "native": null,
      "focus": null,
      "emblem": "compose-from-axis-brand-assets"
    }
  },
  "content": {
    "eyebrow": null,
    "question": "¿Qué hace Efeonce?",
    "answer": [
      "Crecer"
    ],
    "answerSphere": "closes-last-line",
    "body": "Estrategia, contenido, web y medición conectados para que tu marketing mida lo que vende.",
    "proof": null,
    "measure": null,
    "progress": null,
    "cta": {
      "label": "Conversemos",
      "descriptor": "Revisamos contigo qué mide hoy tu marketing."
    },
    "variants": null,
    "levels": null,
    "note": null,
    "panels": null,
    "figures": null,
    "nav": {
      "links": [
        "Servicios",
        "Casos",
        "Insights",
        "Nosotros"
      ],
      "action": "Conversemos"
    },
    "title": null,
    "frames": null,
    "chapter": null,
    "shots": null,
    "subtitles": null,
    "lines": null,
    "slogan": null
  },
  "adapterChecks": [
    "text-inside-its-reserve",
    "text-never-crosses-ring",
    "answer-dominates-3x-painted",
    "accent-text-min-size",
    "signature-where-the-surface-says",
    "subject-outside-text-reserve",
    "last-frame-is-static-fallback",
    "legibility-at-reading-distance"
  ],
  "issues": []
}

Todas las superficies en datos: /references/surfaces.json.

Qué no hacer

Lo que no se hace

Además de las reglas de todas las superficies, en el índice.