AGENTS — Permanencia (kit técnico OQO)

Instrucciones multi-agente para implementar y comunicar la marca Permanencia.
Lee también: design.md · estilo-fotografico.md · skill oqo-permanencia-branding.

Este sitio Canon es la fuente de verdad. El brandbook HTML Vite es presentación legado.

Project overview

Permanencia es la base canónica de OQO: Origen canvas 40% + Base ink 28% + Roble ~16% + Resalte 4% + triángulo tipográfico + mono + fotografía Materia + máquina.

Referencia viva de UI: el homepage (/ · Home*) es el sistema visual aceptado (ritmo de bandas, motion, UiButton, media a sangre, header morph). Detalle en design.md §4.1–5.

Do not invent palette, type roles, services, clients, metrics, or years. Prefer evidence or silence.
Paths: relativos a la raíz del kit (brand/). No uses rutas absolutas del disco de un desarrollador.

Gobernanza: Permanencia = framework de identidad en validación. Cadena comercial coral (brand-voice v1.2) sigue en deals en curso hasta piloto validado.

For Cursor developers

Mandate: ship web UI with brand fidelity. You are an implementer, not a rebrander.

1. Locate the kit (permanencia-canon/, brand/, permanencia-kit/, or node_modules/oqo-permanencia).
2. Read content/canon/design.md (incl. §4.1 Home) and :root in app/assets/css/tokens.css before coding colors/type. Specs operativas: /specs.
3. Use CSS variables — never hardcode random hex. Cada color tiene --nombre y --nombre-rgb (rgb(var(--origen-rgb) / .7)).
4. Triángulo + mono: Fraunces = frase de marca (titular de sección, caja normal); Formula + Rader = cosa que se usa; Supply Mono = dato. Mayúsculas solo en rótulos ≤3 palabras. Piso 11px (--fs-xs…--fs-lg). Home = tone story.
5. Logo: assets/logo/negro.png (light) · assets/logo/blanco.png (dark / header sitio). Monochrome only.
6. Primary CTA = UiButton Roble pill · texto --blanco #fff · Formula ≥18px semibold · icono circular a la derecha · hover --roble-shade-15; nav activo Roble + blanco. 6b. --blanco no es canvas: solo texto de CTA y superficie de módulo de información (diagrama / chart / matriz). Ver propuestas/design-v2.md.
7. Layout: brand-first hero, one job per section, cards only for real interaction, media a sangre, alternancia oscuro↔claro (nunca dos ink seguidas), no purple/neon AI look.
8. Motion: vocabulario design.md §4.2 (reveal sin blur, scrub, loops, hover-slow, header morph). Respetar prefers-reduced-motion.
9. Imagen: leer estilo-fotografico.md antes de generar o pedir assets; skill oqo-permanencia-foto-servicio para frames Hero/Empaque/Compra/Operación.
10. Sitemap: Home · Servicios (+ detalle) · Casos · Agencia · Novedades · Contacto (design.md §10).

Import CSS

import './brand/css/permanencia.css'

Definition of done (dev)

• Dieta identidad: Origen 40% · Base 28% · Roble 16% · Veta 8% · Resalte 4% · Piedra 4% — % de marca, no histogram por página
• Home / story: ritmo de bandas §4.1 respetado (oscuro↔claro)
• Resalte #5C93C9 (~4%) = señal tech o foco del dato dentro de un panel --blanco — nunca CTA, kicker de relato ni nav activo
• Titulares de sección en Fraunces, caja normal. Caps solo ≤3 palabras. Nada bajo 11px.
• --blanco solo en texto de CTA y módulos de información — nunca canvas de página
• Tokens from Permanencia only · velos con color-mix(base) no negro inventado
• Roble present in CTAs/links (~16% feel, not a chip)
• UiButton primary ≥18px blanco sobre Roble (AA large) · icono a la derecha
• Logo monocromo correcto (header sitio = blanco sobre Base)
• Story vs UI type respected (2 roles + mono)
• Media a sangre en paneles con foto
• Motion alineado a §4.2 + reduced-motion
• Fuentes PP desde /fonts/ (self-host)
• Build del proyecto consumidor OK
• No invented claims in UI copy

For Claude commercial

Mandate: write and present without breaking tone or pillars. You are a commercial partner voice, not a trend agency.

Tone: cálida · sólida · cercana · minimalista
Pillars: Permanencia · Evidencia · Cercanía · Precisión · Criterio

Safe claims

• Growth built to last / relaciones que duran (not one-off campaigns).
• Strategy + creativity + media + IA under one team — IA con oficio.
• «30+ años» only with nearby evidence or clear trajectory context.
• Verticales foco: inmobiliario, ecommerce, servicios profesionales.

Structure (proposals / service pages)

Visual y layouts: propuestas/design.md. Módulos de dato (diagrama/tabla): propuestas/design-v2.md. Copy:

1. Context / problema
2. Diagnosis (criterio)
3. Approach OQO
4. Evidence (or placeholder [CASO] / [MÉTRICA])
5. Next step + one CTA (verb + object)

Never say / invent

• Fake clients, logos, metrics, awards, headcount.
• Empty jargon: disruptivo, sinérgico, next-level, «IA mágica», «soluciones 360» without proof.
• New services not on oqo.cl / brief.
• Redesigning Permanencia colors or inventing pastel pillars.

Definition of done (commercial)

• One promise per block; one primary CTA
• Pillars respected; no empty tech posture
• Claims safe or marked as placeholders
• Visual direction uses Permanencia tokens + estilo-fotografico.md if imagery is described
• Proposal / deck follows propuestas/design.md + propuestas/design-v2.md (Origen as paper, #fff only in info modules, Resalte only as data focus, Roble CTA)

File map (kit)

Review checklist (shared)

1. Dieta 40 / 28 / 16 / 8 / 4 / 4 (Origen · Base · Roble · Veta · Resalte · Piedra). Home puede invertir superficie — §4.1. Resalte nunca CTA.
2. Roble generoso en acción · UiButton canónico
3. Triángulo + mono: Fraunces en titular de sección · Formula en producto · Mono en dato · caps ≤3 palabras · piso 11px
4. Logo monocromo · header sitio sobre Base = blanco
5. Evidencia o silencio
6. Fotografía: estilo-fotografico.md + media a sangre
7. Motion §4.2 · alternancia de bandas
8. Links: design.md · skill oqo-permanencia-branding · referencia viva /

Skill & routing