OQOOQO · Permanencia Biblioteca

Biblioteca · kit

Propuestas · v2

Ajuste: panel blanco + Resalte como foco del dato

Permanencia — Design system de propuestas · v2

Ajuste sobre la v1. No es otra marca.
Todo lo de design.md aplica: Origen, Roble en la acción, ink puntual, tipografía dual, voz, layouts.
Este archivo solo documenta dónde entra el blanco y cómo el Resalte señala dentro de bloques de información.
Si hay conflicto, gana ../design.md en tokens y la v1 en geometría de propuesta — salvo lo explícito aquí.

Tokens: app/assets/css/tokens.css · Foto: ../estilo-fotografico.md · Voz: ../AGENTS.md.


1. Qué es (y qué no)

La v1 es Permanencia en papel: cream, ink cálido, Roble en el CTA. La v2 no la sustituye. Suma módulos de información más limpios — diagramas, esquemas, tablas densas, gráficos — para que se lean como dato, no como atmósfera.

Sigue igual que v1Ajuste v2
Canvas de la propuestaOrigen #FAF6EESin cambio
Portada / divisor / cierreInk o foto + velo BaseSin cambio
CTA, kicker, links de relatoRoble #B07A3E + blanco en el botónSin cambio
TipografíaStory / Producto / MonoSin cambio
Copy y estructuraContexto → diagnóstico → enfoque → evidencia → next stepSin cambio
LogoNegro sobre cream · blanco sobre inkSin cambio
Bloque de información (diagrama, esquema, chart, matriz)Veta / Roble-08 / tabla sobre OrigenPanel #fff + Resalte como foco del dato

No mezclar «v2 como sistema blanco-azul» con Permanencia. Si una página no trae diagrama ni dato denso, se diseña solo con v1.


2. Lo que no se toca

Estas reglas de la v1 no se reinterpretan:

  1. Roble en acción: CTA pill, kicker de relato, énfasis de inversión, links de cuerpo. ~16% de presencia de marca, no un chip.
  2. Origen es el papel. La propuesta no se vuelve un PDF blanco.
  3. Ink para portada, un divisor si hace falta, un cierre. Nunca dos ink seguidas.
  4. Logo monocromo. Nunca teñir de Roble ni de Resalte.
  5. Fraunces + Manrope en el relato. Formula + Rader en fichas, tablas, CTA. Supply Mono en meta.
  6. Un CTA dominante por página. Texto #fff sobre Roble. Hover #9A6B38.
  7. Cero hex inventados. Cero azules fuera de Resalte #5C93C9 y sus gamas de kit.

3. El ajuste

Dos tokens ganan un rol extra, no un rol nuevo de marca:

TokenHexEn v1En v2 (solo módulos de info)
Blanco#fffTexto del CTASuperficie del recuadro de diagrama / chart / matriz
Resalte#5C93C9Un foco tech puntualFoco del dato dentro de ese recuadro (nodo, serie, columna, hito)
Resalte-12#EEF4FAWash techWash / zebra dentro del panel blanco
Resalte-24#DDECF7Panel techCelda o nodo de apoyo
Resalte-shade-15#4E7FB0Hover resalteHover o link dentro del diagrama si el texto es small

El blanco no es página. Es el papel del gráfico, anclado en una página Origen (o, si el bloque va a sangre del wrap, un recuadro con borde ink-14 y radio 16 px / 8–12 pt).

El Resalte no es el acento de la propuesta. Es el dedo que señala dentro del dato. Fuera del módulo, el acento sigue siendo Roble.


4. Cuándo usar el panel blanco

Sí — un recuadro #fff:

  • Diagrama de flujo, arquitectura, mapa de servicio
  • Organigrama o esquema de equipo / fases
  • Gráfico (un chart por página)
  • Matriz o tabla densa (alcance largo, comparativa, cronograma tipo Gantt corto)
  • UI o captura que deba leerse como pantalla (modo Digital)

No — se queda en Origen / Veta de la v1:

  • Portada, divisor, cierre
  • Relato (contexto, diagnóstico, enfoque, cita)
  • Inversión (el total y el CTA son Roble; el desglose puede ser tabla v1)
  • Lista de 3–5 puntos
  • Foto a sangre

Una página puede ser Origen + un panel blanco. No una página blanca con un párrafo cream.

Máximo un panel de información focal por página. Si hay dos diagramas, son dos páginas.


5. Cómo se ve el módulo

5.1 Caja

  • Fondo #fff.
  • Borde ink-14 o inset 0 0 0 1px. Sin sombra, sin glow.
  • Radio 16 px digital / 8–12 pt print.
  • Padding interno: 16–24 px (A4) · 24–40 px (16:9).
  • Sobre Origen o, si hace falta calor, sobre una banda Veta — el blanco dentro, no al revés.

5.2 Título del módulo

  • Kicker del documento: Supply Mono Roble (sigue v1).
  • Título de la página: Fraunces o Formula en Base.
  • Label del diagrama (si necesita nombre): Supply Mono Resalte o ink-68 — el azul etiqueta el dato, no la sección.

5.3 Resalte dentro del diagrama

Un solo foco visible a la vez:

ElementoTratamiento
Nodo / etapa / columna que importaRegla o relleno Resalte-12 + borde o tick Resalte
Serie del chart que importaResalte; el resto Base / ink-68 / Veta
Hito «ahora» en un timeline de procesoPunto Resalte
Flecha o conector principalResalte; secundarios ink-14
Texto de apoyo en el gráficoBase. Resalte-shade-15 solo si es label small con underline

No: pintar el diagrama entero de azul. No: CTA, kicker de página o logo en Resalte. No: sustituir Roble en la inversión o el cierre.

5.4 Tablas densas (excepción de zebra)

En v1 la zebra es Origen / Veta-35.
En v2, si la tabla es el módulo de información (vive dentro del panel blanco):

  • Filas: #fff / Resalte-12
  • Header: Base + texto Origen, o Roble-08 + texto Base (el header puede seguir cálido)
  • Fila o celda destacada: Resalte-12 / Resalte-24
  • Totales y CTA de la página: Roble (regla 2 pt o botón), no Resalte

Así el dato se lee frío y el cierre de la página sigue siendo Permanencia.

5.5 Gráficos

Un chart. Titular = la conclusión (fuera del panel, en Base / Fraunces).

Series: Base · Roble · Veta · ink-68. La serie que hay que ver = Resalte.
Si ninguna serie es «la que importa», no uses Resalte: queda la dieta v1.

Prohibido arcoíris, 3D, glow, azules inventados.


6. Roble no se diluye

Una pieza v2 tiene que seguir oliendo a Roble. Comprobación rápida:

  • Hay un CTA Roble + #fff en el cierre (y en inversión, si aplica).
  • Los kickers de relato son Roble, no Resalte.
  • El total de inversión es Base + acento Roble.
  • El Resalte aparece junto a un diagrama o tabla, no en la portada «para que se vea moderno».
  • Si quitas todos los paneles blancos, la propuesta sigue siendo v1 válida.

Si el Resalte se siente dueño de la pieza, sobra azul.


7. Ritmo de páginas (igual que v1 + módulos)

La secuencia canónica de la v1 no cambia. Solo se marca dónde puede ir el panel blanco:

#PáginaSuperficiePanel #fff + Resalte
01PortadaInk / fotoNo
02ContextoOrigenNo (salvo un esquema de «hoy»)
03DiagnósticoOrigenSí, si hay mapa de tensiones
04EnfoqueOrigen o VetaSí, si hay diagrama de enfoque
05AlcanceOrigenSí, si la tabla es densa
06InversiónOrigen · RobleNo (desglose v1)
07CaminoOrigenSí, si el timeline es esquema
08EvidenciaVeta o OrigenSí, un chart
09CierreInk o paper + CTA RobleNo

8. Do / Don't

DoDon't
Heredar v1 y sumar un recuadro blancoRediseñar la propuesta a canvas #fff
Resalte en el nodo / serie que importaCTA, kicker de página o portada en Resalte
Roble en botón, kicker, inversiónRetirar Roble «porque ahora el acento es azul»
Un panel de info por páginaPágina blanca llena de diagramas
Header de tabla cálido (Base o Roble-08)Header Resalte sólido
Foto Materia + máquinaStock azul / purple AI / neon
Hex del kitOtro azul, Inter, Poppins

9. Checklist

Además del checklist de la v1 §13:

  • La pieza se sostiene como v1 si se apagan los paneles blancos
  • Canvas de página = Origen (o ink en portada/cierre), no #fff
  • #fff solo dentro de módulos de información (diagrama, chart, matriz, captura)
  • Resalte solo como foco dentro de esos módulos
  • CTA y kicker de relato = Roble + blanco en el botón
  • Un solo foco Resalte visible por página
  • Cero azules fuera de #5C93C9 y gamas del kit
  • Logo sin teñir

10. Plataformas

Igual que v1 §14. En el tema de Slides/Canva:

  • Colores de marca del tema: Origen, Base, Roble, Veta, Piedra.
  • Resalte y #fff como colores de forma (diagramas), no como fondo de diapositiva ni estilo de título.
  • No crear un «Brand kit v2» que saque a Roble del tema.

11. Gobernanza

DocumentoManda sobre
../design.mdTokens, roles tipográficos, estrategia
design.mdPropuesta completa (geometría, CTA, ritmo)
Este archivoMódulos de información: panel blanco + Resalte como foco del dato
../AGENTS.mdVoz y claims
../estilo-fotografico.mdFotos

v2 no cambia oqo.cl ni el CTA Roble. Es un ajuste de lectura para que el dato respire, sin soltar la base.

No inventar servicios, clientes, métricas, años ni headcount. Español latinoamericano neutro.