El catálogo
Todo lo que existe en el sistema, renderizado: color, tipografía, componentes, iconos y slides. Se copia de aquí; no se reinventa.
v2.1 · julio 2026 ← Cómo usarlo
Todo lo que existe en el sistema, renderizado: color, tipografía, componentes, iconos y slides. Se copia de aquí; no se reinventa.
v2.1 · julio 2026 ← Cómo usarlo
Las bases sobre las que construir, no un reglamento. Lo que está aquí es lo que hace que dos piezas hechas por personas distintas se parezcan; el resto es tu criterio. En texto plano, para Claude: reglas.md.
Solo tres cosas son cerradas: la marca, el uso del logo y la accesibilidad mínima. Lo demás son puntos de partida buenos, no vallas.
brand/: la hoja oficial y los vectores del logo, por encima de cualquier web, deck o diseño anterior.#FF4A36, #FFAF69, #373E42, blanco. Un gradiente, 135deg, #FF4A36 → #FFAF69, y una sola vez por pieza.fuentes.css: si no, la tipografía de marca no carga y se cae a la del sistema.#FF4A36 tiene tono 6° y en un botón lee rojo; --ac-action (#FF6745) es el punto 0,29 de ese gradiente. --ac-orange queda para logo, gradiente y hover del botón.tokens.css — no a la pieza.logo-horizontal.svg · oscuro → -inverso.svg · color o foto → -blanco.svg · una tinta → -negro.svg.hover, focus-visible y active. Nunca outline: none sin sustituto, y el foco se marca en carbón: el naranja ya está ocupado por el botón.prefers-reduced-motion.Superficie. La página es blanca. El color entra por bloques —tibio o carbón—, no como fondo general. El carbón, una vez por pieza, normalmente en el cierre.
Jerarquía. Una cosa domina cada pantalla. Si dos elementos compiten, baja uno. El titular gana por tamaño; el botón, por color.
Naranja. Sólido es acción, tintado es marca. Un botón primario por pantalla y el resto ceden: cada uso decorativo del naranja sólido le resta fuerza al botón.
Movimiento. 150–200 ms, y solo transform, opacity y color. Si algo tarda más de 100 ms, estado de carga explícito y botón bloqueado para evitar el doble envío.
Voz. Segunda persona, directa, orientada a resultado. Cifras concretas siempre que existan, cero adjetivos sin dato detrás. Español para ES/LATAM, inglés para UK/AU/US.
Landings. Una promesa, un objetivo, un formulario, sin enlaces de salida. La primera pantalla es un contrato: qué consigues (titular = resultado del cliente, con cifra), cómo (el mecanismo en una frase), qué hago ahora (un CTA) y por qué creerte (una prueba). Orden que funciona: promesa → prueba → cómo funciona → para quién y para quién no → precio → objeciones → CTA final. La prueba va pegada a lo que sostiene, no apilada al final. El CTA se repite con el mismo texto —verbo + resultado, nunca «Enviar»— y debajo una línea que quite miedo. Cada campo del formulario cuesta conversión. Descualificar convierte. La longitud la marca la objeción más cara.
Iconos. Una sola familia, la de iconos.svg. Si falta uno, se dibuja en ese lienzo y se da de alta ahí; no se pega un SVG suelto ni se mezcla con emojis.
Dataviz. Cuatro series como máximo, en orden y empezando por el naranja. El verde y el rojo solo comunican estado. Cifras con tabular-nums.
Presentaciones. Portada en el gradiente con texto blanco; carbón para el cierre y para la idea que hay que recordar; blanco o tibio en el cuerpo. Una idea por slide, y el titular como conclusión en vez de etiqueta del tema. Antes de exportar a Adobe Express, ejecutar html_export_readiness_skill.
diseno.css, así que renombrar o borrar una clase o un token las rompe sin avisar. Añadir es libre; quitar exige comprobar antes quién lo usa. Si algo queda obsoleto, se marca como alias hacia el valor bueno y se retira más adelante.construccion/comprobar-contraste.py corre en cada despliegue y bloquea si un par de texto deja de cumplir. El equilibrio del naranja se sostiene con décimas: es la parte que más fácil se rompe sin que se note.tokens.css y solo ahí. Las páginas la reciben inyectada.Pendiente: alinear el STYLE_GUIDE del dashboard (PracticeHub/Studio Stats) con estos tokens.
Los archivos de brand/ son la fuente canónica: si un documento, una web o un diseño anterior dicen otra cosa, mandan estos.
Logotipo horizontal — el uso por defecto
Isotipo y wordmark
El isotipo solo cuando la marca ya está clara: avatar, favicon, esquina de slide. Nunca en la primera aparición de una pieza.
Zona de respeto y tamaño
Margen libre alrededor ≥ la altura del isotipo. No entra nada en esa banda: ni texto, ni bordes, ni otro logo.
.ac-logo--lg.ac-logo.ac-logo--smmínimo · 24pxPor debajo de 24 px el wordmark deja de leerse: usar el isotipo suelto.
Lo que no se hace
Avatares para redes
La hoja oficial
Fija la paleta y los usos del logo. Es lo que manda cuando algo no cuadra. Los originales de tipografía y tono están en brand/, ya destilados en Tipografía y Reglas.
La hoja fija #FF4A36 y para el logo y el gradiente es indiscutible. Pero su tono es 6°: en pantalla, aplicado a un botón, lee rojo, no naranja.
La interfaz usa por tanto #FF6745, el punto 0,29 del gradiente oficial, y el botón recupera #FF4A36 al hover. Ver Color → Acción.
Pendiente: llevar esta distinción —primario de marca frente a naranja de interfaz— a la hoja oficial.
Siempre var(--ac-*), nunca hex sueltos.
Marca
Acción
El naranja de marca tiene tono 6° y en pantalla lee rojo, así que no sirve como color de acción. --ac-action es el punto 0,29 del gradiente oficial — tono 11°, naranja sin discusión, y por tanto un color que la marca ya contiene. Lo usa toda la interfaz: botones, glifos, iconos, píldoras y la cifra clave. --ac-orange queda para logo, gradiente y el hover del botón, donde la marca se afirma al interactuar y el contraste sube de 2,9:1 a 3,3:1 justo al apuntar.
Derivados del carbón
La única familia de grises que existe. No hay un gris «neutro» aparte: desentona con el naranja.
Derivados del naranja
No hay ninguno más allá del tinte: oscurecer el naranja para ganar contraste lo convierte en ladrillo. Se usa tal cual, y solo sobre blanco o tinte, donde da 3,1–3,3:1 — glifos, líneas, iconos y etiquetas cortas. El texto corrido, en carbón.
Estado y dataviz
Fuera de marca a propósito: informes, formularios y validación. Verde bien y rojo mal, como espera cualquiera. El rojo va más profundo que el naranja del CTA para que nunca compitan.
Los fondos de estado se calculan con color-mix sobre estos dos colores, sin tokens aparte. Y si algo pide un color que no está aquí, casi siempre lo que pide es carbón a otra luz.
Poppins (600–700) en titulares — «soft, calm feel» · Inter en cuerpo — «used as our body text to explain things». Montserrat es la alternativa admitida a Poppins. Máximo 2 pesos por página. Escala modular ×1,25 desde 16 px.
--ac-text-4xlHero 60--ac-text-3xlTitular 44--ac-text-2xlSección 32--ac-text-xlSubsección 24--ac-text-lgEntradilla 20 — el mecanismo en una frase--ac-text-baseCuerpo 16 — Inter, interlineado 1,6--ac-text-smSecundario 14 — mínimo absoluto<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">Set propio en iconos.svg: 24×24, trazo 2, extremos redondeados, sin relleno y color heredado. Se pega el bloque de <symbol> tras <body> y se llama por id. Nunca mezclar con iconos de otra familia ni con emojis.
<span class="ac-card__icon"><svg class="ac-icon"><use href="#ac-i-diana"/></svg></span>
<svg class="ac-icon ac-icon--sm"><use href="#ac-i-reloj"/></svg>Rejilla de 8. Seis pasos, no más. Secciones con --ac-12 (96 px) en desktop. Contenedor 1080 px, línea de lectura 62 caracteres.
--ac-1 · 8--ac-2 · 16--ac-3 · 24--ac-5 · 40--ac-8 · 64--ac-12 · 96Solo hay dos: el naranja, que es la acción de la página, y el secundario, que cede jerarquía. Si dudas, es secundario. El foco se marca en carbón — el naranja ya está ocupado. Tabula con Tab para verlo.
30 minutos por videollamada. Sin compromiso y sin presentación de ventas.
<a class="ac-btn ac-btn--primary ac-btn--lg">Reserva tu diagnóstico</a>
<p class="ac-btn-note">Lo que quita miedo justo antes de pulsar.</p>El contrato de la primera pantalla: qué consigues, cómo, qué hago ahora y por qué creerte. Nada compite con el titular y el botón, y el titular es el resultado del cliente, no la descripción del producto. .ac-hl destaca en naranja lo que el cliente se lleva —aquí, los pacientes nuevos—; una sola vez por titular, o deja de destacar.
Campañas gestionadas y seguimiento automático de cada lead en menos de 5 minutos.
Más de 100 clínicas · garantía de 120 días
<header class="ac-hero">
<span class="ac-eyebrow">…</span>
<h1>38 <span class="ac-hl">pacientes nuevos</span> al mes…</h1>
<p class="ac-lead">…</p>
<div class="ac-hero__cta">…</div>
<p class="ac-hero__proof">…</p>
</header>El ritmo de la página se hace alternando superficie, no metiendo color de fondo. Carbón como máximo una vez por página, normalmente en el cierre.
Blanca con línea fina. Para features, pasos y bloques de informe.
La única superficie de color de la marca: naranja claro rebajado sobre blanco.
Borde naranja: el plan que se quiere vender. Una por grupo.
Para el cierre o un dato que tiene que pesar.
<section class="ac-section">… <!-- blanco, por defecto -->
<section class="ac-section ac-section--tint">… <!-- tibio, alterna -->
<section class="ac-section ac-section--ink">… <!-- carbón, una vez -->Las cifras van en carbón; una sola por bloque puede ir en naranja para anclar la vista. El testimonio va pegado a la afirmación que sostiene, no apilado al final.
Marca En objetivo Bajo objetivo
«Pasamos de 12 a 38 pacientes nuevos al mes sin tocar el presupuesto de antes.»— Clínica ejemplo, Madrid
| Mes | Spend | Leads | Citas | Estado |
|---|---|---|---|---|
| Mayo | 1.840 € | 96 | 44 | En objetivo |
| Junio | 2.100 € | 118 | 51 | En objetivo |
| Julio | 2.100 € | 87 | 33 | Bajo objetivo |
Pasos, calificación y objeciones. Descualificar sube la calidad del lead y la confianza del que sí encaja: por eso las dos listas pesan lo mismo y ninguna se pinta de rojo.
Revisamos campañas, agenda y seguimiento.
Campañas y Anna en marcha en 10 días.
Primeros pacientes entre el día 30 y el 60.
Entre 30 y 60 días desde el arranque de campañas.
Entonces lo que aporta AutoChiro es el show rate, no el volumen de leads.
Ready to Grow Guarantee: 120 días.
Cada campo cuesta conversión: solo los que se usan de verdad. El error va junto al campo, en texto, y nunca borra lo escrito.
Te respondemos el mismo día laborable.
Mismas reglas que en web: fondo blanco, naranja solo para anclar la cifra que cuenta la historia, carbón en portada y cierre. Aquí se ven al 62 %. Plantilla completa en plantillas/deck.html.
01020304El deck completo va dentro de .ac-deck, que es la mesa de trabajo donde se apilan los slides para revisarlos; al exportar no forma parte de ninguno.
<meta name="hz:slide-selector" content=".ac-slide">
<meta name="hz:canvas-width" content="1280">
<meta name="hz:canvas-height" content="720">