Navy para actuar
Portada, acceso al aula y siguiente paso. Una acción principal clara, en blanco, con texto navy.
--uv-deep · #003C58
Nivelación y adaptación UV
Identidad en pantalla
Llegar a la universidad trae preguntas nuevas. La identidad de Nivelación UV parte de ahí: una conversación, información que se entiende y señales que ayudan a encontrar lo importante.
Marca, color, tipografía y escenas de la vida universitaria forman un lenguaje compartido. La identidad se aplica a la orientación, el contenido y el acceso al aula.
Una ruta visible
Tu próximo paso
- Encuentra tu carrera
La orientación toma el primer plano
- Conoce tus módulos
El contenido se lee sobre claro
- Ingresa al aula
Una acción principal reconocible
01 · Concepto
Cercanía con estructura
Lo joven está en la claridad, el ritmo y la respuesta de la interfaz. La información académica sigue siendo la protagonista.
- La burbuja acerca
- Introduce la idea de orientación. La N mantiene reconocible el nombre de Nivelación.
- Los bloques ordenan
- La construcción simple de la marca se repite en iconos, tarjetas y listas. Cada pieza puede reconocerse sin llamar la atención por separado.
- El acento señala
- Teal para la interacción en fondos claros; lima en detalles pequeños sobre navy o teal. La energía del color se concentra en trazos y señales.
Este es el sistema gráfico del proyecto, nacido en Nivelación y adaptación UV. Puede acompañar otros contenidos, como Bienvenidos a la UV, conservando el nombre propio de cada experiencia. No reemplaza la identidad institucional de la Universidad de Valparaíso.
02 · Marca
La misma firma
El isotipo y el nombre funcionan juntos o por separado. Estas son las variantes del sistema: sus proporciones y colores se mantienen, también al cambiar de fondo.
Respaldo institucional
El logo oficial UV conserva unidos el escudo y su nombre. Lo acompaña la firma horizontal de Nivelación UV, con la misma proporción entre isotipo y nombre que en las variantes de marca. Cada marca mantiene su espacio propio.
Conservar proporciones, azul institucional y área autónoma de 2x, donde x es la altura de la «o» del logo. Escalar la firma de Nivelación como una unidad, sin reducir el isotipo por separado. En móvil, disponer las marcas en filas antes de reducir su legibilidad. Sobre fondo oscuro, usar el original oficial blanco y la firma de Nivelación en negativo.
Uso habitual en web
Sobre navy u oscuro
Reproducción simplificada
Reproducción sobre oscuro
Espacio para respirar
Deja libre, en cada lado, un espacio equivalente a un cuarto de la altura de la burbuja. El resguardo se mide desde el dibujo, no desde el borde del archivo.
Resguardo = h / 4
No estires la marca, no recompongas la firma y no apliques efectos sobre el isotipo.
Tamaño de uso
Mínimo 28 px en web; 24 px solo en el pie de página. Bajo 24 px, utiliza la versión de una tinta.
40 px28 px24 px20 px · mono
Ver variantes complementarias
Placa de curvatura continua con degradado y brillo superior
La misma geometría, sin degradado
El archivo del kit usa el isotipo sin placa
En encabezados y contenido web se utiliza el isotipo. La placa pertenece a las piezas de aplicación; no se añade a la marca dentro de la página.
03 · Color
Cada color trabaja
Navy destaca acceso y siguiente paso. Teal da peso a bienvenida, orientación y ayuda. El lima conserva su energía en acentos pequeños; las superficies amplias quedan en navy, teal o neutros.
Navy UV
#003C58Fondos de marca y acción principal
Navy profundo
#002E38Contrapunto oscuro y títulos
Teal
#06717EEnlaces, selección y acento en claro
Lima
#B8E412Acento reservado para navy o teal
La energía en detalles
Lima #B8E412 exclusivamente en el remate de la marca, pequeños trazos de iconos y señales puntuales sobre navy o teal. Nunca en fondos, tarjetas, fotografías teñidas ni rellenos de botones.
Superficie limitada
Referencia de diseño: hasta un 2 % del área visible de cada pantalla, sin sumar varios acentos hasta formar una mancha continua. Sin párrafos, titulares completos, destellos ni animaciones repetitivas en lima.
El límite de superficie es una pauta de composición; no certifica tolerancia individual a brillo o saturación. El contraste se verifica por separado.
Ver paleta completa
Navy
900
#00202F800
#002B40700
#003049600
#003C58500
#0B5074400
#2C6D91300
#6B9DB5200
#AECBD9100
#D9E7EE050
#EEF4F7Teal
700
#044C55600
#055C67500
#06717E400
#2A8F9B300
#6BB6BF200
#A9D7DC100
#D7EEF0050
#EDF8F9Neutros fríos
950
#0B1417900
#131E23800
#1F2C32700
#39494F600
#5B6B72500
#7D8D94400
#A3B1B7300
#C7D1D5200
#E0E7EA100
#EFF3F5050
#F6F8F9Colores de estado
El estado se expresa con palabras e iconos además del color. Los fondos suaves acompañan las etiquetas; un color de estado no sirve automáticamente como color de texto.
Coral
#FF6B57Fondo suave #FFE3DESol
#FFB020Fondo suave #FFF0D1Éxito
#0F9D63Fondo suave #E2F5ECAlerta de error
#E03B2FFondo suave #FDEAE8Superficies: navy #003C58, teal #06717E, teal claro #EDF8F9, alterna #F2F5F7 y blanco #FFFFFF. Los degradados del sistema se reservan para piezas de marca: máximo uno por pantalla.
Combinaciones legibles
Aa
Texto principal
#1F2C32 / #FFFFFF
14,34:1Aa
Texto secundario
#5B6B72 / #FFFFFF
5,54:1Aa
Enlace sobre blanco
#06717E / #FFFFFF
5,72:1Aa
Lectura sobre navy
#FFFFFF / #003C58
11,75:1Aa
Lectura sobre teal
#FFFFFF / #06717E
5,72:1Aa
Apoyo sobre teal claro
#5B6B72 / #EDF8F9
5,12:1Aa
Botón claro sobre color
#003C58 / #FFFFFF
11,75:1Relaciones calculadas para estas parejas de color. Para texto de tamaño normal se utiliza un contraste mínimo de 4,5:1. El gris #7D8D94 alcanza 3,44:1 sobre blanco: se conserva en la paleta, pero no se utiliza aquí para texto pequeño. Lima nunca va sobre blanco ni sobre otros fondos claros.
03b · Jerarquía
Lo importante destaca
Navy y teal destacan los bloques principales; las superficies claras facilitan la lectura. El color identifica la función de cada bloque y acompaña el título, el espacio y las acciones.
Teal para acompañar
Bienvenida, encabezado del catálogo y cierre de ayuda. Texto y antetítulos blancos; acento lima solo en pequeños trazos.
--uv-teal · #06717EClaro para comprender
Programa, módulos y respuestas. Teal claro evita una sucesión de bloques blancos y conserva la lectura.
--surface-tint · #EDF8F9Blanco con propósito
Tarjetas dentro de una sección de color, listas, controles y respuestas extensas. Cada superficie clara recupera sus propios colores de texto y foco.
--surface-card · #FFFFFFPortada navyBienvenida tealPrograma tintadoCatálogo teal + claroAcceso navyAyuda teal
Primero una promesa o instrucción, después el contenido de apoyo y finalmente una acción siguiente. La jerarquía también depende del título, el espacio y el estado del control; el color siempre se acompaña de texto.
04 · Tipografía
Leer sin esfuerzo
Inter Tight aporta una voz compacta y directa. Space Mono ordena cifras y códigos. Inter Tight es la fuente principal de la interfaz en todas las plataformas.
Tu próximo paso
Aa Bb Cc Ññ
á é í ó ú ü ¿? ¡!
Pesos 400, 500, 600, 700 y 800. La misma familia se utiliza en títulos, párrafos, navegación y controles, en todas las plataformas.
0123456789
09:30 · 60%
Pesos 400 y 700. Horarios, porcentajes y códigos donde importa comparar los caracteres.
Una escala compartida
Inter Tight se incluye con el sitio en formato WOFF2. Las fuentes nativas del sistema quedan como respaldo durante la carga o si esta falla. La escala se comparte entre dispositivos; los títulos se ajustan en pantallas pequeñas.
- Portada800 · 56 px / 1,02
38 px en pantalla pequeña - Parte aquí
- Título700 · 34 px / 1,12
27 px en pantalla pequeña - Conoce el programa
- Sección700 · 24 px / 1,2
- Tu ruta al aula
- Tarjeta700 · 19 px / 1,2
- Estrategias de aprendizaje
- Cuerpo400 · 17 px / 27 px
- Revisa los módulos asociados a tu carrera y conoce recursos para desenvolverte mejor en la vida universitaria.
- Apoyo500 · 15 px / 23 px
- Aprendizaje y organización
- Nota500 · 13 px / 20 px
- Nivelación y adaptación UV · Edición 2027
- Antetítulo600 · 13 px / 18 px · espaciado 0,10 em
- Facultad de Arquitectura
- DatoSpace Mono 700 · 15 px
- 01 · 02 · 03
04b · Propuesta gráfica
La vida entre pares
Espacios de UV y personajes ficticios acompañan situaciones de llegada, conversación y aprendizaje. Las escenas aportan contexto sin competir con la información.
Las imágenes son propuestas generadas con IA a partir de referencias arquitectónicas de UV y personajes ficticios. Se mantienen los encuadres completos y la variedad de prendas, gestos y apariencias.
05 · Iconos
Una familia reconocible
25 piezas construidas con barras, círculos y arcos. El trazo de 2,2 en la grilla de 24 conserva la relación con el trazo de 11 en la grilla de 120 del isotipo.
Navegación
Programa
Acción
Estado
El trazo principal hereda el color del texto. El acento cambia de teal a lima sobre navy o teal; en botones claros vuelve a teal. Se mantienen las etiquetas para que el icono no tenga que explicarlo todo.
20 px en botones y texto; 24 px de base; 28 px en tarjetas; 32–48 px en encabezados. El grosor se ajusta a 2,4 desde 32 px y a 2,6 desde 48 px.
06 · Interfaz
Piezas para componer
Una acción principal, estados que se entienden y bloques que agrupan lo relacionado. La variedad está en el contenido; las piezas mantienen su forma.
Acciones y tamaños
48 px por defecto, 40 px en la variante compacta y la navegación, 44 px para botones de icono. La variante grande mide 56 px.
Prueba los botones: cada uno confirma su respuesta dentro de esta muestra.
40 px
44 × 44 px
56 px
Las respuestas de esta muestra aparecen aquí
Contexto y estados
Las etiquetas describen; no son botones. El estado siempre lleva un texto, aunque tenga un color o un icono propio.
ArquitecturaNivelación UVAprendizaje
Sin iniciarInformaciónDisponible
Tarjetas y listas
Tarjeta con elevación, tarjeta plana y tarjeta de marca. La lista agrupada reúne información breve en un solo bloque.
Conoce tus módulos
Muestra de tarjeta con elevación
Revisa los plazos
Muestra de tarjeta plana
Encuentra apoyo
Muestra de tarjeta de marca
Elige tu carreraBusca la facultad a la que ingresarás
Conoce tus módulosRevisa qué aprenderás en cada uno
Estados en cada fondo
El botón principal cambia con su superficie: navy sobre claro, blanco sobre navy o teal. El foco es teal sobre claro y blanco sobre oscuro. Las tarjetas claras anidadas restablecen texto oscuro y acento teal.
Contraste dentro del bloque
Un contexto propio
Una tarjeta clara no hereda el texto blanco ni el lima de la sección exterior.
Organiza tu estudio
El contenido recupera sus colores de lectura y el foco teal.
Prueba una acción de esta tarjeta
Ver forma y espacio
Radios
6 px
10 px
14 px
18 px
24 px
32 px
Píldora
Elevación
Sombras verticales, teñidas de navy. La elevación acompaña la función de la pieza.
Mínima
Tarjeta
Elevada
Superpuesta
Acción principal
Espaciado
Escala de base 4, en píxeles. La columna del kit llega a 1120 px y sus márgenes laterales se adaptan de 40 a 24 px.
4
8
12
16
20
24
28
32
40
48
64
80
07 · Movimiento
Responder con suavidad
El movimiento hace perceptible una acción: presionar, abrir o actualizar un dato. La lectura no necesita esperar una animación.
- 90 ms
- Respuesta al presionar
- 160 ms
- Cambio al pasar el puntero
- 240 ms
- Transición habitual
- 240 ms
- Cambio de avance
Interacciones de hasta 240 ms. Los cambios de color usan ease; despliegues, la curva del kit cubic-bezier(.32, .72, 0, 1). Con teclado o movimiento reducido, el cambio es inmediato.
Avance visible
Barra y anillo son piezas opcionales del kit. Este ejemplo usa cinco actividades ficticias; no representa un seguimiento académico.
40%de la muestra
2 de 5
La cifra, la barra y el anillo muestran el mismo dato
Muestra inicial: 2 de 5 actividades
Abrir un detalle
La apertura muestra información adicional; el cierre devuelve el espacio a la lectura. Puedes cambiar de dirección antes de que termine.
¿Cómo se siente el despliegue?
La información aparece junto a la pregunta. El indicador acompaña el cambio y el resto del contenido se acomoda sin saltos.
Prueba con el puntero o con el teclado. Si tu dispositivo pide reducir el movimiento, el cambio es inmediato.
La interfaz responde al presionar, pero no aumenta de tamaño al pasar el puntero. Los desenfoques quedan reservados para la navegación que pasa sobre el contenido.
08 · Aplicaciones
Una pauta compartida
El recorrido conecta la bienvenida, la preparación por carrera y la ayuda. Estas tres páginas permiten ver el lenguaje gráfico aplicado al contenido.
Parte con más herramientas
La portada presenta el programa; el catálogo guía hacia la carrera y el acceso al aula.
Conoce tus módulos
La introducción orienta y las tarjetas claras ayudan a leer los aprendizajes de cada módulo.
Resuelve tus dudas
Las respuestas se agrupan por acceso, participación y soporte, con ayuda directa al cierre.
09 · Voz y uso
Hablar con claridad
Español de Chile, trato de tú, frases breves. La cercanía está en ayudar: decir qué puedes hacer y qué vas a encontrar.
Revisa tus módulos
Verbo primero y pocas palabras. Un enlace debe anticipar el contenido al que lleva.
Nivelación y adaptación UV
Nombre completo en lo institucional. “Nivelación UV” cuando el espacio es acotado.
Revisa que escribiste tu RUT sin puntos
Una indicación útil frente a una dificultad. Evita mensajes que solo declaren un error.
Fechas por confirmar
Las fechas y las cifras corresponden a una edición concreta. El calendario se comunica cuando la Universidad lo confirma.
Criterio de uso
Reconocible en cada página
La marca, la paleta y la tipografía mantienen la identidad. Cada sitio elige las piezas que necesita: una portada informativa no requiere mostrar avance personal para pertenecer a este sistema.
El contenido cambia. El lenguaje gráfico se mantiene.
Volver al inicio