Permanencia — Design System (kit técnico)

Este sitio es el kit (Canon v2). Humanos y agentes leen lo mismo.
Tokens: app/assets/css/tokens.css · Specs operativas: /specs · Agentes: AGENTS.md · Logos: public/logo/
Paquete: permanencia-canon · Sitio de aplicación: oqo.cl (oqo-permanencia)

Todo lo necesario para implementar y comunicar OQO bajo Permanencia está dentro de este kit. No hace falta abrir un brandbook HTML ni rutas del disco de nadie.

1. Brand

Resumen. Permanencia es la base canónica de OQO: canvas Origen (~40%), ink Base (~28%), Roble generoso en acción (~16%), Resalte como señal tech (~4%), triángulo tipográfico + mono, y fotografía bajo Materia + máquina (estilo-fotografico.md). Treinta años depurados — no reinventa.

Referencia viva de UI: el homepage (/ · componentes Home*) es el sistema visual aceptado — ritmo de bandas, motion GSAP, UiButton, media a sangre, header morph. Al implementar o auditar, priorizar fidelidad al home sobre descripciones heredadas del brandbook.

1.1 Estrategia de marca (incluida aquí)

Esta sección concentra la base estratégica. Es autónoma: no depende de otros documentos fuera del kit.

Verdad central

OQO se mide por el crecimiento sostenido de sus clientes — no por campañas puntuales ni entregables aislados. No vende campañas: construye, con cada cliente, algo que sigue en pie después de la primera entrega.

Misión y visión

Valores

Posicionamiento

Para empresas chilenas con trayectoria — inmobiliarias, marcas de ecommerce y compañías de servicios — que necesitan crecer sin perder solidez, OQO es la agencia de marketing y tecnología que construye crecimiento sostenido, integrando estrategia, creatividad, medios e inteligencia artificial bajo un mismo equipo desde hace más de 30 años.

Versión corta: OQO construye crecimiento sostenido — no campañas puntuales — con estrategia, creatividad, medios e IA bajo un mismo equipo hace 30+ años.

Personalidad y promesa

• Personalidad: cálida · sólida · cercana · minimalista
• Promesa: cada proyecto se construye para seguir dando resultado después de entregado
• Verticales foco: inmobiliario · ecommerce · servicios profesionales
• Claims «30+ años» / liderazgo en IA: solo con evidencia cercana; si no hay evidencia, no se afirma

Pilares comunicacionales (detalle)

2. Color tokens

Fuente operativa: /specs. Cada color tiene --nombre (hex) y --nombre-rgb (canales 0–255, espacio). En código: var(--origen) o rgb(var(--origen-rgb) / .7). En Figma: hex + RGB con comas. Cero hex sueltos.

2.1 Dieta principal (suma 100%)

Gamas de Resalte (el 4% es el sólido; estas no suman extra):

Blanco (fuera de la dieta % — no es canvas):

El blanco no es página. Es el papel del gráfico, anclado en Origen (borde ink-14, radio 16 px). Ver propuestas/design-v2.md.

Alias: --p = Roble · --d = Base · --l = Origen · --s = Veta · --a = Roble.

2.1.1 Resalte — cuándo y cómo

Un solo azul aprobado, y entra al %. No sustituye Roble en CTAs, nav activo ni links principales. Sobre bandas ink se nombra también --tinta-sig.

Usos canónicos estables en el home: (1) etapa «Operar» en Alcance · (2) área «IA» en Áreas. Siempre señal tech; nunca CTA.

Rol extra (propuestas / módulos de dato): dentro de un panel --blanco, Resalte es el dedo que señala — nodo, serie, columna o hito. Fuera del módulo, el acento sigue siendo Roble. Un solo foco Resalte por página. Si ninguna serie es «la que importa», no uses Resalte: queda la dieta v1.

No usar resalte para: CTA primario, nav activo, kicker de relato, relleno de logo, fondos dominantes, purple genérico «AI look», ni más de un foco resalte por bloque visible.

Fuente CSS: app/assets/css/tokens.css (:root).

Lectura de la dieta (identidad): Origen es el canvas de marca. Base concentra masa tipográfica, chrome y bandas ink. Resalte es la señal técnica del sistema (home: Operar, IA, Hoy), no un extra. Los % (40/28/16/8/4/4) miden presencia de marca en el sistema, no un histogram por página.

Lectura en el homepage (superficie de scroll): el home invierte la proporción visual — ~65–70% superficie oscura (Hero velado + Alcance ink + Áreas fotográficas + Novedades ink) vs ~30–35% clara (Trayecto, Evidencia/veta, Equipo, CTA cierre). Hero y Áreas no son bandas ink puras: son media full-bleed velada con Base. Origen sigue dominando como color de texto sobre ink. Ver §4.1.

2.2 Gamas derivadas (solo estas)

Roble sobre Origen (tints) — wash, bandas, paneles de apoyo (CTA sólido sigue #B07A3E):

Roble hacia Base (shades):

Ink (Base sobre Origen):

Superficies Veta:

2.3 Contraste (referencia)

2.4 Color prohibitions

• No pasteles por pilar (coral, salvia scrape, neones, purple AI genérico).
• No otros azules fuera de --resalte (#5C93C9).
• No teñir el logo de Roble ni degradé.
• No reducir Roble a chip <8%; Permanencia exige ~16% de presencia en acción.
• Veta nunca como CTA ni fill del logo.
• Piedra nunca como CTA.
• Blanco nunca como canvas de página. Solo texto de CTA y módulo de información.
• No sustituir Roble por Resalte «para que se vea moderno».

3. Tipografía

Triángulo + mono. Cada familia tiene una capa. Se mezclan en la misma página si cada una está en la suya — no si un titular de sección se escribe como interfaz.

Regla operativa: si es una frase que la marca le dice al lector, va en Fraunces. Si es una cosa que el lector usa o elige, va en Formula. Si es un dato que la máquina reporta, va en Mono.

Mayúsculas solo en rótulos ≤3 palabras (chips, kickers, B2B, CHECKOUT). Toda frase va en caja normal. Techo: si tiene más de tres palabras, no va en mayúsculas. La autoridad no levanta la voz.

3.1 Familias y tokens CSS

Medida (tokens): --fw-story 600 · --fw-story-body 400 · --fw-ui 600 · --fw-mono 500 · --track-story −0.015em · --track-ui −0.02em · --track-cta 0.06em · --track-mono 0.12em · --lh-body 1.55.

Self-host (kit y web): empaquetar en assets/fonts/ (kit) y servir en /fonts/ (oqo.cl, brandbook, Nuxt). Licencia Pangram Pangram: uso interno OQO; no redistribuir el kit a terceros sin acuerdo de licencia.

Google Fonts: Fraunces (opsz 9..144, 500–700) + Manrope (400–700).

3.2 Cuándo cuál

Riesgo A: Fraunces en toda la UI → se pierde precisión de producto.
Riesgo B: Formula en todos los titulares de sección → la página no tiene voz; lee como interfaz. Es el error de la auditoría de servicios.

3.3 Escala de cuerpo (cuatro tokens + piso)

Nada de font-size en rem con decimales. 11px es el piso. Titulares en clamp() fluido aparte.

3.4 Escalas de display

Producto / UI (cosas que se usan o eligen — no titulares de sección)

Emoción / story (la marca le habla al lector)

4. Layout tokens

Grid sugerido: 12-col mental dentro de wrap; splits ~1.05fr / 0.95fr; breakpoints ~900px / 800px / 700px.

Sombra: Permanencia evita multi-layer shadows. Preferir bordes --line / ink-14, box-shadow: inset 0 0 0 1px (borde por inset) y contraste de bandas. Si hace falta elevación mínima: 0 1px 0 color-mix(in srgb, var(--d) 8%, transparent) — no glow.

Hero overlay (foto oscura):
linear-gradient(185deg, rgba(28,24,21,.14) 0%, rgba(28,24,21,.42) 48%, rgba(28,24,21,.93) 100%)
En home: velos con color-mix(in srgb, var(--base) …%) — nunca negro puro inventado.

4.1 Home — sistema visual aceptado

El homepage (app/pages/index.vue + app/components/home/Home*) fija el ritmo, los componentes y el motion del sitio. No «corregir» el home hacia % de dieta abstractos; alinear otras páginas story al home.

Ritmo de bandas (alternancia estricta)

Nunca dos bandas oscuras consecutivas. Oscuro ↔ claro en todo el scroll:

Ocultas a propósito (no reactivar sin brief): HomeInsights, HomeInfo.

Tone tipográfico del home: story (Fraunces + Manrope) en toda la página; Formula/Rader solo en roles producto puntuales (hitos Path, tabs Scope, watermarks Evidence, CTAs UiButton). Los titulares de sección del home son el patrón correcto: Fraunces, caja normal.

Escala de texto / superficie sobre ink

Media a sangre

En paneles con foto/video, la media va a sangre del contenedor (sin padding ni radio propio que la deje flotando). Confirmado en Scope, Áreas, Novedades, Equipo (escena fuera del wrap + mask-image). Filtros estándar: brightness(0.82) contrast(1.05) (Scope) · grayscale(0.16) contrast(1.04) → color en hover (Equipo).

Wrap

--wrap / --section-wrap = min(1180px, 100%). Única excepción documentada: Áreas amplía a ~1240px en ≥1024px por sticky + cards.

4.2 Motion (lenguaje canónico)

Implementación: GSAP + ScrollTrigger, import dinámico en onMounted, cleanup con gsap.context() + ctx.revert(). Respetar prefers-reduced-motion (estado final sin scrub/loops).

Header morph: barra full sobre --base + logo blanco.png → pill compacto a la derecha al scroll (--h-p 0→1, smoothstep, rango ~480px). Nav links se desvanecen; burger aparece; CTA «Hablemos!» permanece. Ver AppHeader.vue.

4.3 Bandas oscuras: ink y tech

Dos nombres, la misma trampa. .band-ink / .section--ink es espresso de relato. .band-tech / .section--tech es espresso de señal (plataformas, integraciones, dato). El texto sobre ambas usa la escala de Origen sobre Base (§4.1).

Regla: todo override de color para banda oscura se escribe para ink y tech a la vez. Si solo se cubre una, hay un agujero de contraste (bajadas a 2,4:1). Foco de teclado visible con variante por banda. Objetivo táctil ≥ --touch-min 44px.

5. Componentes

5.1 Botón — UiButton (canónico del sitio)

Implementación: app/components/ui/UiButton.vue. El kit .btn / .btn-ghost es fallback para brandbook/HTML; en Nuxt usar siempre UiButton.

• Pill asimétrico con icono a la derecha (padding denso al lado del círculo).
• Hover primary → --roble-shade-15.
• Un CTA dominante por viewport. Copy cálido tipo Hablemos! (no genéricos fríos).
• Label del CTA: Formula; nunca Fraunces en el botón.

5.2 Kicker con dot

Patrón canónico (Path, Scope, CTA cierre, etc.):

• Supply Mono 11px · 500 · letter-spacing: 0.12em · UPPER · color --roble
• Dot 0.45–0.5rem · border-radius: 999px · mismo color (o --resalte si el bloque es foco tech)
• Variante sin dot: .section__kicker vía SectionHeader

5.3 Tags, pills y chips

5.4 Nav / header

• Fondo siempre --base · logo blanco.png (~72px en full)
• Links: Supply Mono · active = fondo Roble + texto blanco
• CTA «Hablemos!» primary Roble
• Morph a pill compacto a la derecha (ver §4.2) — no recrear nav cream/claro del brandbook legado

5.5 Links en cuerpo

• Color Roble; preferir underline o weight en body
• Small text: no Roble plano sobre cream — usar Base / ink-85 / shade-30
• Hover: shade-15 o underline más marcado

5.6 Formularios

• Campos mínimos (nombre, email, mensaje / proyecto)
• Input: fondo Origen o Veta-soft · borde ink-14 / Piedra · radius 12–16px (inputs) o pill en chat-like
• Focus: borde Roble · outline suave Roble-24
• Label: Supply Mono o Rader 14px · color ink-68
• Submit: UiButton primary
• Sin chat flotante ruidoso; expectativa de respuesta en meta

5.7 Cards

• Default: no cards decorativas
• Cards solo con interacción real (link, filtro, selección, aria-pressed)
• Tipologías del home:
  • Glass sobre oscuro (Áreas): color-mix(base 42%) + backdrop-filter: blur(10px) · radius ~1.5rem · hover a ~55%
  • Contenido sobre ink (Novedades): borde origen 12% · fondo origen 6% · radius --radius · hover en media
  • Panel-card (Scope): borde por inset 0 0 0 1px (no border que mueva layout)
  • Flotantes hero: única excepción decorativa · aria-hidden · composición del sticky, no contenido
• Elevación por borde/inset — nunca multi-shadow ni glow

5.8 Módulo de información (propuestas · v2)

Ajuste sobre la v1. No es otra marca. Si la página no trae diagrama ni dato denso, se diseña solo con v1 (Origen / Veta).

Máximo un panel de información focal por página. Detalle: propuestas/design-v2.md.

6. Logo

Reglas

• Monocromo únicamente (negro o blanco). Nunca teñir de Roble / filtros / degradé.
• Clear space ≥ diámetro del punto de la Q.
• No distorsionar, rotar, sesgar ni comprimir proporciones.
• No fondos ajenos a la dieta Permanencia.

7. Photography / imagery

Concepto madre: Materia + máquina — oficio (roble, papel, grano) y tecnología (pantallas, datos, campañas) en el mismo plano editorial.

Estándar operativo (fuente de verdad): estilo-fotografico.md — dos modos:

Dieta común: Origen / Roble / Base — luz cream, sombra suave, una idea por frame. Agencia de marketing: oficio y resultado, no madera abstracta ni open space stock.

Capas de mood (brandbook): Camino D · Materia Digital + A Materia / B Mesa / C Pieza — recetas en PHOTO.md. No sustituyen los modos Físico/Digital en páginas de servicio o campaña.

Permanencia Servicio (/servicios/*): frames Hero · Empaque · Compra · Operación acoplados al copy + modo Físico o Digital según vertical. Ver estilo-fotografico.md §7. Assets: public/images/servicios/<slug>/.

Proveedores: el estándar es agnóstico. Registrar jobs en la carpeta del asset. Exploración en calidad baja; cierre en media-alta / ≥2k cuando tipografía importe.

7.1 Render en light y dark

Toda pieza Permanencia debe leerse en canvas claro (Origen) y en bandas ink (Base), sin inventar hex.

Emails y PDF: asumir fondo claro; si el visor fuerza dark mode, preferir banda ink completa con Origen como texto — no grises inventados.

7.2 Gobernanza (validación)

• Permanencia es la base del nuevo framework de identidad; el brandbook HTML es presentación.
• Propuestas nuevas: propuestas/design.md. La cadena coral (brand-voice v1.2) sigue vigente solo en deals en curso hasta migrar.
• Fuente de verdad técnica: este kit. No inventar clientes, métricas ni servicios.

8. Do / Don't

9. AI implementation notes

• Este kit (content/canon/design.md + AGENTS.md + app/assets/css/tokens.css) es la fuente de verdad instalable.
• Skill Cursor (si está instalada): oqo-permanencia-branding — buscar el kit en el workspace (oqo-permanencia, permanencia-kit o brand/).
• Roles: Dev (Cursor) implementa UI/código; Comercial (Claude) escribe propuestas/copy.
• No inventar servicios, clientes, métricas, años ni headcount.
• Diseño web: un job por sección, brand-first hero, sin purple AI default.
• UI canónica: homepage (Home*) + UiButton + header morph — ver §4.1–5.
• Español latinoamericano neutro (tuteo o impersonal; sin voseo).

10. Sitemap sugerido (oqo.cl · Permanencia)

Home
├── Servicios (hub: Estrategia · Digital · Medios · Creatividad · IA)
│   └── Servicio detalle (hero · problema · enfoque · evidencia · CTA)
├── Casos (listado + ficha)
├── Agencia (sentido · trayectoria · criterio)
├── Novedades (listado + artículo)
└── Contacto (formulario único)

Home (sistema aceptado · ver §4.1):
Hero sticky (video + cards overhang) → Trayecto (Path) → Alcance ink → Evidencia veta → Áreas sticky/cards → Equipo tren → Novedades ink → CTA paper.
Tone story · UiButton · media a sangre · motion GSAP §4.2 · header morph.

Servicio detalle: Nav + hero full-bleed (1 CTA) → problema → enfoque → features si aplica → evidencia → CTA. Titulares de sección en Fraunces, caja normal. Formula/Rader en plataformas, chips, fichas y CTA. Mono en rótulos y dato. Referencia: /servicios/ecommerce. La mitad-máquina y la mitad-materia conviven; nunca solo pantalla.

Servicios de referencia: Ecommerce, Desarrollo Web, Marketing Digital, Branding, Audiovisual, Agentes Conversacionales, Estrategia, SEO, Social Media, SFCC, Automatización, Medios, Investigación, Contenido — alinear con oqo.cl vigente; no inventar nombres nuevos.

11. File map (este kit)

Rutas relativas a la raíz de permanencia-canon. No uses rutas absolutas del disco de nadie.

El sitio oqo-permanencia sigue siendo la aplicación viva (oqo.cl). Este repo es el Canon: manual + verdad para agentes.

12. Arranque

cp .env.example .env
npm install
npm run dev

Skill operativa: oqo-permanencia-branding. No duplicar como permanencia-branding.