Recursos de marca

Descargas de logo

El isotipo y los archivos debajo son los únicos activos aprobados para uso externo. Si necesitas otro formato, escríbenos.

Isotipo

SVG

Símbolo solo. Ideal para favicon, avatar y espacios cuadrados.

Descargar archivo

Isotipo sobre oscuro

SVG

Mismo SVG; colócalo sobre fondos oscuros (night o ink) sin invertir.

Descargar archivo

Logo (SVG)

SVG

Arte vectorial del logo para impresión y web.

Descargar archivo

Logo (WebP)

WebP

Raster para presentaciones y documentos donde SVG no aplique.

Descargar archivo

Paleta

Tokens sincronizados con la fuente de verdad del producto (src/config/colors.ts). El morado primario es el acento de marca; el texto principal va en ink.

• #6D28D9

  primary

  Acento principal, CTAs y enlaces

• #7C3AED

  primary-bright

  Énfasis en titulares y hover

• #8B5CF6

  primary-vivid

  Gradiente del CTA principal y focos activos

• #151122

  ink

  Texto principal y fondos oscuros de contraste

• #514A63

  ink-soft

  Cuerpo de texto secundario

• #FFFFFF

  surface

  Fondos claros y superficies

• #F5F3FF

  surface-muted

  Fondos neutros con tinte lavanda (secciones alternas)

• #F1ECFE

  primary-wash

  Fondos suaves y tarjetas destacadas

• #1B1424

  night

  Bloques oscuros y wordmark claro

• #22D3EE

  accent

  Acento secundario (ilustraciones y datos)

• #059669

  success

  Estados completados y confirmaciones

Tipografía

Familias, escala, pesos y tracking sincronizados con src/config/typography.ts. No sustituyas por Arial ni system UI en materiales oficiales.

Familias

• Títulos

  Space Grotesk

  --font-space-grotesk · Agentes de IA para firmas profesionales

• Cuerpo

  Inter

  --font-inter · Agentes de IA para firmas profesionales

• Etiquetas y datos

  JetBrains Mono

  --font-jetbrains-mono · Agentes de IA para firmas profesionales

Escala de tamaños

Cada token define familia, tamaño, interlineado, peso y tracking. En el sitio usa las clases .type-* y .label de src/index.css (ver typeUtilityClass en typography.ts).

• display-hero

  lh 0.95

  IA para firmas profesionales

  Hero de landing y titulares de máximo impacto

• display-section

  lh 1.1

  Automatización que escala contigo

  H2 de sección en producto y marketing

• heading-page

  lh 1.15

  Recursos de marca

  Título de página interior (p. ej. esta guía)

• heading-card

  lh 1.25

  Descargas de logo

  Títulos de tarjeta y bloques compactos

• body-lg

  lh 1.625

  Agentes de IA para firmas profesionales

  Lead e intro de párrafo

• body

  lh 1.625

  Agentes de IA para firmas profesionales

  Cuerpo principal en prosa

• body-sm

  lh 1.625

  Mismo stack tipográfico que el sitio.

  Texto secundario y metadatos en UI

• label

  lh 1.4

  Marca

  Eyebrows y etiquetas .label (mono, mayúsculas)

• caption

  lh 1.625

  primary · #6D28D9

  Notas técnicas y leyendas en mocks

• nav

  lh 1.25

  Producto

  Enlaces de navbar y controles compactos

Pesos

• light · 300

  Breakaway

  Editorial ocasional; no es el default de títulos

• regular · 400

  Breakaway

  Cuerpo y párrafos

• medium · 500

  Breakaway

  Nav, enlaces y énfasis suave

• semibold · 600

  Breakaway

  Botones y destacados en UI densa

• bold · 700

  Breakaway

  Títulos display y wordmark

Tracking (letter-spacing)

• label · 0.18em

  Clase .label y eyebrows de sección

  EJEMPLO

• eyebrow · 0.14em

  Subtítulos mono en hero de producto

  Breakaway

• wordmark-sm · 0.08em

  Wordmark en espacios reducidos

  Breakaway

• wordmark · 0.14em

  Wordmark estándar

  Breakaway

• tight · -0.02em

  Titulares display medianos

  Breakaway

• display · -0.04em

  Display hero y titulares muy grandes

  Breakaway

Espaciado y layout

Márgenes y contenedores compartidos con el sitio (layout.ts y utilidades Tailwind).

• 1152px

  layout-max

  Ancho máximo de contenido principal (max-w-layout)

• 1400px

  layout-wide

  Pie y bandas full-bleed con contenido centrado

• 16px → 24px → 40px

  page-gutter

  Padding horizontal de página: px-5 → sm:px-6 → md:px-10

• 64px → 80px

  section-y

  Separación vertical entre secciones: py-16 → md:py-20

• 24px → 32px

  card-padding

  Interior de tarjetas .card: p-6 → sm:p-8

• 8px

  stack-sm

  Gap entre etiqueta y título (gap-2, mt-2)

• 16px

  stack-md

  Bloques relacionados en formularios y listas

• 32px

  stack-lg

  Entre grids de sección y grupos de tarjetas

Uso correcto

Mantén espacio de respiro alrededor del logo y respeta el contraste mínimo entre texto y fondo.

Textos para prensa

Copia y pega. Puedes acortar el texto largo si el medio tiene límite de caracteres.