# Helmcode — Brandbook para Claude Design > Documento operativo para generar presentaciones, slides y assets visuales on-brand. > No es inspiracional: es un set de decisiones. Cuando haya duda, gana lo que aquí dice literal. > Destilado de `tokens.css` (v3.0) + `design-system.md` + `design.md`, con las contradicciones ya resueltas. --- ## 0. Cómo usar este documento (si eres Claude Design) 1. **Los valores de color y los pesos tipográficos son literales.** Cópialos tal cual; no los "interpretes" ni los suavices. 2. **Para slides usa la escala de la §4**, no la escala web. La escala web es responsive (`clamp`) y aquí ya está traducida a px fijos para 1920×1080. 3. **Antes de añadir un elemento, consulta §6 (personalidad) y §7 (anti-patrones).** La regla maestra de Helmcode es restar, no sumar. 4. Lienzo de referencia: **1920×1080**. Para 1280×720, multiplica todos los px por `2/3`. Pesos, tracking, line-heights y roles no cambian. --- ## 1. Esencia Helmcode es infraestructura de AI inference privada para equipos europeos que no pueden comprometer sus datos. El diseño transmite **precisión técnica** (un spec sheet, no un SaaS de productividad), **confianza de infraestructura seria** (no startup playful) y **sobriedad** (el acento es una señal, no una paleta). **Regla de oro:** si dudas entre añadir algo o no, no lo añadas. --- ## 1.5 Logo El logo de Helmcode es **símbolo + wordmark**. El símbolo es una marca isométrica hexagonal (cubo/nodo) en índigo de marca; el wordmark es "helmcode" trazado en vectores. Ambos son SVG: para reproducirlos fiel hay que usar el SVG, no recrearlos a mano ni teclear el texto. > **Índigo de marca del logo: `#4934E1`** (hex real del asset; equivale al `--color-accent` oklch de la UI). El wordmark del logo es blanco `#ffffff` en su versión negativa. ### Símbolo / isotipo (favicon, avatar, marca sola) El cubo isométrico índigo en solitario. Úsalo donde no cabe el lockup: favicon, avatar, esquina de slide, sello. ```svg ``` ### Logo completo / lockup negativo (símbolo + "helmcode", fondo oscuro) La versión por defecto en presentaciones: el símbolo índigo + el wordmark en blanco. "Negativo" = para fondos oscuros, que es el 99% de los casos en Helmcode. ```svg ``` > El wordmark del lockup va trazado (paths), no es texto vivo. Si necesitas el wordmark a otro color (p. ej. atenuado), cambia el `fill="white"` del primer path. El símbolo (`fill="#4934E1"`) no se recolorea nunca. ### Uso, tamaño y clear space - **En slides:** lockup arriba-izquierda en portada y cierre; símbolo solo cuando el lockup no aporta (esquina, sello, avatar). - **Tamaño mínimo:** lockup ≈ 120px de ancho; símbolo ≈ 24px. Por debajo se empasta el cubo interior. - **Clear space:** deja por los cuatro lados al menos el ancho del símbolo. Nunca pegado a un borde ni a otro elemento. - **Fondo:** siempre sobre `--color-bg` (`#0a0a0a`) o una surface oscura. No hay versión positiva (fondo claro) provista; Helmcode no la usa. ### NUNCA con el logo - ❌ Recolorear el símbolo (siempre `#4934E1`). ❌ Recrear el wordmark tecleándolo en una fuente (usa el SVG). ❌ Añadir el `_` del nav al logo — el underscore es UI/terminal, no marca. ❌ Rotar, deformar, aplicar sombra/gradiente/glow. ❌ Poner el lockup sobre fondo claro o sobre una imagen con poco contraste. > Nota: el `helmcode_` con underscore que aparece en el nav es **tratamiento de UI** (mono, terminal), no el logo. No los mezcles. --- ## 2. Color Fondo oscuro siempre. Un solo acento índigo. Texto en tres niveles de opacidad sobre negro. **Nunca** un slide de fondo claro. ### Tokens canónicos (copiar literal) ``` /* BASE */ --color-bg: #0a0a0a /* negro cálido, no negro puro. Fondo de TODO slide */ --color-surface: #111111 /* cards, paneles, screenshots */ --color-surface-raised: #161616 /* paneles elevados, terminal */ /* BORDES / HAIRLINES */ --color-border: rgba(255,255,255,0.09) /* separador estándar */ --color-border-hover: rgba(255,255,255,0.16) --color-border-subtle: rgba(255,255,255,0.04) /* TEXTO */ --color-text-primary: #ffffff --color-text-secondary: rgba(255,255,255,0.55) /* descripciones, subtítulos */ --color-text-tertiary: rgba(255,255,255,0.35) /* SUELO legible. No bajar de aquí */ --color-text-mono: rgba(255,255,255,0.70) /* ACENTO — índigo Helmcode */ --color-accent: oklch(51.1% .262 276.966) /* hex real del asset: #4934E1 (úsalo como fallback) */ --color-accent-text: oklch(70% .18 276.966) /* ≈ #818CF8 (fallback hex) */ --color-accent-dim: oklch(51.1% .262 276.966 / 0.10) /* fondo tenue de elementos con acento */ --color-accent-border: oklch(51.1% .262 276.966 / 0.35) /* SEMÁFORO (solo para datos de severidad/estado, NUNCA como acento de marca) */ --color-terminal-red: #ff5f56 --color-terminal-yellow: #ffbd2e --color-terminal-green: #27c93f ``` > **oklch es la fuente de verdad.** Los hex son fallback para herramientas que no rendericen oklch. Si tu motor soporta oklch, úsalo. ### Las dos reglas de uso del acento (críticas) **A. Budget: máximo 4–5 momentos de acento fuerte (`--color-accent`) por slide.** El acento es una señal que dirige el ojo, no un color decorativo. Momentos válidos típicos en un slide: un dato/KPI clave, el borde izquierdo de un CTA, un estado de sistema, un tag destacado. El eyebrow `//` usa `--color-accent-text` (morado claro) y **no cuenta** contra este budget. **B. Texto pequeño SIEMPRE en `--color-accent-text`, no en `--color-accent`.** El índigo base no pasa contraste 4.5:1 a tamaños pequeños sobre negro. Cualquier texto en acento por debajo de ~24px va en `accent-text`. **Nunca el acento en:** body text, iconos decorativos, separadores/hairlines, fondos de sección grandes. --- ## 3. Tipografía — familias y reglas **Solo dos familias. Sin excepciones.** ``` Roboto → títulos, body, descripciones, statements Roboto Mono → eyebrows, labels, tags, datos/KPIs, terminal, specs, todo lo "técnico/navegacional" ``` **Pesos permitidos: 300, 400, 500. NUNCA 700 ni 900.** Si un título se siente débil, es problema de tamaño/contraste/spacing, no de peso. (Esto se cuela por defecto en decks — prohíbelo explícito.) - 300 light → líneas ``, subtítulos, descripciones - 400 regular → body, mono general - 500 medium → títulos, labels, botones, KPIs **Convención del eyebrow (firma de marca):** Roboto Mono, uppercase, prefijo `//`, color `accent-text`, tracking ancho `0.10em`. Ej.: `// how it works`. Abre casi toda sección/slide de contenido. **El logo es `helmcode_`** — el guión bajo es parte del nombre. En mono, lowercase. --- ## 4. Escala tipográfica para SLIDES (1920×1080) > Escala para presentaciones. Sustituye a la escala web (`clamp`). **Revisada v2:** subida respecto a la primera versión porque los tamaños web se evaporan en un slide. Para 720p, ×`2/3`. > > **Regla de suelo (la importante):** en un slide nada de texto que quieras que se lea baja de **~22px sans / ~20px mono**. Por debajo desaparece al trabajar a fit-to-screen (~67%). Es el error nº1 a evitar. ### Track Roboto (sans) — títulos y texto | Rol en el slide | px | Peso | Line-height | |---|---|---|---| | Portada / divisoria de sección | 140 (hasta 168 en portada pura) | 500 | 1.05 | | Statement grande (frase protagonista) | 100 | 500 | 1.08 | | **Título de slide de contenido** | 64 | 500 | 1.12 | | Lead / subtítulo bajo el título | 36 | 300 | 1.4 | | Body / bullets | 28 | 400 | 1.45 | | Body denso / pie de gráfico | 24 | 400 | 1.45 | | Secundario / nota | 22 | 300–400 | 1.45 | ### Track Roboto Mono — técnico / navegacional | Rol | px | Detalle | |---|---|---| | Eyebrow `// sección`, labels, terminal, anotación de dato | 24 | uppercase; `accent-text`; tracking `0.10em` en eyebrows | | Tags, micro-labels, footnotes, `FIG 0.X` | 20 | tracking `0.07em`. **Suelo absoluto — nunca por debajo de 20px** | ### Números de dato / KPI (Roboto Mono, peso 500, `tabular-nums`) - En **rejilla de KPIs**: 96–120px. - Como **stat único protagonista** de un slide: 200–260px. - **Unidad** a `0.5–0.55em` del número y en `accent-text`. Ej.: número 110px → unidad ~58px morada (`333.8` + `B` morada). ### Tracking (no cambia con el tamaño) ``` display / títulos -0.02em eyebrows / labels +0.10em ← el tracking ancho del // uppercase es firma; no lo pierdas mono body +0.02em tags +0.07em ``` **La tensión grande/pequeño sigue siendo media personalidad de Helmcode:** el contraste entre el sans grande (140) y el mono pequeño (20) sigue siendo enorme. Pero el pequeño es ahora **legible**, no decorativo-invisible. Mantén el contraste sin sacrificar lectura. > Si el deck se va a **proyectar en sala grande**, sube el track sans un escalón más (body 32, lead 40) y deja el mono donde está. Lo que nunca puede perderse es que el label mono más pequeño se lea desde el fondo de la sala. --- ## 5. Spacing y layout Sistema en múltiplos de 4px. ``` 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 · 80 · 96 ``` - **Márgenes de slide (1920×1080):** padding lateral ~120–160px, superior/inferior ~80–96px. Generoso. El aire es diseño, no relleno. - **Ancho de contenido cómodo:** no llenes el slide de borde a borde con texto; el cuerpo respira mejor a ~70% del ancho. - **Separación entre bloques:** usa el ritmo de 4px. Entre título y cuerpo ~40–48px; entre items de una lista ~24–32px. --- ## 6. Personalidad — reglas no negociables 1. **Esquinas rectas.** Sin `border-radius` en cards, paneles, botones, contenedores. Las esquinas rectas son personalidad técnica. (Lo único redondo: puntos/dots de estado.) 2. **Hairlines, no borders gruesos.** Separadores y bordes de panel a `0.5px solid rgba(255,255,255,0.09)`. Nunca gris sólido grueso. 3. **El acento es una señal.** Máx. 4–5 momentos por slide (§2.A). 4. **Mono para todo lo técnico/navegacional.** Eyebrows, labels, tags, datos, terminal, specs. 5. **Peso máximo 500.** 6. **Patrón de panel = celdas sobre fondo de borde.** Rejillas de cards = celdas `#111111` separadas por gaps de 1px sobre un fondo del color del borde (da hairlines perfectas entre celdas sin dibujar bordes individuales). 7. **El separador entre secciones es espacio, no una línea.** Las hairlines solo dentro de componentes. 8. **Screenshots de producto** siempre sobre `#111111` con borde `0.5px`. --- ## 7. Anti-patrones (NUNCA) - ❌ Fondo claro / slide blanco. - ❌ Peso 700 o 900 en cualquier texto. - ❌ Una tercera familia tipográfica (solo Roboto + Roboto Mono). - ❌ El índigo base (`--color-accent`) en texto pequeño → usa `accent-text`. - ❌ El acento en body, iconos decorativos, separadores o fondos grandes. - ❌ Más de 5 momentos de acento por slide. - ❌ `border-radius` en cards/paneles/botones. - ❌ Bordes grises sólidos gruesos en vez de hairlines de 0.5px. - ❌ Verde/rojo/amarillo como color de marca (el semáforo es solo para severidad de datos). - ❌ Iconografía genérica de stock o emojis decorativos. Las ilustraciones son SVG de trazo fino (§10). - ❌ Gradientes llamativos, sombras de colores, glow. La elevación es sombra negra sutil + hairline. --- ## 8. Componentes aprovechables como bloques de slide Patrones ya definidos en el sistema, listos para componer slides. ### Header de slide (eyebrow + título a 2 columnas) Casi todo slide de contenido abre así: eyebrow `// label` a todo el ancho, título (sans 48, peso 500) a la izquierda, descripción de apoyo (sans, peso 300, color secondary) a la derecha. ### Hairline cell grid (features, capacidades, sectores, pasos) Rejilla de N columnas: celdas `#111111` separadas por gaps de 1px sobre fondo `--color-border`. Cada celda: padding generoso, opcionalmente un índice `FIG 0.X` en mono tertiary, título 20–24px peso 500, descripción peso 300. **El bloque-slide más versátil de Helmcode.** ### KPI / dato `[número mono 64–72 peso 500] [unidad 0.5em accent-text]` + `[label mono 12 uppercase tertiary]` debajo. Colócalos en una cell grid. La unidad morada es uno de los momentos de acento más potentes. ### Bloque terminal Fondo `#161616`, borde `0.5px` + borde izquierdo `3px solid accent`. Barra superior con tres puntos macOS (rojo/amarillo/verde) + label mono tertiary. Sintaxis: comando blanco 500, flags azul tenue `rgba(180,210,255,0.75)`, strings `rgba(255,255,255,0.42)`, comentarios tertiary, prompt `$` en `accent-text`. Perfecto para slides de API/código. ### Barra de comparación / leaderboard Fila con nombre + track (`height 9px`, fondo `rgba(255,255,255,0.05)`) + fill (`--color-text-secondary`) + score. La fila destacada (lo tuyo, "on helmcode") va con fondo `accent-dim`, fill y cifra en acento, y borde izquierdo `3px accent`. Los competidores quedan neutros. Ideal para benchmarks. ### Tags / badges (mono, uppercase) - Neutro: texto tertiary, borde `0.5px`. - Acento (lo destacado): texto `accent-text`, fondo `accent-dim`, borde `accent-border`. - Filled (máximo spotlight): texto `--color-bg` sobre fondo `--color-accent`. - Reserva los tags acento/filled para LO que estás destacando; el resto neutro. ### CTA band (slide de cierre) Banda surface con borde izquierdo `3px accent`: texto a la izquierda + botón a la derecha. --- ## 9. Layouts de slide canónicos **Portada.** Fondo `#0a0a0a`. `helmcode_` en mono arriba-izquierda. Título sans 120–140 peso 500 (puede usar `` en peso 300 color secondary para la segunda idea). Eyebrow `// ...` opcional encima. Una sola ilustración SVG de trazo fino o grid de puntos como textura. Cero ruido. **Divisoria de sección.** Número de sección en mono (`01`, `02`…) + título grande sans. Mucho aire. Sin cuerpo. **Contenido estándar.** Header §8 (eyebrow + título + desc) arriba, y debajo una hairline cell grid (2–4 celdas) o un bloque de los de §8. **Slide de datos / KPI.** O bien un stat protagonista gigante (120–140 mono, unidad morada) centrado, o bien una cell grid de 3–4 KPIs. Un solo momento de acento dominante. **Comparativa / benchmark.** Header + barras de leaderboard (§8). La fila de Helmcode destacada en acento, las demás neutras. **Slide técnico / API.** Eyebrow `// api` + título split + bloque terminal centrado (ancho máx ~720px proporcional al slide). **Cierre / CTA.** CTA band (§8) o un statement grande + `helmcode_` + estado de sistema (dot accent + texto accent-text en mono). --- ## 10. Imagen e ilustración **Ilustraciones: SVG de trazo fino, nunca stock.** `stroke-width: 1`, `fill: none`, color `rgba(255,255,255,0.45)` con capas secundarias más tenues. Vocabulario visual: círculos concéntricos con líneas cardinales (nodo), polígonos concéntricos con conectores en vértices (soberanía/estructura), curvas de latencia con punto de dato etiquetado, redes de nodos, grid de puntos `rgba(255,255,255,0.05)` como textura de fondo. El acento en ilustración solo en anillos de pulso de un nodo central, muy tenue. **Fotos / imágenes raster: tratamiento dither duotono índigo.** Si necesitas una foto, va en duotono 1-bit: negro + índigo claro `rgb(186,188,252)` (`#BABCFC`), dither ordenado Bayer 4×4, píxeles chunky (`image-rendering: pixelated`). Nunca una foto a color plana. --- ## 11. Referencias visuales (qué tomar de cada una) - **Linear** → precisión, numeración `FIG`, hairline cell grids. - **Tinybird** → terminal, label + titular, acento controlado. - **Polar** → tipografía display, ilustraciones abstractas, pricing. - **Golden Suisse** → splits 50/50. - **Spec sheet de hardware (RTX 5090)** → densidad de dato técnico, layout de specs. --- *Fin. Fuente de verdad estructural: `tokens.css`. Este brandbook es la capa de decisión para producto visual/presentaciones.*