Tu próximo paso
Aa Bb Cc Ññ
á é í ó ú ü ¿? ¡!
Pesos 400, 500, 600, 700 y 800. Esta muestra usa Inter Tight de forma explícita para que puedas reconocerla, incluso en un Mac.
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 piezas de interfaz para Nivelación y adaptación UV, Bienvenidos a la UV y las demás experiencias de este proyecto.
Una conversación como punto de partida
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 para destacar sobre navy o teal. El color ayuda a leer la jerarquía.
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.
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 sostiene la identidad. Teal indica interacción. Lima concentra el énfasis. Los fondos claros y los neutros fríos dejan descansar la lectura.
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
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: blanco #FFFFFF, alterna #F2F5F7 e inversa #002E38. 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
Acción sobre navy
#B8E412 / #003C58
7,91: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.
04 · Tipografía
Leer sin esfuerzo
Inter Tight aporta una voz compacta y directa. Space Mono ordena cifras y códigos. En la interfaz de iPhone y Mac, la pila del sistema prioriza la fuente nativa.
0123456789
09:30 · 60%
Pesos 400 y 700. Horarios, porcentajes y códigos donde importa comparar los caracteres.
Una escala compartida
Las muestras siguientes utilizan la pila de la interfaz: fuente nativa Apple, Inter Tight y respaldo del sistema. Las jerarquías se conservan; 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 2026
- Antetítulo600 · 11 px · espaciado 0,10 em
- Facultad de Arquitectura
- DatoSpace Mono 700 · 15 px
- 20 ene — 06 mar
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. 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
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
- 360 ms
- Cambio de avance
Una curva compartida: cubic-bezier(.32, .72, 0, 1)
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
Del sistema al sitio
Extractos de la web de Nivelación y adaptación UV: portada, un módulo de Arquitectura y una respuesta frecuente. La identidad se reconoce en contenidos distintos.
Nivelación y adaptación UV
Parte con más herramientas
Revisa los módulos asociados a tu carrera y conoce recursos para desenvolverte mejor en la vida universitaria.
La tarjeta agrupa icono, título y descripción. El color no compite con la información del módulo.
La pregunta organiza la lectura; el teal permite reconocer los enlaces dentro de la respuesta.
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.
20 ene — 06 mar
Las fechas y las cifras tienen una fuente y una edición. En una muestra de interfaz, los datos ficticios se reconocen como ejemplos.
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