JohannVelazquez
5004269664
- REGISTRO #22–28: kickoff (1-jul), manual de marca recibido, coordinación y sesión de Discovery del proceso de facturación (6-jul), envío de la propuesta v1.2 y seguimiento del token de BIND (solicitado por Erika). - Cambios de reglas del 6-jul: lista blanca eliminada (recordatorios a todos) y cotización BIND obligatoria como inicio del flujo. - marca/: tokens oficiales destilados del manual de imagen corporativa. - Plan de actividades actualizado con responsables reales post-kickoff. - Fuentes: transcripts de kickoff y Discovery, WhatsApps de Erika, manual de imagen corporativa (PDF).
63 lines
3.1 KiB
Markdown
63 lines
3.1 KiB
Markdown
# Marca Balam — tokens de diseño
|
|
|
|
> Destilado del **Manual de Imagen Corporativa** que Pedro envió el 1-jul-2026 (evidencia: [`../fuentes/manual de imagen corporativa - Balam.pdf`](../fuentes/manual%20de%20imagen%20corporativa%20-%20Balam.pdf)). Es la fuente oficial de color, tipografía y uso del logo para el **prototipo visual navegable** (Etapa 0) y cualquier UI/entregable de la plataforma.
|
|
>
|
|
> ⚠️ Ojo: el ámbar de la **propuesta PDF** (`#C0892F`) es un acento editorial de Johann, **no** el amarillo de marca. Para la plataforma y prototipos, usar los tokens de abajo.
|
|
|
|
## Colores corporativos
|
|
|
|
| Token | Nombre | HEX | RGB | Uso |
|
|
|---|---|---|---|---|
|
|
| `--balam-amarillo` | Amarillo | `#F7BD0C` | 245, 189, 12 | Color primario de marca. Logo, acentos, botones, énfasis. |
|
|
| `--balam-cafe` | Café | `#331F0E` | 51, 31, 14 | Fondo oscuro de marca, texto sobre claro, superficies. |
|
|
| `--balam-blanco` | Blanco | `#FFFFFF` | 255, 255, 255 | Fondo claro, texto sobre café. |
|
|
|
|
Complementos que aparecen en el manual (sin HEX oficial, apoyo): un **gris neutro** (~`#5C5C5C`) y un **degradado café→amarillo** para fondos/decoración.
|
|
|
|
```css
|
|
:root {
|
|
--balam-amarillo: #F7BD0C;
|
|
--balam-cafe: #331F0E;
|
|
--balam-blanco: #FFFFFF;
|
|
--balam-gris: #5C5C5C; /* neutro de apoyo, sin HEX oficial */
|
|
}
|
|
```
|
|
|
|
**Combinaciones del manual:** logo amarillo sobre café (versión principal), café sobre amarillo, y monocromático blanco/negro. Mantener contraste alto (café ↔ amarillo/blanco).
|
|
|
|
## Tipografía
|
|
|
|
**Familia única: Poppins** (sans-serif geométrica). Pesos disponibles: Light · Regular · Medium · SemiBold · Bold · ExtraBold.
|
|
|
|
Jerarquía del manual (px a escala de presentación — reescalar a `rem` en web):
|
|
|
|
| Nivel | Peso | Tamaño manual |
|
|
|---|---|---|
|
|
| Títulos | SemiBold | 75 px |
|
|
| Subtítulos | Regular | 46 px |
|
|
| Párrafo | Light | 28 px |
|
|
| Botones | Light | 28 px |
|
|
|
|
```css
|
|
/* Poppins vía Google Fonts o self-hosted */
|
|
body { font-family: "Poppins", system-ui, sans-serif; }
|
|
h1 { font-weight: 600; } /* SemiBold */
|
|
h2 { font-weight: 400; } /* Regular */
|
|
p { font-weight: 300; } /* Light */
|
|
```
|
|
|
|
## Logo
|
|
|
|
- **Símbolo:** felino (jaguar) en avance + wordmark `BALAM` con bajada `TALENTO ESTRATÉGICO`.
|
|
- **Versiones:** (1) principal a color sobre café · (2) monocromática a color · (3) blanco y negro. Elegir según fondo para máximo contraste.
|
|
- **Área de restricción:** margen libre alrededor del logo ≈ la altura de la contramarca ("X"), sin que texto/imágenes/bordes lo invadan.
|
|
- **Tamaño óptimo / mínimos:** 484 px, 352 px y **207 px como mínimo** de ancho para legibilidad.
|
|
- **Co-branding:** Balam **siempre en primer lugar**, respetando la distancia definida frente al logo del partner.
|
|
|
|
## Aplicación al prototipo (Etapa 0)
|
|
|
|
- Tema oscuro de marca: fondo `--balam-cafe`, texto `--balam-blanco`, acción/acento `--balam-amarillo`.
|
|
- Tema claro: fondo `--balam-blanco`, texto `--balam-cafe`, acento `--balam-amarillo`.
|
|
- Botones primarios en amarillo con texto café; tipografía Poppins en toda la UI.
|
|
- Logo en la versión que corresponda al fondo (principal sobre café; b/n cuando el color no aplique).
|