Sistema de marca
para construir
con claridad.
Todo lo que necesitas para hacer posts, presentaciones, piezas gráficas y landing pages que se sientan inconfundiblemente Ancla.
Qué es Ancla.
Antes de un color, una fuente o un componente, está la idea. Esta sección condensa cómo pensamos, qué prometemos y qué sensación queremos dejar. Todo lo demás sirve a esto.
Propósito
Hacemos que pagar menos sea fácil.
Ayudamos a las personas a reducir sus gastos mensuales de forma inteligente, haciendo simple algo que siempre ha sido complejo.
Propuesta de Valor
Cambia tu seguro. Paga menos. Nosotros hacemos todo.
Ahorro típico entre 25% y 40% en el seguro de incendio y sismo hipotecario. Misma cobertura. Proceso gestionado por nosotros.
“Ancla te ayuda a reducir tus gastos mensuales"
Úsala como cierre de presentaciones, about us, piezas de marca emocional. No para ads ni copy directo de performance.
Principio central
Todo lo que haga Ancla debe cumplir los tres a la vez. Si una pieza no las cumple, no es marca Ancla.
Reducir fricción
Menos pasos, menos formularios, menos dudas. Nosotros hacemos todo.
Aumentar claridad
Sin tecnicismos. Sin letra chica. Cifras concretas y pasos visibles.
Demostrar ahorro
Cifras específicas: 25–40% menos en tu seguro, $300.000 promedio al año
Personalidad
Cuatro rasgos, siempre juntos. Ninguno sin los otros.
Explica sin tecnicismos. Usa cifras concretas. Tutea. Transmite seguridad sin arrogancia.
Agresiva contra bancos. Técnica o fría. Prometedora exagerada. Compleja o solemne.
Logo.
La "A" de Ancla es un isotipo con volumen: dos planos en cian y rosa que forman la letra, con un ancla sugerida en la base. Se usa principalmente sobre fondos oscuros — ahí respira mejor.
Variantes principales
Cada fondo tiene su versión. No hay que inventar — ya están hechas.
Isotipo (solo la "A")
Para favicons, avatars, stickers, watermark pequeño, loading states. Nunca reemplaza al logotipo completo en pieza principal.
Versiones monocromas
Cuando no se puede usar el color (stamping, grabado, favicon pequeño, fax —sí, aún pasa— o watermark sobre foto).
Espacio libre mínimo
Dejar siempre un margen equivalente a la altura del isotipo alrededor del logo. Nada toca al logo: ni texto, ni bordes, ni elementos gráficos.
Regla: altura del isotipo "A" = espacio mínimo en los 4 lados.
Tamaños mínimos
| Digital (pantallas) Logo completo |
24 px alto |
| Digital (pantallas) Isotipo |
16 px alto |
| Impreso Logo completo |
12 mm ancho |
| Favicon / avatar Isotipo cuadrado |
32 × 32 px |
Qué nunca hacer
No estirar ni deformar
No rotar ni inclinar
No poner sobre fondos no autorizados
El sistema de color.
Dark-mode first. Tres fondos estructurales (dark, brand, light) con reglas estrictas de texto. Dos primarios (brand + CTA). Dos acentos que se pueden mezclar. El naranjo solo para acción.
Primarios
La marca es azul. La acción es naranja. Nunca se mezclan en el mismo elemento.
Fondos estructurales
Tres contextos. Cada uno con su regla de texto. No se mezclan en el mismo bloque.
Acentos (y el gradiente)
Cian y rosa se usan como highlights sobre los fondos oscuros. Se pueden mezclar en gradiente. Nunca con el naranjo.
Jerarquía de uso (de más a menos)
-
01
Brand #392dcf — identidad, componentes, fondo brand. Color dominante.
-
02
CTA #ff8322 — único color de acción. Máxima contención: 1 botón por pantalla ideal.
-
03
Cyan + Rose — acentos, gradiente entre ambos permitido.
-
04
Dark / Light — fondos estructurales. No mezclar en el mismo bloque.
Dark como protagonista. Brand como capa de identidad. Light para contenido denso. Naranjo SOLO en botones de acción. Gradiente cyan→rose permitido para títulos y acentos.
Gradiente entre azul y naranjo. Texto oscuro sobre fondo brand. Naranjo decorativo. Mezclar dos fondos estructurales en el mismo bloque visual. Usar colores fuera de esta paleta.
Tokens CSS
Copiar y pegar al inicio del proyecto.
/* Ancla Seguros — tokens */ :root { --brand: #392dcf; --cta: #ff8322; --bg-dark: #08071a; --bg-brand: #392dcf; --bg-light: #f4f7fc; --cyan: #2bd3f5; --rose: #ca4bff; --text-on-dark: #ffffff; --text-on-light: #08071a; }
Plus Jakarta Sans. Siempre.
Una sola familia tipográfica, siete pesos, disponibles en Google Fonts. No mezclar con Inter, Roboto, Arial ni system fonts bajo ningún caso.
Escala tipográfica
Usar siempre los mismos tamaños para mantener ritmo visual entre piezas.
Pesos disponibles
Headlines en 700–800, tracking -0.02em a -0.03em, line-height 0.95–1.1. Body en 400–500, line-height 1.5–1.6. Labels y eyebrows en 600 con letter-spacing 0.12–0.14em y TEXT-UPPERCASE.
Usar otra familia tipográfica. Mezclar con serifs. Bajar de 12px en body. Usar pesos que no están en la escala (300, 100). Aplicar tracking positivo a headlines — siempre negativo.
Cómo cargarla en web
Pegar en el <head> del HTML.
<!-- Plus Jakarta Sans desde Google Fonts --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet"> /* CSS */ body { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-optical-sizing: auto; }
Sistema de íconos.
Estilo Lucide — trazos limpios, stroke 1.75, esquinas redondeadas, viewBox 24×24.
Usan currentColor para heredar el color del contenedor: pueden ir en brand, cyan, o blanco según el contexto.
Set base
30 íconos que cubren todos los casos de uso habituales. Si falta alguno, se dibuja en el mismo estilo.
En los 3 fondos
Los íconos respetan la regla de texto de cada fondo. Para destacar uno, se puede usar el cyan.
Reglas técnicas
| ViewBox | 24 × 24 |
| Stroke | 1.75px (1.5 para íconos finos, 2 para íconos bold) |
| Stroke caps | round · round |
| Color | currentColor (hereda del padre) |
| Tamaños comunes | 16, 20, 24, 32, 48 |
| Estilo | Lineal outline. No fills masivos. No ilustraciones complejas. |
Componentes base.
Cada componente vive en los tres fondos (dark, brand, light). Empieza siempre eligiendo el fondo de la sección y después eliges el componente. El CTA naranjo aparece en todos los contextos — es el único que no cambia.
Botones
Jerarquía: CTA naranjo → Primario brand → Outline → Ghost. Una sola acción principal por pantalla.
Sobre Dark
Sobre Brand
Sobre Light
#ff8322 es exclusivo para la acción principal de conversión. Si aparecen 4 botones en una pantalla, solo uno puede ser naranjo.
Badges & Pills
Para trust marks, categorías, pasos de proceso, eyebrows. Nunca en naranjo (eso es acción).
Sobre Dark
Sobre Brand
Sobre Light
Cards
Superficie para contenido agrupado. Radio 16px. En dark/brand, borde hairline en lugar de sombra.
En minutos
Desde la cotización hasta la emisión, todo en el mismo día.
En minutos
Desde la cotización hasta la emisión, todo en el mismo día.
En minutos
Desde la cotización hasta la emisión, todo en el mismo día.
Inputs & Forms
Los formularios viven típicamente sobre fondo light. Radio 10px, borde hairline, focus brand con glow suave.
Navbar
72px de alto, backdrop blur 12px, badge de CMF visible. En scroll, el fondo aplica opacidad 0.92 + blur.
Cómo habla Ancla.
La tipografía y los colores pueden verse bien, pero si el copy suena a corredora antigua o a fintech genérica, la marca se cae. Esta sección es tan importante como el logo.
Cuatro principios
Tuteo siempre.
"Tú pagas de más", no "usted está pagando de más". Cercanía > formalidad. Nunca "Ud." ni "Usted".
Cifras concretas.
"Ahorras 25–40%", no "ahorras mucho". "$300.000 al año", no "un monto considerable". Números crean credibilidad.
Cero jerga.
Nada de "optimizar estructura de cobertura". Lenguaje que entendería cualquier persona.
Directa, no agresiva.
Hablar de "Probablemente pagas de más" > No hablar de "Los bancos te están estafando". El villano es el desconocimiento, no los bancos.
Ejemplos reales
Mismo mensaje, versiones mala y buena. Pégalo como referencia al redactar.
Pool de mensajes clave
Úsalos como headline, caption, o para armar variaciones. Ya están probados.
"Estás pagando de más por tu seguro. Aunque no lo sepas."
Ideal para: anuncios, posts que educan."Puedes cambiarlo. Legalmente."
Ideal para: respuesta a objeciones, FAQ."Nosotros hacemos todo por ti."
Ideal para: CTAs, landing hero, reducir fricción."Entre 25% y 40% de ahorro. Con la misma cobertura."
Ideal para: headline en ad, stat en hero."$300.000 al año. +$7.500.000 en la vida del crédito."
Ideal para: cifras concretas en landing, carrusel IG."El ahorro es la consecuencia de hacer las cosas bien."
Ideal para: cierre, about us, frase de marca.PPT con identidad.
16:9 siempre. Cuatro tipos de slide cubren el 90% de las necesidades: portada, contenido, dato / KPI, y cierre. Se arma en Google Slides, Keynote o PowerPoint.
Slide de portada
Dark como default. Logo chico arriba izquierda, título grande en 800, fecha/autor abajo.
Abril 2026
Resultados Q1 2026
Slide de contenido
Light para contenido denso, listas, explicaciones. Título 700, body 500. Imagen o dato destacado al lado.
Slide de dato / KPI
Brand como fondo. Un solo número gigante, con gradiente cyan→rosa en el número. Contexto debajo.
Slide de cierre
Dark. Frase de cierre o CTA, datos de contacto, logo centrado. Nunca "Gracias!" — en su lugar, una frase con peso.
El ahorro no es el producto.
Es la consecuencia de hacer las cosas bien.
Reglas de presentación
| Ratio | 16:9 — siempre. Nunca 4:3. |
| Tipografía | Plus Jakarta Sans. En Keynote/PPT descargar los TTF de Google Fonts e instalarlos. |
| Una idea por slide | Si quieres poner dos ideas, son dos slides. Espacio > densidad. |
| Rotar fondos | Alternar dark, brand, light en la presentación para dar ritmo — no usar uno solo en todas. |
| Imágenes / screenshots | Siempre con borde radius 12–16px. Nunca pegadas al borde del slide. Padding 48px mínimo. |
| Números destacados | Font 80–128px, weight 800, gradiente cyan→rosa. Siempre con contexto debajo. |
Banners, flyers, ilustraciones.
Todo lo que no es post, presentación ni landing. Emails, banners web, status de WhatsApp, banner de correo, material impreso. Usan la misma gramática pero adaptada al formato.
Banner web horizontal · 16:9
Para hero de landing, cover de blog, featured image en LinkedIn.
Banner de email / header · 3:1
Para el header de newsletters o mailings. Más compacto.
Flyer vertical & status de WhatsApp
Dos piezas de uso común. El flyer funciona como imagen de difusión; el status como mensaje rápido.
Probablemente
estás pagando
de más por
tu seguro.
Cambiarlo es legal, simple, y lo hacemos nosotros por ti. Ahorra entre 25% y 40% al año.
$300.000
al año
de ahorro.
Promedio en clientes que cambiaron su seguro con Ancla.
Ilustración & uso del gradiente
Cuando no hay foto, se usa el gradiente cyan→rosa como elemento visual con el grid de fondo. Sin abusar: una pieza = un elemento con gradiente máximo.
Grid dark de fondo en piezas nocturnas. Orbes radiales con blur para dar atmósfera. Logo siempre visible. Un solo elemento protagónico (número, frase, ícono). Padding generoso (mínimo 32px, ideal 48px).
Collages cargados. Fotos stock de oficinistas sonriendo. Abusar del gradiente (una pieza = una zona con gradiente). Tipografías muy chicas. Elementos pegados al borde sin padding.
Anatomía de una landing Ancla.
Ritmo de fondos: dark (hero) → light (contenido) → brand (CTA final). Una sola acción principal (naranjo). Cifras concretas. Badge de CMF siempre visible.
Ritmo de secciones
Este es el esqueleto base. Sirve para landing de producto, campaña o de marca.
Probablemente pagas 25–40% de más por tu seguro. Y puedes cambiarlo.
Cambia tu seguro obligatorio del banco por una alternativa más económica. Misma cobertura, menor costo, cero trámites de tu parte.
Proceso simple en 4 pasos. Todo hecho por nosotros.
Cotiza tu ahorro en 2 minutos.
Sin compromiso. Te decimos cuánto podrías ahorrar al año.
Reglas por sección
Hero
- • Fondo dark con grid pattern + gradientes radiales en esquinas
- • Eyebrow cyan con categoría del producto
- • Headline 700-800, parte del texto con gradiente cyan→rosa
- • Subhead en muted (65% opacidad)
- • Un CTA naranjo + un secundario outline
- • Trust bar debajo: clientes · ahorro · CMF
Secciones de contenido
- • Fondo light con contenido denso
- • Eyebrow brand + título 700
- • Una idea principal por sección
- • Cards en blanco con hairline
- • Íconos en brand (#392dcf)
- • Números destacados en gradiente
Formularios / Calculadora
- • Fondo light siempre
- • Inputs con borde hairline, radio 10px
- • Focus con borde brand + glow 4px
- • Labels en 600 uppercase (muted)
- • CTA naranjo al final, full-width
- • Máximo 3-4 campos visibles a la vez
CTA final / Footer
- • CTA final en fondo brand
- • Headline breve + subhead + 1 botón naranjo
- • Footer en fondo dark (o brand oscurecido)
- • Logo, links, redes, RUT, dirección, CMF
- • Hairline blanco 10% para separadores
Trust bar
Fila de indicadores de confianza. Va después del hero, antes del contenido principal.
FAQ
Acordeones con borde hairline. Pregunta en 600, respuesta en 400. Mínimo 5, máximo 8 preguntas.
Todo lo que necesitas, ya.
Esta carpeta es autosuficiente. No hace falta acceder a ningún Drive, Figma ni Dropbox. Todo lo que muestra este documento está disponible como archivo en la carpeta adjunta.
Logos
Cómo compartir esta carpeta
- 01 Comprime la carpeta
ancla-brand-guideline/completa en un ZIP. - 02 Envíalo por WhatsApp, Drive, Dropbox, WeTransfer — lo que prefieras. No pesa más de 1 MB.
- 03 La persona solo tiene que descomprimir y abrir
index.htmlcon doble click (Chrome, Safari, Firefox — cualquiera). - 04 Los SVG de logos, íconos y recursos están en
/assets. Se pueden arrastrar directo a Figma, Illustrator, Photoshop, Canva. - 05 Si surge una duda sobre una regla, se consulta este mismo HTML — es la fuente oficial.
Posts que se ven Ancla.
Instagram, LinkedIn, TikTok. Tres formatos, tres fondos rotativos, una sola identidad. Cada post tiene: headline corto, logo pequeño esquina, y un detalle de acento.
Formatos que usamos
No crear piezas en otros ratios. Estos tres cubren el 95% de los usos.
Feed cuadrado
Instagram, LinkedIn, Facebook feed
Historia / Reel
IG Stories, Reels, TikTok, YouTube Shorts
Feed vertical
Instagram retrato, LinkedIn vertical
Posts 1:1 — plantillas listas
Tres versiones del mismo post en los 3 fondos. Roten para que el feed no se vea monótono.
Estás pagando
de más por
tu seguro.
Cambia tu seguro.
Nosotros hacemos
todo por ti.
Ahorra hasta
$300.000
al año.
Estructura de un carrusel
5 slides. Portada hook → 3 slides de contenido → cierre con CTA. Siempre en el mismo orden.
¿Sabías que
puedes cambiar
tu seguro?
Los bancos cobran seguros estándar. Pagas más de lo necesario.
La NCG 469 te permite cambiarlo.
$300K
de ahorro al año en promedio
Cotiza
gratis en 2
minutos.
Rotar los 3 fondos en el feed para evitar monotonía. Logo pequeño siempre visible. Headline en 700-800. Una sola idea por post. Cifras concretas cuando se pueda. CTA claro en último slide de carrusel.
Llenar el post de texto chico. Usar fotos stock genéricas. Poner el CTA naranjo como decoración. Mezclar los 3 fondos en un mismo post. Usar emoji decorativos en headline (solo si aporta al mensaje).