Sistema de diseño
Toda pieza visual de AutoChiro sale de aquí: web, landing, informe, dashboard y presentación. Se copia de este catálogo; no se reinventa.
v2.1 · julio 2026 Cómo usarlo · para el equipo y para Claude
Toda pieza visual de AutoChiro sale de aquí: web, landing, informe, dashboard y presentación. Se copia de este catálogo; no se reinventa.
v2.1 · julio 2026 Cómo usarlo · para el equipo y para Claude
Texto secundario, líneas y superficies se derivan del carbón y del naranja: mismo tono, distinta luz. No se importa ni un valor de ninguna web ni librería. Antes de añadir un color, hay que demostrar que no se puede derivar.
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.
--lg · 56pxbase · 40px--sm · 28pxmí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 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.
010203Lo que no cabe en el CSS. Texto completo en reglas.md; aquí lo que hay que tener en la cabeza al abrir el editor.