TheWeb. — Guía de marca & formatos Instagram

01 — Paleta

Colores de marca

Haz clic en cualquier muestra para copiar el código hexadecimal. Usa el amarillo solo como acento; el fondo principal es negro profundo.

Primarios & acento

Black

#0A0A0A

rgb(10, 10, 10)

White

#FFFFFF

rgb(255, 255, 255)

Yellow

#FFDE59

rgb(255, 222, 89)

Yellow Light

#FFE88A

rgb(255, 232, 138)

Yellow Dark

#E6C84E

rgb(230, 200, 78)

Escala de grises

100

#F5F5F5

200

#E5E5E5

300

#D4D4D4

400

#A3A3A3

500

#737373

600

#525252

700

#404040

800

#262626

900

#171717

02 — Tipografía

Inter

Fuente única de la marca. Carga desde Google Fonts con pesos 300–900. Clic en las especificaciones para copiar valores CSS.

Aa

Light 300

Aa

Regular 400

Aa

Medium 500

Aa

Semibold 600

Aa

Bold 700

Aa

ExtraBold 800

Aa

Black 900

Hero title

inteligentes

72px / 900

Section title

Soluciones digitales

48px / 800

CTA title

Conversemos

51px / 900

Stat number

98%

56px / 900

Service title

TheWeb / Core

22px / 700

Body / subtitle

Creamos plataformas digitales con agentes de IA.

20px / 400

Section tag

TheServices

13px / 600

Hero tag

/ Inteligencia Digital /

14px / 500

Button

Contáctanos

14px / 600

Caption / footer

12px / 400

Google Fonts:
https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap

03 — UI

Componentes visuales

Patrones reutilizables de la web para mantener coherencia en piezas gráficas.

Highlight

Palabra clave en amarillo

Etiqueta de sección

TheServices

Botón primario

Contáctanos

Número de servicio

01

Gradiente hero (overlay)

Sobre imagen de fondo

Glow amarillo

Borde / separador

#262626 — gray-800

Acento lateral (cards)

Barra vertical 3px en hover

04 — Redes sociales

Formatos Instagram

Dimensiones en píxeles para exportar desde Figma, Canva o Photoshop. Relación de aspecto fija; escala el contenido proporcionalmente.

Formato	Uso	Tamaño (px)	Ratio
Post cuadrado	Feed, carrusel	1080 × 1080	1:1
Post vertical	Feed (máximo alcance)	1080 × 1350	4:5
Story / Reel	Historias, reels, anuncios	1080 × 1920	9:16
Portada destacada	Highlights (círculo recortado)	1080 × 1080	1:1
Perfil	Foto de perfil (se recorta en círculo)	320 × 320 min.	1:1

Zona segura en Stories/Reels: deja márgenes de ~10% arriba y abajo (iconos de IG) y ~8% a los lados. El contenido importante va dentro del recuadro punteado en las plantillas.

05 — Plantillas

Maquetas de referencia

Réplicas visuales de la web a escala reducida. Replica en tu herramienta de diseño al tamaño real indicado en cada etiqueta.

Hero — post cuadrado 1080 × 1080 px

/ Inteligencia Digital & Marketing Tecnológico /

Plataformas inteligentes

IA que vende y atiende en piloto automático.

TheWeb.

Servicio — post cuadrado 1080 × 1080 px

01

TheServices

TheWeb / Core

Sitios web de alta conversión y e-commerce.

Estadística — post vertical 1080 × 1350 px

¿Por qué TheWeb?

+150%

crecimiento en conversiones digitales

TheWeb.

CTA — story 1080 × 1920 px

Zona segura

TheWeb.

¿Listo para escalar?

Agenda una llamada y lleva tu negocio al siguiente nivel.

→ Conversemos

theweb.mx

Tip / dato — story 1080 × 1920 px

Zona segura

TIP

Un sitio sin IA es una tienda sin vendedor

Agentes que responden, venden y aprenden 24/7.

TheWeb.

Carrusel — slide 1 1080 × 1080 px

1 / 4

4 razones para digitalizar tu negocio

Desliza →

TheWeb.

Cómo usar este kit

Figma / Canva: crea un frame con las dimensiones exactas (ej. 1080×1080) y aplica los colores y tamaños de esta guía.
CapCut / Photoshop: fondo #0A0A0A o #171717; texto blanco; acentos en #FFDE59.
Imágenes de fondo: usa las mismas de la web (assets/hero-bg.jpg, assets/cta-bg.jpg) con el gradiente oscuro encima.
Logo: assets/logo.png sobre fondos oscuros; favicon en círculos pequeños.
Impresión PDF: Archivo → Imprimir → Guardar como PDF para compartir la guía con tu equipo.