SAVE_03 · Propuesta institucional privada
Contar tecnología a quien decide.
Lo que montamos para Aurea, sin enseñar lo que dice: la marca, la puerta con clave, una one-page que se lee sola, diagramas que se mueven con el scroll, la matriz de cien riesgos, el PDF que sale de la misma fuente, el lint que veta frases y un VSL hecho con código. Es un documento reservado, así que todo el texto va ilegible.
- piezas montadas
- 57
- capas
- 8
00 · Estrategia
Por qué se montó así.
Una compañía de tecnología de trazabilidad con una propuesta para una institución pública. La tecnología funcionaba; el problema era contarla a quien decide sin perderlo en la jerga. Construimos el relato, la web privada y el documento con el que se presenta. Es un documento reservado: aquí se enseña cómo está hecho, no lo que dice.
Estado inicial
Interlocutor
Institucional
Producto
Técnico
Relato
Disperso
Acceso
Restringido
Movimientos ejecutados
MOVE_01 · Identidad
Un registro sobrio, a la altura del interlocutor. Nada de lenguaje de startup: un documento que se pueda leer en una mesa institucional sin que nadie levante una ceja.
MOVE_02 · Diagnóstico
Quien decide no compra tecnología: compra que el problema público quede resuelto y que se pueda explicar. La propuesta tenía que empezar por ahí.
MOVE_03 · Implementación
Web privada con acceso por clave, vídeo narrativo y un documento descargable generado desde la misma fuente que la web. Una sola versión de la verdad.
01 · Marca
Hueso, tinta y oro.
Un registro sobrio, a la altura del interlocutor. Una sola familia tipográfica, todo en claro y el oro solo donde importa. La firma es el beam: una línea de oro con un punto de luz que recorre la página.
Montado en esta capa8
- Wordmark «aurea.» con el punto en oro y el tag Trust Technology
- Tokens de color con el contraste medido sobre hueso
- Una sola familia (Polymath) de 400 a 700 con itálicas
- Beam: raíl, relleno, cabeza con halo y reflejo
- Escala tipográfica fluida y retícula de 90 rem
- Curvas de movimiento espejadas entre CSS y JS
- Dirección de arte v1 en documento propio
- Reglas de impresión para que el PDF no aplane nada en gris
aurea.Trust Technology
Paleta
- Hueso#F4F1EAEl fondo. Todo en claro, también el PDF.
- Tinta#0E0F11Texto y botones.
- Oro tinta#7A5A12Texto en oro y estados. 5,6:1 sobre hueso.
- Oro#A67C1FFiletes, bordes, rellenos, el punto del logo.
- Oro brillo#D4AF37Solo decorativo: el beam y sus reflejos.
Tipografía
Una frase, una idea.
Polymath 500
Titulares. Apretados; la segunda idea en itálica y en oro.
Se lee en una mesa sin que nadie levante una ceja.
Polymath 400
Cuerpo. Una sola familia para todo, web y PDF.
Trust Technology
Polymath · versalitas
Etiquetas y numeración, abiertas.
Reglas de uso
- Hueso + tinta, el oro solo como acento
- El beam como firma, una vez por pantalla
- Degradados con alfa en el PDF
- Oro brillo en texto
02 · Acceso
Una puerta con clave.
Nada se sirve sin la cookie, ni la página ni el PDF. La puerta es el último fotograma del vídeo con un campo debajo; al acertar, el «aurea.» viaja hasta el logo de la cabecera en vez de recargar.
Montado en esta capa8
- Middleware de Vercel delante de todos los estáticos, PDF incluido
- Cookie firmada con HMAC-SHA256 (Web Crypto), 30 días
- Cambiar la clave o el secreto caduca todas las sesiones
- Validación sin recargar y redirección solo a rutas internas
- View Transition del wordmark de la puerta a la cabecera
- Sin JS, el formulario hace POST normal
- noindex, nofollow, noarchive
- Pruebas del middleware con peticiones simuladas
La puerta: wordmark, beam y clave
Texto ilegible a propósito: es un documento reservado.
- Navegador01Pide cualquier rutaLa página, el PDF o un vídeo.
- Middleware02Sin cookie válidaRedirige a /acceso con la ruta pedida en next.
- Navegador03Envía la claveSin recargar; sin JS, POST normal.
- Middleware04Firma la cookieHttpOnly, Secure, SameSite=Lax. Solo deja volver a rutas internas.
- Navegador05EntraEl wordmark viaja hasta la cabecera.
03 · One-page
Una página que se lee sola.
La prueba que puso el cliente: se entiende la aportación y la petición sin abrir el anexo técnico. La lectura principal va primero; lo técnico, para la mesa que lo pida, después y con su propio índice.
Montado en esta capa8
- Dieciséis secciones con índice desplegable en la cabecera
- Indicador de sección y barra de progreso mientras se lee
- Lectura principal y «El modelo por dentro» (T1–T7) con índice propio
- Cada beneficio enlaza con su «Cómo funciona →»
- Chips «En el vídeo» que saltan al capítulo del VSL
- Glosario buscable con 42 términos, documentos y fuentes
- Descarga del PDF desde la cabecera, tras la misma clave
- Anclas antiguas conservadas entre versiones
Hero con el VSL
Texto ilegible a propósito.
En móvil
La trenza: cuatro hilos que acaban en un solo expediente
Indicadores en diales
Glosario con buscador y filtros
04 · Escenas
Diagramas que se mueven con el scroll.
Lo que en un documento serían cinco páginas de texto, aquí es una escena fijada que avanza al bajar: el objeto recorre las fases, cambia de manos y va dejando registro. En móvil, la misma información pasa a una línea de tiempo.
Montado en esta capa9
- Escena del recorrido fijada al scroll (React), 7 fases y 20 hitos
- Línea de tiempo equivalente para móvil
- Escena del mapa con zonas y muestreo
- Geomapa de referencia
- Bifurcación animada de desarrollo comunitario
- Mapa de cooperación internacional
- Anillos de expansión a otras cadenas
- Dial de dictamen previo
- Todo en SVG, con alternativa sin movimiento
El recorrido: siete fases en una sola escena que avanza al bajar
La bifurcación de la comunidad
05 · Riesgos
Cien riesgos, cien controles.
La objeción de una mesa técnica es «¿y si…?». La respuesta es una matriz: cada riesgo con su control propuesto y la evidencia que lo revisa. En la web corre en marquesina; en el PDF, como anexo paginado.
Montado en esta capa5
- Matriz de 100 riesgos en 10 categorías, extraída por script del documento fuente
- Marquesina de riesgos en la web
- Anexo paginado de riesgos en el PDF
- Diagrama de actores interactivo: se pulsa uno y se ve qué hace
- Matriz de acceso a la información por función
Matriz de riesgos y controles
Actores: al pulsar, cada uno enseña su función
06 · PDF
El PDF sale de la misma fuente.
Web y documento no pueden decir cosas distintas. El PDF no se maqueta aparte: es otra plantilla de Astro sobre el mismo contenido, impresa con Chromium. Si cambia una frase, cambia en los dos.
Montado en esta capa8
- Plantilla A4 apaisada sobre el mismo contenido que la web
- Impresión con Chromium que espera a fuentes e imágenes
- Aviso de cualquier elemento que se salga de su página
- Numeración de páginas calculada, nunca a mano
- Anexos de riesgos, decálogo y aviso legal
- Reglas de impresión: sin alfa ni sombras
- Falla en CI si la tipografía no carga
- PDF versionado y servido tras la misma clave
07 · Claims
Frases que no pueden salir.
En una propuesta institucional una promesa de más es un problema. Las frases vetadas viven en un script que se pasa antes de cada build: si aparece una, no se publica. Y cada versión deja escrito qué cambió y por qué.
Montado en esta capa5
- Lint de claims con 48 reglas que bloquea el build
- Excepciones por frase, no por línea
- Reglas nuevas cuando el cliente retira expresiones del documento
- Un documento de cambios por versión
- Versiones anteriores publicadas en su propia ruta
Vetado
Promesas de garantía
Vetado
Automatización «sin humanos»
Vetado
Protección «absoluta»
Vetado
Inmediatez que no existe
Versiones
v1
One-page, PDF y puerta
La primera versión completa, con el VSL.
v2
Rediseño visual
Nueva dirección de arte y frases retiradas del documento definitivo del cliente.
v3
Escenas al scroll
El recorrido pasa de texto a escena. Cuatro revisiones (3.1–3.4).
v4
Beneficios primero
La lectura principal habla de lo que gana cada uno; lo técnico pasa a T1–T7.
v5
En curso
Lo mejor de cada versión en una.
08 · VSL
Un vídeo hecho con código.
El VSL no se edita en un timeline: se programa con las mismas piezas que la web. Cuando cambia el guion, se cambia el dato y se vuelve a renderizar. Los capítulos del vídeo son los de la página.
Montado en esta capa6
- VSL en Remotion: 19 escenas en 7 capítulos
- Mismo beam, rótulos y tipografía que la web
- Capítulos sincronizados con los chips de la página
- Tres juegos de rótulos alternativos
- Subtítulos en VTT
- Guion reescrito por versión, con su locución
Tres fragmentos del VSL, desenfocados