# Runa — Manual de trabajo

Versión 0.1 · septiembre 2026  
Idioma de la marca: inglés, español, portugués o híbrido  
Sistema: stone / Geist / shadcn  
Tagline: Wealth by design  
Contacto: [info@runahq.com](mailto:info@runahq.com)  
Landing: [runahq.com](https://runahq.com)  
App: [app.runahq.com](https://app.runahq.com)  
Mails transaccionales: no-reply@m.runahq.com

Este archivo es el manual descargable del sitio de marca. Sirve para que una agencia o una software factory arranque diseño y desarrollo **en el estilo de Runa**, no para copiar un dump de tokens. Lo definido se usa; lo pendiente se señala y no se completa a ojo.

El sistema de diseño de Runa se puede instalar con shadcn CLI:

```
npx shadcn@latest init --preset bJfDPgi8 --template next --pointer
```

---

## Contenido

1. [Cómo empezar](#1-cómo-empezar)
2. [Tipografía](#2-tipografía)
3. [Color](#3-color)
4. [Logo y marcas](#4-logo-y-marcas)
5. [Componentes](#5-componentes)
6. [Recetas de piezas de marca](#6-recetas-de-piezas-de-marca)
7. [Recetas de presentación](#7-recetas-de-presentación)
8. [Voz](#8-voz)
9. [Producción](#9-producción)
10. [Entrega](#10-entrega)

---

## 1. Cómo empezar

### Qué es Runa, para este trabajo

Runa es el nombre comercial y de producto. La entidad legal es Quaestus Advisory S.A., conformada como AAGI N°1098 CNV (Agente Asesor Global de Inversiones). El tagline es **Wealth by design**. El registro verbal es wealth, no bro-marketing; fintech, no hype cripto. En español, el tono es tuteo (vos). El registro visual es mineral: una lectura cálida de la escala stone, una sola familia tipográfica, poco ruido.

| Campo | Valor |
| --- | --- |
| Nombre comercial | Runa |
| Nombre legal | Quaestus Advisory S.A. |
| Tagline | Wealth by design |
| Tono de voz | Tuteo (vos) |
| Claim legal | Conformados como AAGI N°1098 CNV. Agente Asesor Global de Inversiones. |
| Mail de contacto | [info@runahq.com](mailto:info@runahq.com) |
| Dominio landing | [runahq.com](https://runahq.com) |
| Dominio app | [app.runahq.com](https://app.runahq.com) |
| Mails transaccionales | no-reply@m.runahq.com |

Este sitio de marca (manual vivo) es la fuente de verdad. El preset de shadcn es el arranque técnico. Si hay duda entre un mock y este documento, gana lo que está implementado en el sitio.

### Instalar el sistema

En un proyecto Next.js nuevo (o al inicializar uno):

```
npx shadcn@latest init --preset bJfDPgi8 --template next --pointer
```

Ese comando es el arranque: **Next.js + Tailwind v4 + este preset** (base-vega / stone, `--pointer` / Base UI). No armar una app shadcn genérica y pegar tokens a mano. El CLI deja el tema de Runa (tokens CSS light / dark, radio, paleta semántica, componentes). No sustituye este manual: el CLI da el kit; este archivo enseña **cómo se usa**.

Después, el flujo habitual de shadcn:

```
npx shadcn@latest add button card badge
```

No reinventar primitives. Si hace falta un patrón nuevo, se construye **componiendo** los componentes del kit, con las mismas reglas de tipo, color y radio.

### Stack de referencia

| Capa | Decisión |
| --- | --- |
| Framework de producto | Next.js (el preset usa `--template next`) |
| Estilos | Tailwind v4 + tokens CSS en `:root` / `.dark` |
| UI | shadcn/ui (preset, `--pointer` / Base UI) |
| Tipo | Geist (sans y heading). Mono del sistema para labels |
| Color | Escala stone de Tailwind + cuatro roles semánticos |
| Tema | Producto puede seguir el tema del OS (next-themes `class`, default `system`) |
| Idioma de marca | Inglés, español, portugués o híbrido. El chrome de producto puede ir en inglés. `lang` del documento sigue el idioma dominante de la pieza |

### Principio de trabajo

Una idea por superficie. Una familia. Una paleta. Aire. Cifras alineadas, no decoradas. Lo definido (nombre, tagline, tuteo, claim legal, dominios y mails) se usa. Lo pendiente (mascota, Open Graph, audiencia nominada, claims de marketing) **no se inventa**.

---

## 2. Tipografía

**Geist, de punta a punta.** Títulos, cuerpo, navegación, métricas y reportes usan la misma familia. Simple, precisa, con espacio para respirar.

En código: `Geist` de `next/font/google`, variable `--font-sans`. `--font-heading` apunta a la misma familia. No se carga Geist Mono: `font-mono` cae al mono del sistema / default de Tailwind. Eso es intencional para chrome, no una invitación a una segunda display font.

### Escala

| Nivel | Uso | Spec | Clases de referencia |
| --- | --- | --- | --- |
| Display | Hero, lámina de título | 60–144 / medium / leading 0.92 / tracking −0.07em | `text-6xl font-medium leading-[0.92] tracking-[-0.07em] sm:text-7xl lg:text-[clamp(3.5rem,18cqi,9rem)]` |
| Title | Títulos de sección | 36–60 / medium / leading 0.98 / tracking −0.055em | `.section-title` → `text-4xl font-medium leading-[0.98] tracking-[-0.055em] sm:text-6xl` |
| Body | Párrafo principal | 18 / regular / leading 28 | `text-lg leading-7 text-muted-foreground` |
| Caption | Notas, pies, copy secundario | 14 / regular / leading 24 | `text-sm leading-6` |
| Mono label | Metadatos, índices, chrome | 10 / uppercase / tracking +0.16em a +0.2em | `font-mono text-[10px] uppercase tracking-[0.2em] text-muted-foreground` |

El display del hero puede usar `clamp` con `cqi` cuando el contenedor es `@container`. En decks 16:9, los títulos oscuros también usan `cqi` (ver [recetas de presentación](#7-recetas-de-presentación)).

### Pesos

| Peso | Clase | Rol |
| --- | --- | --- |
| Regular 400 | `font-normal` | Cuerpo, caption, títulos de card secundarios |
| Medium 500 | `font-medium` | Default de títulos, display, métricas, botones |
| Semibold 600 | `font-semibold` | Énfasis puntual en UI, no para headlines de marca |
| Bold 700 | `font-bold` | Uso excepcional. No es el peso de marca |

Default de títulos: **500**. No “gritar” con 700 en un hero.

### Roles: qué va dónde

**Títulos.** Geist medium, tracking cerrado, interlineado corto. El display puede bajar hasta −0.07em. `text-balance` cuando el título es un bloque corto.

**Cuerpo.** Regular, 18/28 o 14/24. No apretar tracking ni leading. Color típico: `text-muted-foreground` para el párrafo de apoyo; `text-foreground` cuando el texto es el contenido principal.

**Métricas.** La misma familia, medium, `tabular-nums`. Tracking corto (`-0.03em` o `-0.02em`). Ejemplo de formato: `US$ 1.284.500`. Cifras alineadas, no decoradas, sin gradientes ni outline.

**Labels.** Solo mono, 10px, mayúsculas, tracking abierto. Metadatos, chrome de nav y de deck. No usar cejas ni volantas de sección (`03 / Typography`). No poner un label mono en mayúsculas encima del título de sección. No usar mono para un párrafo.

### Do / Don’t

- **Do.** Una familia de punta a punta. Tracking cerrado en display; espacio para respirar en el cuerpo.
- **Don’t.** No mezclar una segunda familia. No apretar el cuerpo. No suplantar Geist con Inter (ni con Space Grotesk, ni con una serif “de lujo”).
- **Don’t.** No usar cejas ni volantas. No poner un label mono en mayúsculas encima del título de sección. El título alcanza.

---

## 3. Color

**Stone is the base.** Por ahora, el universo cromático se construye sobre una lectura cálida y mineral del tema stone. No hay una paleta custom aparte de los cuatro roles semánticos.

Los swatches del sitio (referencia de comunicación):

| Rol | Valor | Equivalente |
| --- | --- | --- |
| Foreground | `oklch(0.147 0.004 49.25)` | stone-950 |
| Background | `oklch(0.985 0.001 106.423)` | stone-50 |
| Muted | `oklch(0.97 0.001 106.424)` | stone-100 |
| Primary | `oklch(0.216 0.006 56.043)` | stone-900 |

En CSS, `--foreground` light es `oklch(0.147 0.004 49.25)` (stone-950) y `--primary` light es `oklch(0.216 0.006 56.043)` (stone-900). Para diseño, se trabaja con stone; no se introduce un acento de marca (índigo, lima, oro) “para diferenciar”.

### Escala stone-50 → stone-950

| Token | Hex | oklch (Tailwind v4) |
| --- | --- | --- |
| stone-50 | `#fafaf9` | `oklch(98.5% 0.001 106.423)` |
| stone-100 | `#f5f5f4` | `oklch(97% 0.001 106.424)` |
| stone-200 | `#e7e5e4` | `oklch(92.3% 0.003 48.717)` |
| stone-300 | `#d6d3d1` | `oklch(86.9% 0.005 56.366)` |
| stone-400 | `#a8a29e` | `oklch(70.9% 0.01 56.259)` |
| stone-500 | `#78716c` | `oklch(55.3% 0.013 58.071)` |
| stone-600 | `#57534e` | `oklch(44.4% 0.011 73.639)` |
| stone-700 | `#44403c` | `oklch(37.4% 0.01 67.558)` |
| stone-800 | `#292524` | `oklch(26.8% 0.007 34.298)` |
| stone-900 | `#1c1917` | `oklch(21.6% 0.006 56.043)` |
| stone-950 | `#0c0a09` | `oklch(14.7% 0.004 49.25)` |

### Tokens de producto (light, `:root`)

| Token | Valor | Equivalente |
| --- | --- | --- |
| `--background` | `oklch(0.985 0.001 106.423)` | stone-50 |
| `--foreground` | `oklch(0.147 0.004 49.25)` | stone-950 |
| `--primary` | `oklch(0.216 0.006 56.043)` | stone-900 |
| `--primary-foreground` | `oklch(0.985 0.001 106.423)` | stone-50 |
| `--muted` / `--secondary` / `--accent` | `oklch(0.97 0.001 106.424)` | stone-100 |
| `--muted-foreground` | `oklch(0.553 0.013 58.071)` | stone-500 |
| `--border` / `--input` | `oklch(0.923 0.003 48.717)` | stone-200 |
| `--ring` | `oklch(0.709 0.01 56.259)` | stone-400 |
| `--card` / `--popover` | `oklch(1 0 0)` | blanco |
| `--card-foreground` | `oklch(0.147 0.004 49.25)` | stone-950 |
| `--radius` | `0.625rem` | 10px |
| `--sidebar` | `oklch(0.985 0.001 106.423)` | stone-50 |
| `--sidebar-primary` | `oklch(0.216 0.006 56.043)` | stone-900 |

### Dark (`.dark`)

| Token | Valor | Equivalente |
| --- | --- | --- |
| `--background` | `oklch(0.147 0.004 49.25)` | stone-950 |
| `--foreground` | `oklch(0.985 0.001 106.423)` | stone-50 |
| `--card` / `--popover` / `--sidebar` | `oklch(0.216 0.006 56.043)` | stone-900 |
| `--primary` | `oklch(0.923 0.003 48.717)` | stone-200 |
| `--primary-foreground` | `oklch(0.216 0.006 56.043)` | stone-900 |
| `--muted` / `--secondary` / `--accent` | `oklch(0.268 0.007 34.298)` | stone-800 |
| `--muted-foreground` | `oklch(0.709 0.01 56.259)` | stone-400 |
| `--ring` / `--sidebar-ring` | `oklch(0.553 0.013 58.071)` | stone-500 |
| `--border` | `oklch(1 0 0 / 10%)` | blanco 10% |
| `--input` | `oklch(1 0 0 / 15%)` | blanco 15% |
| `--sidebar-primary` | `oklch(0.923 0.003 48.717)` | stone-200 (igual que `--primary` dark) |

Charts (`--chart-1` … `--chart-5` en este tema): stone-300 / 500 / 600 / 700 / 800. Los mismos oklch en light y dark. Barras y donuts de producto en stone, no el arcoíris `--chart-1…5` de un kit default como paleta categórica.

### Semántico

Cuatro roles de estado, tomados de la paleta Tailwind. No son color de marca. Solo información, advertencia, error y confirmación.

| Rol | Token | Light | Tailwind | Dark | Tailwind |
| --- | --- | --- | --- | --- | --- |
| Info | `--info` | `#3b82f6` | blue-500 | `#60a5fa` | blue-400 |
| Info fg | `--info-foreground` | `#eff6ff` | blue-50 | `#172554` | blue-950 |
| Warning | `--warning` | `#eab308` | yellow-500 | `#facc15` | yellow-400 |
| Warning fg | `--warning-foreground` | `#fefce8` | yellow-50 | `#422006` | yellow-950 |
| Error | `--destructive` | `oklch(0.577 0.245 27.325)` | — | `oklch(0.704 0.191 22.216)` | — |
| Error fg | `--destructive-foreground` | `#fef2f2` | red-50 | `#450a0a` | red-950 |
| Success | `--success` | `#22c55e` | green-500 | `#4ade80` | green-400 |
| Success fg | `--success-foreground` | `#f0fdf4` | green-50 | `#052e16` | green-950 |

Clases: `bg-info text-info-foreground`, `bg-warning`, `bg-destructive`, `bg-success`.

### Cuándo usar cada superficie

| Superficie | Uso |
| --- | --- |
| `background` | Página, canvas de slide claro |
| `muted` | Paneles, filas internas, papel de pieza |
| `card` | Cards de producto (blanco en light) |
| `primary` | CTA default, iso invertido, print/stone, canvas de slide oscuro |
| `foreground` | Texto principal; también billboard sólido |
| Semánticos | Solo estado. Nunca un botón primario “verde Runa” |

Hardcodes de fotografía (no sustituyen tokens de UI): capa `#1c1917` (stone-900); overlay `rgba(41, 37, 36, 0.2)` (stone-800 al 20%); velos Media Lab `0.42` y `0.28`.

### Contraste

Texto de cuerpo sobre `background` o `muted` usa `foreground` o `muted-foreground`. Labels sobre foto o primary: `text-background/70` o `text-primary-foreground/60`. No poner `muted-foreground` sobre fotografía. El anillo de foco es `--ring` (`ring-3 ring-ring/50`).

---

## 4. Logo y marcas

**Solo el iso.** El isotipo es la unidad mínima de reconocimiento. Usarlo sin deformar y con aire suficiente.

El lockup (isologo) es iso + wordmark «Runa» (Geist). El iso es una construcción vectorial: arco (n), diagonal a 45° y triángulo sobre una base de trazo uniforme — no un trazo de bitmap. El favicon es el iso claro sobre placa `#4D4944` con radio 128/1024.

### Archivos vigentes (servidos por el sitio de marca)

Todo lo oficial se descarga **desde la misma origen que este manual** (`/design.md`): abrir la URL en el navegador, o `curl` / `wget`. Host de producción: [https://brand.runahq.com](https://brand.runahq.com). En el repo viven en `public/`.

```
curl -O https://brand.runahq.com/runa-iso-dark.svg
wget https://brand.runahq.com/runa-isologo-light.png
```

Las etiquetas del manual (**Iso Light**, **Iso Dark invertido**, y equivalentes de isologo) nombran el **fondo de aplicación**, no el archivo. El sufijo `-dark` / `-light` es la **tinta** (color de la marca). No leerlo como color de fondo.

Sobre fondo claro se usa tinta oscura. Sobre fondo oscuro, tinta clara.

SVG vectorial para UI y entrega. PNG raster para captura html-to-image (piezas sociales) y clientes que no tomen SVG.

| Qué | Polaridad / uso | SVG | PNG |
| --- | --- | --- | --- |
| Isotipo | tinta oscura, fondos claros | [https://brand.runahq.com/runa-iso-dark.svg](https://brand.runahq.com/runa-iso-dark.svg) | [https://brand.runahq.com/runa-iso-dark.png](https://brand.runahq.com/runa-iso-dark.png) |
| Isotipo | tinta clara, fondos oscuros | [https://brand.runahq.com/runa-iso-light.svg](https://brand.runahq.com/runa-iso-light.svg) | [https://brand.runahq.com/runa-iso-light.png](https://brand.runahq.com/runa-iso-light.png) |
| Isologo | tinta oscura, fondos claros | [https://brand.runahq.com/runa-isologo-dark.svg](https://brand.runahq.com/runa-isologo-dark.svg) | [https://brand.runahq.com/runa-isologo-dark.png](https://brand.runahq.com/runa-isologo-dark.png) |
| Isologo | tinta clara, fondos oscuros (`primary`, billboard, slide) | [https://brand.runahq.com/runa-isologo-light.svg](https://brand.runahq.com/runa-isologo-light.svg) | [https://brand.runahq.com/runa-isologo-light.png](https://brand.runahq.com/runa-isologo-light.png) |
| Favicon | iso blanco sobre placa `#4D4944`, radio 128/1024 | [https://brand.runahq.com/runa-favicon.svg](https://brand.runahq.com/runa-favicon.svg) | [https://brand.runahq.com/runa-favicon.png](https://brand.runahq.com/runa-favicon.png) |
| Este manual | Markdown | — | [https://brand.runahq.com/design.md](https://brand.runahq.com/design.md) |

Rutas relativas equivalentes: `/runa-iso-dark.svg`, `/runa-iso-dark.png`, y el resto con el mismo stem. Esos SVG + PNG son **oficiales y vigentes**. No usar exploraciones (`runa.svg`, `runa-exploration-*`, `icon.svg`) ni iconos anteriores.

El chrome del header usa `.logo-mark` (`aspect-[1024/392]`) como caja de lockup: máscara CSS alfa de `/runa-isologo-dark.svg`. En light el fill es `hsl(12 6.5% 15.1%)` (stone-800 / `#292524`), no `--foreground` ni `--primary` (`oklch(0.216 0.006 56.043)`, stone-900). En dark el fill es `--foreground`. En producto, preferir el SVG del lockup o el iso según el tamaño; PNG si la pieza se exporta a bitmap.

Icono de pestaña: `/runa-favicon.svg` con fallback `/runa-favicon.png` (`app/layout.tsx`).

### Aplicaciones que el manual prueba

1. Isologo sobre `muted` (escenario principal).
2. Lockup claro sobre `primary` (stone).
3. Lockup sobre fotografía (velo + overlay; el sitio muestra varias tomas).
4. Iso Light (fondo claro, archivo `-dark`), Iso Dark invertido (fondo oscuro, archivo `-light`), favicon.

**Foto vs slide.** Sobre fotografía: PNG oscuro + invert a blanco (patrón Media Lab, `.logo-white`). Sobre slide/canvas oscuro: PNG claro, **sin** invert. No mezclar los dos.

### Aire y tamaño mínimo

No hay una grilla de clear space publicada en módulos de X. La regla operativa: **no recortar el iso, no pegarlo al borde, no competir con otro logo en el mismo eje**. En UI, el iso de chrome va en un frame `rounded-[25%]` (story 64px, paper 48px, favicon de muestra 80px). En marcos chicos y redondeados, dejar padding/aire interior para que el radio no recorte el iso. En header, el lockup ronda 40–48px de alto.

### Qué archivo usar

| Fondo de aplicación | Tinta | Archivo |
| --- | --- | --- |
| Superficie clara (tema light, `background`, `muted`) | oscura | `*-dark.svg` / `*-dark.png` |
| Slide / canvas oscuro (`primary`, tema dark) | clara | `*-light.svg` / `*-light.png` (sin invert) |
| Fotografía | clara (lectura) | `*-dark.svg` o PNG + invert (`.logo-white`) |
| Favicon / app icon | — | `/runa-favicon.svg`, `/runa-favicon.png` |

No recolorear a un stone intermedio. Solo las dos polaridades.

### Mal uso

- Rotar, estirar, sesgar o reconstruir el iso o el lockup.
- Recolorear (ni a semánticos, ni a un “acento de campaña”).
- Añadir sombra, glow, outline o gradiente.
- Poner el lockup oscuro sobre foto **sin** invert, o el lockup claro sobre foto (usar oscuro + invert). Invertir el archivo claro en un slide oscuro.
- Inventar un wordmark en Geist. El nombre en UI puede ir en texto (`Runa`); el dibujo del logo no se reescribe.
- Apodos, mascota o personaje digital. El nombre es **Runa**.

### Exploraciones que no son el sistema

En `public/` quedan SVGs de exploración (`runa.svg`, `runa-exploration-a.svg`, `runa-exploration-b.svg`, `runa-exploration-b-2.svg`) e iconos anteriores (`favicon-runa-light.png`, `icon.svg`, `icon-*-32x32.png`). **No usarlos en piezas nuevas.** El sistema vigente es la familia `runa-iso*` / `runa-isologo*` / `runa-favicon` (`.svg` y `.png`).

---

## 5. Componentes

Los mismos componentes de shadcn/ui, compuestos sobre el tema stone de Runa para casos reales de producto. El kit no es una galería de botones: es un **vocabulario**. Se elige variante por jerarquía, no por novedad.

### Principios

1. **Tokens antes que hex.** `bg-primary`, `text-muted-foreground`, `border-border`. Utilities `stone-*` solo cuando el patrón de dato lo pide (barras de allocation, fills de chart).
2. **Una acción primaria por vista.** Button `default` = CTA. El resto: `outline`, `ghost`, `secondary`.
3. **Radio del sistema.** `--radius: 0.625rem`. Cards `rounded-xl`. Controles `rounded-md`. Píldoras `rounded-full` / `rounded-4xl`. Iso/favicon `rounded-[24%]`–`[25%]`. Piezas de campaña `rounded-2xl`.
4. **Densidad de producto, no de landing.** Cards con `shadow-xs` y `ring-1 ring-foreground/10` (en el kit se refuerza `ring-border`). Filas internas `rounded-lg bg-muted p-4`. Listas `divide-y divide-border`.
5. **Chrome de producto puede ir en inglés.** El UI kit del sitio (Savings Targets, Holdings, Board review) habla inglés; apps y decks de métricas pueden seguir eso. El copy de marca no está atado a un solo idioma: inglés, español, portugués o híbrido.
6. **Cifras con `tabular-nums`.** Labels de la cifra en mono 10.

### Button

Base: `text-sm font-medium`, foco `ring-3 ring-ring/50`.

| Variant | Cuándo |
| --- | --- |
| `default` | Acción principal (`bg-primary`, hover `/80`) |
| `outline` | Secundaria, descarga, “New Goal” sobre card (`border-border`, hover `muted`) |
| `secondary` | Filtro activo, acción terciaria |
| `ghost` | Filtros, iconos de chrome |
| `destructive` | Fondo suave `destructive/10`, texto destructive. No un bloque rojo sólido |
| `link` | Texto con underline |

Tamaños: `xs` h-6, `sm` h-8 (el más usado en producto), `default` h-9, `lg` h-10, más `icon` / `icon-xs` / `icon-sm` / `icon-lg`.

### Input

Tamaños: `default` h-9, `lg` h-10. Ambos usan `text-base md:text-sm` para evitar zoom en iOS. En signup y flujos densos, **Input `lg` va con Button `lg`** (misma altura 40px).

### Card

`rounded-xl bg-card shadow-xs ring-1 ring-foreground/10`. Título: `font-heading text-base font-medium`. Contenido: columna, gap y padding `--card-spacing` (6 / 4 si `size="sm"`).

### Badge

Alto 5, `text-xs font-medium`. En el kit de producto: `outline` + `rounded-full bg-muted` + `text-foreground font-normal`. Badges discretos, no chips de color semántico salvo estado real.

### Progress

Track `h-1.5 rounded-full`. En savings: track `bg-border`, indicador `bg-foreground` (no un verde de “éxito” si no es un estado success).

### Charts y allocation

Donut, barras y stacked bars en stone: track `stone-200`, valor `stone-500` o `stone-800` / `400` / `200`. En dark, invertir el extremo (`stone-200` donde iba `stone-800`). No usar el arcoíris `--chart-1…5` de un tema default como paleta categórica.

### Layout de página de marca (referencia)

`max-w-[1440px]`. Aside 220px. Header sticky 64px, blur, borde suave. Secciones con borde inferior, `py-16 sm:py-24`, `lg:px-16`. Grid de título + cuerpo `0.7fr / 1.3fr` en secciones de sistema.

---

## 6. Recetas de piezas de marca

El Media Lab del sitio explora formatos: color stone con grain, fotografía del sistema de logo, y combinaciones de claim + foto. En el sitio, foto y frase **cambian para que se vean varias combinaciones de un vistazo**. Eso es un preview del lab, no motion de marca: no copiar el ciclo ni el crossfade a campaña, producto o un reel. **No son piezas oficiales.** El tagline es «Wealth by design»; las frases del lab no lo sustituyen. Sirven para acertar tracking, caja y contraste antes de una campaña.

### Receta base (todas las tiles)

**Contenedor.** `article` + `relative isolate overflow-hidden rounded-2xl`. Grid: `grid gap-3 sm:grid-cols-2 lg:grid-cols-12`. Padding típico `p-6`; outdoor `sm:p-8 lg:p-10`. Layout interno: `flex flex-col justify-between` (crop: `justify-end`; billboard: `justify-center`). Contenido sobre foto: `relative z-10`.

**Tres capas de tipo, sin mezclar roles.**

| Rol | Spec | Uso |
| --- | --- | --- |
| Label | Mono 10, uppercase, tracking 0.16em. Sobre foto/dark: `text-background/70`. Sobre papel: `text-muted-foreground` | `01 · Outdoor` |
| Claim | Geist medium, tracking negativo, `text-balance` | Frase de display (placeholder) |
| Marca | Sobre foto: PNG oscuro + `.logo-white`. Sobre slide oscuro: PNG claro, sin invert. Iso en frame 25% | Esquina o pie |

**Tres fondos, no un cuarto.**

1. Fotografía + velo (`.media-lab-photo-veil` 42% o `-soft` 28%).
2. Stone sólido: `bg-primary` o `bg-foreground`, con grain dark.
3. Papel: `bg-muted` + grain, o `bg-background ring-1 ring-border` + grain.

**Grain.** `.media-lab-grain::before`: ruido SVG `feTurbulence` (fractalNoise 0.75), tile 160px, opacity 0.38, `multiply`. En dark / `.media-lab-grain-dark`: opacity ~0.5–0.55, `soft-light`.

**Foto.** Mineral/cálida + velo oscuro para que un lockup claro se lea; sobre foto, logo claro (PNG oscuro + invert). Cover. En una pieza real, un fotograma y un claim. No es pack oficial: no descargar assets de demo del sitio.

**Copy de display.** 24 frases en inglés, placeholders para ver caja. Una de ellas es «Wealth for the life ahead»; **no es el tagline** (el tagline es «Wealth by design») ni claim de campaña. El resto tampoco. No hace falta traducirlas: son especímenes de display, no copy a localizar. En el lab, Outdoor anuncia el cambio de frase con `aria-live="polite"` porque el preview es dinámico; una pieza estática no necesita live region.

### Layouts (12 columnas, breakpoint `lg`)

| # | Formato | Span | min-height | Superficie | Marca |
| --- | --- | --- | --- | --- | --- |
| 01 Outdoor | Hero landscape | `col-span-8 row-span-2` | 28 / 36rem | foto + veil | lockup white `max-w-28–36` |
| 02 Story | Columna 9:16-ish | `col-span-4 row-span-2` | 28 / 36rem | foto + veil | iso oscuro + invert, frame 25% |
| 03 Print / stone | Print | `col-span-4` | 18rem | `bg-primary` + grain-dark | lockup white `max-w-28` |
| 04 Paper | Papel | `col-span-4` | 18rem | `bg-muted` + grain | iso dark 48, sin invert (invert en `.dark`) |
| 05 Crop | Crop foto | `col-span-4` | 18rem | foto + veil, copy abajo | — |
| 06 Billboard | Horizontal | `col-span-8` | 14rem | `bg-foreground` + grain-dark | lockup white `max-w-32` |
| 07 Lockup | Lockup | `col-span-4` | 14rem | `bg-background` + ring + grain | lockup color `max-w-36` |
| 08 Cinemagraph still | Full bleed | `col-span-12` | 12rem | foto + veil-soft | lockup white, oculto en mobile |

Claims por formato (resumen): outdoor 4xl→7xl / −0.055em; story 3xl / 14ch; print/paper 3xl / 12–13ch; crop 2xl–3xl; billboard 3xl–5xl; lockup `text-xl` / −0.04em; cinemagraph 2xl–4xl.

### Fórmula para una pieza nueva

Elegir un span de la tabla, un fondo de los tres, un tamaño de claim de la lista, lockup o iso 25%. No segunda familia. No color fuera de stone + foto. No usar las frases del lab como claim de campaña.

---

## 7. Recetas de presentación

Un viewport **16:9** que avanza con el scroll. En el sitio: cinco láminas de un review ilustrativo — **no es un deck oficial ni cifras live**.

### Stage

| Pieza | Spec |
| --- | --- |
| Track | `.deck-track`, altura `420vh`, `--deck-progress` 0–1 |
| Sticky | `top: 5rem`, alto `calc(100dvh - 6.5rem)` |
| Canvas | 16:9, `width: min(100%, calc((100dvh - 7.25rem) * 16 / 9))`, `container-type: inline-size` |
| Marco | `rounded-xl border-border`, sombra `0 24px 80px -48px rgba(41,37,36,0.55)` |
| Padding interno | `p-6 sm:p-9 lg:p-11`, columna `justify-between` |
| Light | `.deck-slide-canvas` → `background` / `foreground` |
| Dark | + `.deck-slide-canvas-dark` (`--deck-canvas-dark` / `--deck-canvas-dark-foreground`, stone-900 fijo en ambos temas) + `ring-1 ring-foreground/10` en dark + grain dark |
| Progreso | 1px inferior, fill `bg-foreground`; con `animation-timeline: view()` escala en X |

### Chrome (todas las láminas)

Fila `justify-between`. Izquierda: lockup `h-7–8` (PNG oscuro en canvas light; PNG claro en canvas dark, **sin** invert) + label mono `Exploration`. Derecha: `01 / 05`. En oscuro, labels a `primary-foreground/55`.

No poner un logo gigante en cada slide. El chrome es constante; el contenido cambia.

### Tipo en canvas

| Rol | Light | Dark |
| --- | --- | --- |
| Kicker | mono 10 / 0.18em / muted | 0.2em / primary-foreground/50 |
| Título | `text-2xl sm:text-4xl` medium −0.045em | `clamp` + `cqi`, leading 0.92, −0.06em |
| Métrica grande | `text-5xl sm:text-6xl` o clamp en celdas | — |
| Cuerpo | `text-sm leading-6 muted` | primary-foreground /65–/75 |
| % allocation | mono `text-xs tabular-nums` | — |

### Transición

Dirección `down` | `up`. Enter `0.7em`, leave `-0.5em` (se invierten al subir). Opacity 640 ms, transform 720 ms, curva `0.22 / 1 / 0.36 / 1`. Reduced motion: solo opacity 160 ms.

### Tipos de lámina (recetas)

**01 Title** — canvas dark + grain. Kicker de periodo (`Q3 2026 · Board review`), título display, caption corto. Copy abajo, chrome arriba.

**02 Metrics** — canvas light. Título + grid 2×2 / 4 columnas, `gap-px`, celdas sobre `background`, borde común. Cada celda: kicker mono, valor medium `tabular`/`clamp`, note `text-xs`. Cuatro números, no doce.

**03 Allocation** — light. Izquierda: tesis + métrica grande (`71%`). Derecha: barra stacked en stone-800/500/400/300 (invertir extremos en dark) + leyenda dos columnas. El copy deja claro que es modelo, no consejo.

**04 Narrative** — light. Tres columnas, cada una `border-t`: índice mono, título `text-lg` medium −0.03em, cuerpo caption. Una idea por columna.

**05 Outlook** — dark + grain. Título display a la izquierda; a la derecha, lista con label `font-medium` + frase. Cierre disciplinado, no un “call to the moon”.

**06 Timeline** — light (o dark+grain). Mapa horizontal de un ciclo: eje 1px, estaciones numeradas en mono que interrumpen la línea, kicker + título + caption por hito. Grid `repeat(n, minmax(0,1fr))` — no puntos 3D ni infografía. Reveal al activar la lámina (eje `scaleX`, pasos staggered); reduced motion sin translate. Componente `TimelineSlide`, datos `DeckTimelineSlide`.

### Al diseñar una lámina nueva

Mismo chrome, mismo padding, 16:9, o canvas light o dark+grain. Números ilustrativos, `tabular-nums`, medium. No segunda familia. No infografías 3D. No logotipos de terceros a tamaño hero.

---

## 8. Voz

**Claro antes que ruidoso.** Explicar lo complejo con calidez, rigor y una mirada directa.

### Cuatro rasgos

| Rasgo | Significa |
| --- | --- |
| Claro | Una idea por frase. Palabras que se pueden leer en voz alta sin traducir. |
| Cálido | Cercano, no frío de banco. El rigor no pide distancia. |
| Riguroso | Cifras, plazos y riesgos se nombran. Nada que no se pueda sostener. |
| No ruidoso | Sin superlativos vacíos, emojis de cohete ni “to the moon”. |

**Do.** Decir lo que hay, con el tono de quien cuida un patrimonio.  
**Don’t.** No gritar, no prometer, no disfrazar riesgo de oportunidad.

### Ejemplos

| Do | Don’t |
| --- | --- |
| Tu patrimonio está en reservas y renta fija. Podés ver cada posición. | Hacé 10x tu plata con yield insano. El mercado siempre premia. |
| Una posición puede bajar. Te la mostramos con el mismo rigor que cuando sube. | Nunca vas a perder. Your bags are printing. |
| Tu saldo disponible es US$ 12,94. El próximo vencimiento, el 1 de abril. | The future of money is here. LFG. |

### Idioma y registro

- **Idioma.** Inglés, español, portugués o híbrido. Un claim o un título puede ir en inglés y el cuerpo en español (u otra combinación de esos tres). No hay un idioma único de marca. El chrome de producto y las métricas pueden seguir en inglés. Los especímenes de display (Media Lab, deck) no se traducen: sirven para caja y ritmo, no como copy a localizar.
- **Registro.** Tuteo (vos). En español, hablarle a la persona: *tu patrimonio*, *podés ver*. No usted. El tuteo no autoriza el registro de bro-marketing.
- **Nombre.** Runa. Sin apodos ni mascota.
- **Tagline.** Wealth by design. No sustituirlo por una frase del Media Lab.
- **Claim legal.** Conformados como AAGI N°1098 CNV. Agente Asesor Global de Inversiones. Va en piezas reguladas (pie, disclaimer, legal), no como headline de campaña.

### No inventar

Hasta validar, no completar:

- Claims de marketing (además del tagline)
- Personaje o mascota digital
- Audiencia nominada como slogan
- Open Graph

Las 24 frases del Media Lab son **exploración tipográfica**, no copy de campaña. El tagline oficial es solo «Wealth by design».

---

## 9. Producción

### Espaciado

Escala Tailwind. Ritmos que se repiten en el sitio: `gap-3` / `gap-4` / `gap-6` / `gap-12`; secciones `py-16 sm:py-24`; contenido `max-w-xl` / `max-w-sm` para no estirar el cuerpo. No compactar un dashboard “porque entra más”.

### Radio

| Token / uso | Valor |
| --- | --- |
| `--radius` | 0.625rem (10px) |
| `rounded-md` | controles |
| `rounded-lg` | filas internas, logos de holding |
| `rounded-xl` | cards, swatches, canvas de deck |
| `rounded-2xl` | piezas Media Lab, paneles de logo |
| `rounded-[24%]` / `[25%]` | frames de iso y favicon |
| `rounded-full` | toggle de tema, badges píldora |

### Fotografía

Mineral/cálida + velo oscuro para que un lockup claro se lea; sobre foto, logo claro. No stock de apretón de manos, no neon, no coin 3D. El lab recorre tomas para preview; no es ritmo de marca. En producción, un fotograma.

### Motion

Curva de marca: `cubic-bezier(0.22, 1, 0.36, 1)`.

El preview foto/claim del Media Lab **no es receta de motion**. No hay un intervalo ni un crossfade de marca que replicar. El lab anima solo para recorrer combinaciones en el sitio.

| Evento | Duración |
| --- | --- |
| Slide deck (opacity / transform) | 640 / 720 ms |
| Hover de color (botones, nav) | transition-colors default |

`prefers-reduced-motion: reduce`: sin translate en el deck; opacity corta (160 ms) en slides. Respetarlo en producto. En el lab del sitio, el preview también respeta reduced motion (sin translate en fotos/claims).

Microinteracciones: un reveal bien orquestado vale más que hover en cada chip. El deck es el momento de alto impacto; el resto del manual es casi estático.

### Naming de archivos de marca

```
runa-isologo-dark.svg   runa-isologo-dark.png
runa-isologo-light.svg  runa-isologo-light.png
runa-iso-dark.svg       runa-iso-dark.png
runa-iso-light.svg      runa-iso-light.png
runa-favicon.svg        runa-favicon.png
```

Prefijo `runa-`. `iso` = marca sola. `isologo` = lockup. `dark` / `light` = tinta, no el fondo. No `logo-final-v3`. Entregas de agencia deberían seguir este esquema. SVG es el master vectorial; PNG es el raster de los mismos masters.

### Accesibilidad

- `lang` del HTML según el idioma dominante de la pieza. Este sitio de marca puede seguir en `lang="es"`; no obliga a que todo el copy sea español.
- Contraste: no texto `muted` sobre foto; overlays existen por eso.
- Foco visible (`ring`). Toggle de tema con `aria-label`.
- Descarga de assets: `aria-label` con el nombre de archivo.
- Deck: `aria-live` con el número de slide; slides inactivas `aria-hidden`.
- Outdoor del lab (preview dinámico): `aria-live="polite"`.
- Imágenes de logo: `alt` descriptivo (“Isologotipo Runa”); fotos de fondo del lab: `alt=""` si son decorativas.

### Dark / light

Producto puede seguir el tema del OS (next-themes `class`, default `system`). Probar **las dos** polaridades en logo, cards y deck. En dark, primary se aclara (stone-200) para seguir siendo el botón; `--sidebar-primary` igual que `--primary`. Charts mantienen la escala stone. Grain pasa a `soft-light`.

El toggle del sitio de marca puede escribir la clase a mano además de next-themes. En producto, un único mecanismo basta.

### Checklist rápido de una entrega

- [ ] Geist medium en títulos; regular en cuerpo; mono solo en labels
- [ ] Sin cejas ni volantas de sección encima del título
- [ ] Sin Inter ni segunda display
- [ ] Color = stone + semánticos de estado
- [ ] Logo: archivo vigente, polaridad correcta, sin deformar
- [ ] Radio y anillos del sistema
- [ ] Cifras `tabular-nums`, copy en tuteo (vos). Idioma: EN, ES, PT o híbrido; no traducir especímenes de display
- [ ] Tagline solo «Wealth by design». Claim legal en pie/disclaimer. Nada de mascota ni claim de marketing no validado
- [ ] Reduced motion y contraste sobre foto
- [ ] Light y dark revisados

---

## 10. Entrega

### Definido y listo para usar

- Nombre comercial y producto: Runa
- Nombre legal: Quaestus Advisory S.A.
- Tagline: Wealth by design
- Tono de voz: tuteo (vos)
- Claim legal: Conformados como AAGI N°1098 CNV. Agente Asesor Global de Inversiones.
- Mail de contacto: [info@runahq.com](mailto:info@runahq.com)
- Dominio landing: [runahq.com](https://runahq.com)
- Dominio app: [app.runahq.com](https://app.runahq.com)
- Mails transaccionales: no-reply@m.runahq.com
- Idioma: inglés, español, portugués o híbrido
- Theme light + dark en stone
- **Marcas oficiales (descarga, host [https://brand.runahq.com](https://brand.runahq.com)):**
  - Isotipo: [runa-iso-dark.svg](https://brand.runahq.com/runa-iso-dark.svg) / [png](https://brand.runahq.com/runa-iso-dark.png) (tinta oscura, fondos claros); [runa-iso-light.svg](https://brand.runahq.com/runa-iso-light.svg) / [png](https://brand.runahq.com/runa-iso-light.png) (tinta clara, fondos oscuros)
  - Isologo: [runa-isologo-dark.svg](https://brand.runahq.com/runa-isologo-dark.svg) / [png](https://brand.runahq.com/runa-isologo-dark.png); [runa-isologo-light.svg](https://brand.runahq.com/runa-isologo-light.svg) / [png](https://brand.runahq.com/runa-isologo-light.png)
  - Favicon: [runa-favicon.svg](https://brand.runahq.com/runa-favicon.svg) / [png](https://brand.runahq.com/runa-favicon.png)
  - Manual: [https://brand.runahq.com/design.md](https://brand.runahq.com/design.md)
- Tipografía: Geist
- Paleta y roles semánticos base
- Preset shadcn (`bJfDPgi8`) y recetas de Media Lab / deck

No listar como vigentes los SVG de exploración (`runa.svg`, `runa-exploration-*`, `icon.svg`).