Identidad visual
Manual de marca iTeach
Esta guía recoge los principales elementos de la identidad visual de iTeach para garantizar una comunicación clara y coherente en todos los medios en la web, aplicaciones móviles y materiales de marketing e impresos.
Colores
La paleta se genera desde
src/data/brand.json, la misma fuente que valida el color
primario de style.scss en cada compilación.
Color primario. Botones, enlaces y acentos.
Texto principal y fondos de alto contraste.
Superficies oscuras y texto secundario.
Bordes, separadores y estados deshabilitados.
Fondos suaves y superficies alternas.
Fondo base y superficies de tarjeta.
Tipografía
La familia tipográfica es
Inter, con la pila de
respaldo system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif. Todos los
encabezados usan peso 600.
Pesos
Aa
400 · Regular
Texto corrido, párrafos y listas.
Aa
500 · Medium
Énfasis suave y etiquetas de formulario.
Aa
600 · Semibold
Todos los encabezados h1–h6.
Aa
700 · Bold
Eyebrow, botones y datos destacados.
Escala
Título 1
<h1>
Un solo h1 por página.
Título 2
<h2>
Secciones principales.
Título 3
<h3>
Subsecciones.
Título 4
<h4>
Bloques dentro de una tarjeta.
Título 5
<h5>
Apoyo y pies de bloque.
Título 6
<h6>
Etiquetas cortas en mayúsculas.
Superficies
Cada color de la paleta tiene un papel. Estos son los tokens que la web ya usa y que la app debe seguir; cambian solos entre modo claro y oscuro.
| Muestra | Papel | Claro | Oscuro | Utilidad | Uso |
|---|---|---|---|---|---|
| Fondo de página | #FFFFFF |
#212529 |
bg-body |
El lienzo de cada página. | |
| Superficie elevada | #F8F9FA |
#2B3034 |
bg-body-tertiary |
Tarjetas y paneles sobre el fondo. | |
| Superficie alterna | #E9ECEF |
#343A40 |
bg-body-secondary |
Bloques secundarios dentro de una tarjeta. | |
| Bordes y separadores | #DEE2E6 |
#495057 |
border |
Contornos, divisores y estados deshabilitados. | |
| Texto | Texto principal | #000000 |
#DEE2E6 |
text-body |
Cuerpo de texto y encabezados. |
| Texto | Texto secundario | #000000 75% |
#DEE2E6 75% |
text-body-secondary |
Apoyo, descripciones y metadatos. |
Esquinas
Un solo radio para todo el sistema:
0.5rem (8px),
la utilidad rounded-3 de Bootstrap.
La web ya lo aplica en sus 19 superficies. Cualquier superficie nueva, en web o en app, usa el mismo valor.
rounded-3
8px
Controles
Tamaños táctiles compartidos por la web y la app, para que un control se sienta igual en ambas superficies.
Botón principal
48px de alto
Acción primaria de la pantalla. Rojo iTeach sobre texto blanco, ancho completo en móvil.
Botón secundario
48px de alto
Alternativa de la misma jerarquía. Superficie clara con texto oscuro.
Área táctil mínima
24 × 24 px
Mínimo absoluto para cualquier control tocable, según WCAG 2.5.8.
Botones
Logotipo
Claro
Claro alternativo
Oscuro
Icono
Claro
Claro alternativo
Oscuro