Colores
Paleta oficial de PRO Universitas — navy, amarillo y celeste, más la regla de los cuatro azules, materias, feedback y neutrales.
La marca se construye sobre tres colores: navy, amarillo y celeste. El resto (materias, feedback, neutrales) son de apoyo. Haz click en cualquier muestra para copiar su hex.
Marca
Los tres colores centrales. El navy es el primario; el amarillo, el highlight; el celeste, el éxito.
Sitio principal (superficies)
Los tonos con que está construido prouniversitas.cl: navy profundo de fondo, crema y brumas para secciones claras. Nombres según su código (brand-*).
Materias PAES
Cada asignatura tiene su color. Úsalo en cards de materia, gráficos y filtros.
Feedback
Estados del sistema. El éxito usa celeste (no navy) por semántica y contraste.
Neutrales
Texto con tinte navy y superficies. Nunca gris puro.
La paleta central (valores exactos)
| Color | Hex | Uso |
|---|---|---|
| Amarillo | #FFF100 | Acento primario: CTAs, kickers, números, la pastilla "PRO". Siempre con texto navy encima; nunca como fondo de página |
| Navy institucional | #003C72 | Azul corporativo: secciones alternas del sitio, footer, texto sobre amarillo, color de Matemáticas |
| Navy profundo | #002A51 | El fondo del sitio y de todo documento institucional (hero, páginas de PDF, presentaciones) |
| Celeste / cyan | #02B0BB | Acento secundario: datos, iconos de contacto, "correcto/éxito", avatares |
| Crema | #FAF8F5 | Secciones claras y mockups de la app |
| Amarillo soft | #FFF7A8 · Celeste soft #D5F3F5 · Bruma #E6EDF3 | Softs del sitio (hover, fondos suaves sobre claro) |
La regla de los cuatro azules (no los confundas)
| Hex | Nombre | Cuándo |
|---|---|---|
#002A51 | Navy profundo | Fondo base: sitio, documentos, presentaciones, portadas. Si dudas cuál usar de fondo oscuro: este |
#003C72 | Navy institucional | Color corporativo "de día": secciones alternas, footer, texto sobre amarillo/claro, Matemáticas |
#002B50 | Navy dark (app) | Variante oscura del universo app (botones 3D, sombras). No es el fondo del sitio |
#1A2B48 | Ink | Solo texto sobre fondos claros |
Sobre #002A51 el texto va blanco con jerarquía de opacidad: títulos #FFFFFF · cuerpo
rgba(255,255,255,.72) · secundario .55 · pie .38. Los verdes/ámbar de estado en dark:
#5FE0A0 (bien/sube) y #FFD24A (a reforzar) — siempre con ▲/▼ o cifra, nunca color solo.
Reglas de contraste (críticas)
#FFF100 siempre lleva texto navy. Es la firma de la marca (la pastilla "PRO").Colores por materia
Cada asignatura PAES tiene un color fijo. Úsalo en cards de materia, gráficos, filtros y en el generador de piezas.
| Materia | Color | Hex |
|---|---|---|
| Matemáticas | Navy | #003C72 |
| Lenguaje | Morado | #7B4FE8 |
| Ciencias | Celeste | #02B0BB |
| Historia | Ámbar | #D4A017 |
En gráficos y data-viz (sobre navy)
Máximo 3 series por gráfico: cyan #02B0BB, amarillo #FFF100 y naranjo/ámbar — cada una con
forma distinta (círculo/rombo/triángulo) para no depender solo del color. Grilla
rgba(255,255,255,.10), ejes rgba(255,255,255,.5–.75), área bajo curva: gradiente del color al 35% → 0%.
Los valores viven en
tokens/tokens.json(app) ytokens/dist/web.css(sitio) — este último también público en/brand/tokens/web.css. Ver Design tokens.
El sitio principal
El look & feel de prouniversitas.cl — la expresión principal de la marca: hero cinematográfico, navy profundo, kickers amarillos, marquee, secciones y fotografía.
Tipografía
El sitio principal usa Poppins (títulos) + Inter (cuerpo). Nunito es exclusiva del universo app. Escalas, pesos y reglas.