Permanencia — Design system de propuestas

Este documento traduce Permanencia a propuestas comerciales.
No inventa paleta, tipografías ni voz. Si hay conflicto, gana ../design.md.
Tokens: ../css/permanencia.css · Foto: ../estilo-fotografico.md · Voz: ../AGENTS.md (mandato Comercial).

Sirve para PDF A4, deck 16:9 y HTML/PDF generado. Quien arme o genere una propuesta — comercial, diseño o agente — usa este archivo, no el design.md del sitio.

Ajuste v2 (hereda esta v1; panel blanco + Resalte solo en diagramas/datos): design-v2.md.

Cómo usar

Una propuesta nueva = Permanencia. Deals en curso con plantilla coral se dejan hasta migrar; no mezclar ambos sistemas en el mismo documento.

1. Rol

La propuesta es el objeto que el cliente guarda, reenvía e imprime. Tiene que sentirse OQO en cinco segundos: cream, ink cálido, Roble en la acción, tipografía dual, una idea por página.

No es el homepage. El home puede invertir a ~65–70% oscuro. La propuesta se lee — el canvas es Origen. El ink se reserva para portada, divisores y un cierre. Nunca dos páginas ink seguidas.

2. Principios

1. Una idea por página / diapositiva. Si el titular no se entiende en 5 segundos, sobra contenido.
2. Evidencia o silencio. Métrica, caso o placeholder [CASO] / [MÉTRICA]. Nunca inventar.
3. Roble en acción, no en chip. CTA, énfasis de inversión, un acento por vista. No teñir el logo.
4. Dos roles + mono. Relato = Fraunces + Manrope. Fichas, tablas, precios, CTA = Formula + Rader. Meta = Supply Mono.
5. Cercanía. Español latinoamericano neutro. Tuteo o impersonal. Sin voseo. Sin jerga vacía.
6. Papel, no dashboard. Sin badges flotantes, glow, purple AI, gráficos arcoíris ni paredes de texto.

Tono: cálida · sólida · cercana · minimalista.
Pilares: Permanencia · Evidencia · Cercanía · Precisión · Criterio.

3. Formatos

Default: A4 para lo que se manda. 16:9 para lo que se proyecta. No diseñar en 4:3.

Una propuesta A4 típica: 8–14 páginas. Un deck: 10–14 diapositivas. Si pasa de eso, sobra o hay que partir.

4. Color

Solo tokens Permanencia. Cero hex inventados.

4.1 Dieta (identidad)

Resalte #5C93C9 (RGB 92, 147, 201 · CMYK 65 / 30 / 5 / 0): un solo foco tech/IA por documento (una fila, un kicker, una serie de gráfico). Nunca CTA, nunca portada, nunca logo.

Gamas permitidas (las del kit, no otras):

4.2 Pares de superficie

Sobre ink, lead = Origen al 70%. Bordes = Origen al 12%. No grises inventados si el PDF se ve en dark mode: o página Origen completa, o página Base completa.

4.3 Gráficos

Máximo un gráfico por página. Titular = la conclusión, no el nombre del eje.

Series, en este orden: Base · Roble · Veta · ink-68. Una serie destacada puede ser Resalte. Prohibido arcoíris, gradientes 3D, glow.

4.4 Prohibido

• Coral, salvia, neon, purple «AI», azules fuera de Resalte.
• Logo teñido de Roble o degradé.
• Piedra o Veta como CTA.
• Roble como fondo de página completa (solo botón / barra / acento).
• Más de un foco Resalte visible a la vez.

5. Tipografía

Relato (portada, diagnóstico, enfoque, cierre): Fraunces + Manrope.
Producto (alcance, tablas, inversión, timeline, CTA): Formula + Rader.
Meta (kicker, folio, labels, «confidencial»): Supply Mono.

No mezclar Fraunces y Formula en el mismo bloque de título. En una página de alcance, el H1 puede ser Formula; el párrafo de contexto, Rader o Manrope — no Fraunces encima de una tabla.

5.1 Familias

Fraunces y Manrope: Google Fonts (opsz 9–144, pesos 400–700).
PP Formula / Rader / Supply Mono: uso interno OQO. Self-host en HTML/PDF propio. No incrustar el kit de fuentes en un archivo que se entrega al cliente si la licencia no lo cubre — en ese caso usar los fallbacks de la tabla y documentarlo en la plantilla.

5.2 Escala A4 (lectura / impresión)

Unidades en puntos. Cuerpo nunca bajo 10 pt.

5.3 Escala 16:9 (proyección)

Unidades en px a 1920×1080. El cuerpo de slide no baja de 18 px.

Máximo 40 palabras en una diapositiva de relato. Si hay que leerla, es un PDF.

6. Logo y chrome

• Monocromo. Nunca teñir, rotar, comprimir ni poner sombra.
• Clear space ≥ diámetro del punto de la Q.
• Portada y cierre llevan logo. Páginas interiores: folio, no logo repetido en cada esquina.
• Logo del cliente (si hay autorización): escala menor o igual al de OQO; gris Base o blanco según fondo. No inventar isotipos.

Folio (todas las páginas salvo portada llena)

Una línea, Supply Mono, ink-68 sobre Origen / Origen 70% sobre ink:

OQO  ·  Confidencial  ·  [Cliente]  ·  [Mes año]

Número de página a la derecha. Sin «Página X de Y» ruidoso: 03 basta.

Pie legal corto (cierre o última de lectura): vigencia de la oferta, si los montos son + IVA, que el documento no es contrato hasta orden de trabajo. Sin párrafos de abogado en cada página.

7. Layout

7.1 Márgenes y grid

Splits útiles: 7/5 (relato + figura), 6/6 (antes / después), 12 (titular o tabla ancha). No tres columnas de cuerpo en A4.

7.2 Ritmo de páginas

Nunca dos ink seguidas. Nunca dos tablas pesadas seguidas sin una página de aire (lead + 3 puntos).

A4 — secuencia canónica

Páginas opcionales (equipo, condiciones, anexos) se insertan antes del cierre, en Origen. El cierre es lo último que se ve.

16:9 — misma historia, una idea por slide. Portada ink → divisor si hace falta → contexto → diagnóstico → enfoque → 1–3 slides de alcance → inversión → evidencia → CTA. Alternar oscuro↔claro.

7.3 Aire y sombra

Sin multi-shadow. Separar con borde ink-14 o inset 0 0 0 1px. Si hace falta un panel: fondo Veta-35 o Roble-08, no tarjeta flotante con glow.

8. Páginas maestras

Cada layout tiene un job. Copiar geometría, no decorar.

8.1 Portada

• Fondo Base o foto a sangre + velo color-mix(Base) (nunca #000).
• Kicker Supply Mono Roble: PROPUESTA o el área (ESTRATEGIA, ECOMMERCE, MEDIOS…).
• Título Fraunces: el resultado que se construye, no el nombre del servicio. Una línea, máximo dos.
• Meta Manrope: cliente · fecha · validez (Vigente hasta [fecha]).
• Logo blanco, esquina o pie. Sin badges, sin año inventado, sin «desde 19XX» si no va con evidencia al lado.

8.2 Divisor de sección

• Página ink, poco texto.
• Número o kicker mono + título Fraunces.
• Sin párrafo. Sin foto de relleno.

8.3 Punto único (deck) / lead (A4)

• Un titular. Un párrafo. Opcional: un dato o una figura.
• En deck: ≤40 palabras. En A4: lead + hasta 120 palabras.

8.4 Dos columnas

• Comparación, hoy / propuesto, texto + imagen.
• Misma jerarquía en ambas columnas. La columna ganadora puede llevar una regla superior Roble (4 pt) o Resalte si es el único foco tech.

8.5 Lista

• Máximo 5 ítems. Título definitorio más grande; apoyo más chico.
• Bullet = Roble (o Resalte si la lista es el foco tech).
• No iconos de librería genérica de colores distintos.

8.6 Alcance / entregables

• Tabla o lista densa. Formula en headers. Rader/Manrope en celdas.
• Columnas típicas: Entregable · Qué incluye · Qué no · Hito.
• Una fila o celda destacada: fondo Roble-08, no Roble sólido.

8.7 Inversión

• Un total dominante (Formula). Desglose debajo, no al revés.
• Moneda CLP, formato Chile: $1.250.000. Decimal 2,4%.
• Declarar + IVA o IVA incluido una vez, visible.
• Si hay fases: una columna o una card por fase — no tres tipografías distintas.
• CTA de esta página: verbo + objeto (Revisar el alcance juntos, Agendar la partida). No «Enviar».

8.8 Timeline

• Horizontal en 16:9; vertical o 4 hitos en A4.
• Punto activo (si hay un «ahora») = Resalte o Roble — uno solo en la pieza.
• Fechas reales o [SEMANA n]. No inventar un kickoff.

8.9 Evidencia / cita

• Cifra: Formula grande + unidad + una línea de contexto. Fuente o [MÉTRICA] si no está validada.
• Cita: Fraunces 18–22 pt (A4) / 28–32 px (deck). Atribución Manrope + cargo. Sin comillas decorativas enormes.
• Logos de cliente: solo reales, monocromo, fila quieta. Sin «ellos confían» si la lista es stock.

8.10 Foto a sangre

• Una idea. Copy en overlay (Origen) sobre velo Base.
• Estándar estilo-fotografico.md: modo Físico o Digital, no ambos en el mismo frame.
• Sin tipografía bakeada en la foto: el copy va en el overlay.

8.11 Cierre / CTA

• Un next step. Un CTA Roble + blanco.
• Contacto: nombre, mail, oqo.cl. Teléfono y dirección solo si están en data/nap.ts / NAP real — no placeholders.
• Logo blanco si la página es ink; negro si es paper.

8.12 Contraportada (opcional)

• Ink, logo blanco, URL. Sin redes inventadas ni claim de premiación.

9. Componentes

9.1 CTA

Igual que el sitio, adaptado al soporte:

• Fondo #B07A3E · texto #fff · Formula semibold · UPPER · tracking 0.06 em.
• Pill 999. Icono circular a la derecha (círculo cream, flecha Base) cuando el soporte lo permita.
• Hover digital: #9A6B38.
• Un CTA dominante por página. Secundario: borde Roble 55% o ghost sobre ink (borde Origen 72%, texto Origen).
• Copy cálido, cercano a Hablemos! — no «Hablar del proyecto» ni «Submit».

9.2 Kicker

Supply Mono · UPPER · 0.12 em · Roble · dot 4–6 pt del mismo color.
Resalte solo si esa página es el único foco tech del documento.

9.3 Tablas

• Header: Base texto Origen, o Roble-08 texto Base. No header Roble sólido en tablas largas.
• Filas: Origen / Veta-35 alternadas.
• Líneas: ink-14. Sin grid completo tipo Excel.
• Alineación: texto a la izquierda, montos a la derecha, fechas al centro o izquierda consistente.
• Totales: peso 600 + regla superior Roble 2 pt, no fila pintada de Roble.

9.4 Cards

Solo si hay elección o agrupación real (tres fases, dos caminos). Si no, lista o tabla. Radio 16 px digital / 8–12 pt print. Sin sombra.

9.5 Números

• Un número héroe por página de evidencia.
• Tabular lining si la fuente lo tiene.
• No animar contadores en PDF.

10. Imagen

Fuente: estilo-fotografico.md. Mood abstracto solo si no hay frame de servicio — PHOTO.md, subordinado.

Peso: WebP o JPEG ≤500 KB por imagen en PDF digital cuando sea viable. Print: 150–220 ppp en el tamaño final; no 72 ppp ampliados.

11. Copy y estructura

Mandato Comercial de AGENTS.md. Orden fijo:

1. Contexto — qué está pasando en el negocio del cliente.
2. Diagnóstico — criterio OQO; la tensión, no el catálogo.
3. Enfoque — cómo se construye (una promesa).
4. Alcance — qué se entrega y qué no.
5. Inversión y camino — plata, tiempo, next step.
6. Evidencia — caso o silencio / [CASO].
7. Cierre — un CTA (verbo + objeto).

Una promesa por bloque. Claims «30+ años» o liderazgo en IA solo con evidencia al lado. Verticales foco: inmobiliario · ecommerce · servicios profesionales. Servicios: los de oqo.cl — no inventar nombres.

No decir: disruptivo, sinérgico, next-level, IA mágica, 360 sin prueba, «soluciones integrales» vacías.

Placeholders: [CLIENTE] [CASO] [MÉTRICA] [FECHA] [MONTO] [CONTACTO]. Mejor un hueco honesto que un número lindo.

12. Do / Don't

13. Checklist de fidelidad

Antes de enviar o generar:

• Hex solo del kit (Origen / Base / Roble / Veta / Piedra + gamas listadas)
• Resalte ausente o un solo uso tech
• Logo monocromo correcto según fondo
• Relato = Fraunces+Manrope · fichas/CTA = Formula+Rader · meta = Supply Mono (o fallbacks §5.1)
• CTA Roble + blanco · un dominante por página
• Sin dos páginas ink seguidas
• Sin purple / neon / pasteles / Inter-Poppins
• Montos en CLP · IVA explícito
• Cero clientes, métricas, años o servicios inventados
• Folio confidencial + número de página
• Imagen: modo Físico o Digital; una idea; sin tipo bakeado
• Un next step claro en el cierre

14. Plataformas

Plantilla maestra (cuando exista): un archivo por formato (A4 y 16:9) con las páginas de §8. Este design.md manda sobre la plantilla si alguien «mejora» colores.

15. Gobernanza

Cadena coral (brand-voice v1.2): vigente en deals ya abiertos hasta migrar. Pieza nueva = Permanencia. No reintroducir la paleta coral ni tipografías de esa cadena.

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