# Construye México · Brand Guidelines

> El directorio del sector construcción en México.
> Una plataforma seria, responsable, hecha por gente del gremio para gente del gremio.

Versión 1.0 — Junio 2026

---

## 1. Esencia

**Construye México** existe porque encontrar empresas confiables en la
construcción mexicana es absurdamente difícil. La marca tiene que
**comunicar institucionalidad y oficio**, no startup tecnológico.

| | |
|---|---|
| **Misión** | Un mapa cerrado, verificado y curado del sector construcción mexicano. |
| **Diferencial** | Verificación documental real + reportes de la comunidad. No es directorio abierto. |
| **Para quién** | Constructoras, desarrolladoras, proveedores, despachos, ferreterías, inversionistas y compradores serios. |
| **Tono de marca** | Institucional · Editorial · Cálido sin ser informal · Honesto · Sin marketing inflado. |

---

## 2. Logo

### El Umbral

El ícono evoca el arco/portal: el elemento arquitectónico que une la
historia mexicana — desde las arcadas mayas y portales coloniales hasta
los umbrales minimalistas de Luis Barragán. Funciona como **puerta de
entrada al gremio**.

### Variantes

| Archivo | Uso |
|---|---|
| `assets/logo-icon.svg` | Ícono solo. Para favicons, avatars, sellos pequeños. |
| `assets/logo-horizontal.svg` | Ícono + wordmark. Cabecera, firma, presentaciones. |
| `favicon.svg` | Versión sobre fondo sage con esquinas redondeadas para tabs de navegador. |

### Reglas

- **Espacio mínimo alrededor:** la altura del ícono. No invadas con texto.
- **Tamaño mínimo del ícono:** 16 px. Por debajo de eso usa el favicon
  (que ya tiene fondo sólido y mejor legibilidad a tamaños chicos).
- **Color del ícono:**
  - Sobre fondo sage (#5E6E5B) → blanco
  - Sobre fondo cream (#F5F2EB) → sage o casi negro (#2A2E2A)
  - Sobre fondo oscuro (hero, foto) → blanco
- **NO hacer:** rotar, distorsionar, agregar sombras, gradientes, contornos.
- **NO hacer:** poner el ícono solo (sin wordmark) en contextos donde la
  marca no es ya conocida — usa el logo horizontal hasta tener brand recall.

---

## 3. Paleta de color

### Colores de marca

| Token CSS | Hex | Uso |
|---|---|---|
| `--bg` | `#F5F2EB` | Fondo principal · cream cálido |
| `--bg-warm` | `#EDE7D9` | Fondos secundarios cálidos |
| `--surface` | `#FFFFFF` | Tarjetas, modales |
| `--text` | `#2A2E2A` | Texto principal · casi negro con tinte verde |
| `--text-muted` | `#5C645B` | Texto secundario |
| `--accent` | `#5E6E5B` | Sage profundo · botones primarios, links, marca |
| `--accent-dark` | `#424E40` | Hover de sage |
| `--warm` | `#B5683C` | Terracota mexicana · acentos editoriales, CTAs cálidos |

### Colores semánticos

| Token CSS | Hex | Uso |
|---|---|---|
| `--success` | `#2F6F3E` | Verificada, aprobada |
| `--warning` | `#A77514` | Pendiente, atención |
| `--danger` | `#9C342B` | Rechazada, error, reportada |

### Reglas

- El **sage** es el color de identidad. Aparece siempre.
- El **terracota** es para **un solo elemento por pantalla** (el "punto focal" cálido). Si lo usas en todos lados pierde fuerza.
- Los colores de las **categorías** (constructora terracota, desarrolladora azul, etc.) son INDEPENDIENTES de la paleta de marca — funcionan como datos para distinguir los pines del mapa, no como branding.

---

## 4. Tipografía

### Familias

| Familia | Rol | Pesos |
|---|---|---|
| **Galeano Grotesque** | Workhorse: body, UI, headlines, todo el día | 400, 500, 600, 700 |
| **Mikro** | Display / micro-tipografía: eyebrows, números destacados, acentos editoriales | 400, 700 |
| Fallbacks | Inter (sans), Fraunces (display) — Google Fonts. Solo si los .woff2 licenciados no están en `/fonts/` | — |

### Jerarquía recomendada

| Nivel | Familia | Tamaño | Peso | Tracking |
|---|---|---|---|---|
| Display (hero) | Mikro / Fraunces | 56-78 px | 500 | -0.025em |
| H1 ficha / modal | Mikro / Fraunces | 26-32 px | 500 | -0.020em |
| H2 sección | Galeano Grotesque | 20-22 px | 600 | -0.010em |
| H3 / eyebrow | Galeano Grotesque | 11-13 px | 700 | 0.10em UPPERCASE |
| Body | Galeano Grotesque | 14-15 px | 400 | normal |
| Caption / label | Galeano Grotesque | 11-12 px | 500 | 0.05em |

### Reglas

- **Nunca** usar Mikro o serif para body largo.
- **Nunca** mezclar más de 2 pesos en un mismo párrafo.
- Los números (estadísticas, conteos, precios) van en **Mikro** o tabular Galeano.
- Sin "All Caps" en headings largos. Solo eyebrows y labels chicos.

---

## 5. Voz y tono

### Cómo hablamos

| Sí | No |
|---|---|
| "El sector construcción mexicano, en un mapa de confianza." | "Revolutionizing the construction tech space 🚀" |
| "Te avisaremos cuando abramos un cupo." | "¡¡¡Únete ya!!! No te lo pierdas!" |
| "Tu solicitud está en revisión." | "Espera mientras nuestros algoritmos te procesan." |
| "Empresas verificadas con documentos legales." | "Empresas curadas con IA blockchain." |
| "Antes de contratar, pide la CSF." | "Pro tips para hackear el éxito." |

### Principios

1. **Concreto antes que vago.** "60 empresas verificadas en CDMX" > "Comunidad enorme".
2. **Honesto antes que vendedor.** Decimos "gratuito durante la beta, después membresía" desde el inicio, no lo escondemos.
3. **Editorial antes que startup.** Escribimos como una revista del sector, no como un blog SEO.
4. **Mexicano sin ser folclórico.** Referenciamos el oficio mexicano sin caer en cliché de sombreros, mariachis, ni colores de bandera.
5. **Respetuoso del tiempo del lector.** Textos cortos, sin "🎉🚀🔥" como signos de puntuación.

---

## 6. Aplicaciones

### Sitio web

Ya implementado. Cualquier color o tipografía que aparezca en el sitio
viene de los tokens CSS en `styles.css` — si vas a hacer un cambio
visual, **edita el token, no hard-codees**.

### Favicon

`favicon.svg` — fondo sage con arco cream. SVG vectorial, escala a cualquier tamaño.

### Open Graph image

`og-image.html` — abre en navegador, exporta como PNG 1200×630, súbelo
como `og-image.png` a la raíz del sitio. Ya está referenciado en los
meta tags del `index.html`.

### Correo electrónico

| Plantilla | Uso |
|---|---|
| `emails/email-otp.html` | Código OTP. Pegar en Supabase → Auth → Templates → Magic Link |
| `emails/email-bienvenida-waitlist.html` | Bienvenida cuando inviltas a alguien de la waitlist. Manual por Gmail |
| `emails/firma-correo.html` | Firma personal de Rolo / equipo en Gmail Settings |

### Documentos (contratos, propuestas)

Usa la **plantilla de contrato** ya creada en `contrato-plantilla.html`
como referencia visual: serif Georgia para títulos, sans para body,
encabezados sage, marcas de campo en cream.

### Redes sociales

- **LinkedIn cover:** usa el OG image como base, ajusta a 1584×396 px.
- **Instagram bio:** usa el ícono solo en círculo cream sobre sage.
- **WhatsApp Business:** misma foto de perfil que el favicon.

---

## 7. Lo que NO somos

- **No somos un marketplace.** No facilitamos transacciones. Conectamos.
- **No somos LinkedIn.** No tratamos esto como red social personal — es red profesional vertical.
- **No somos Yelp.** No exponemos reseñas anónimas. Reputación verificada.
- **No somos una agencia.** No vendemos servicios — somos infraestructura del gremio.

---

## 8. Archivos en este proyecto

```
construye-mexico/
├── assets/
│   ├── logo-icon.svg          ← Ícono solo
│   └── logo-horizontal.svg    ← Logo + wordmark
├── emails/
│   ├── email-otp.html         ← Plantilla OTP de Supabase
│   ├── email-bienvenida-waitlist.html
│   └── firma-correo.html      ← Firma Gmail
├── fonts/
│   └── README.md              ← Cómo subir Galeano + Mikro
├── favicon.svg
├── og-image.html              ← Generador de social card
├── contrato-plantilla.html    ← Plantilla de contrato descargable
└── BRAND-GUIDELINES.md        ← Este archivo
```

---

**Última edición:** Junio 2026
**Mantenido por:** Rodrigo López · construyemexico.com