v1.0 · Mayo 2026

# Sistema de Diseño UNACH

Lineamientos de identidad visual e interfaz para sistemas institucionales de la Universidad Adventista de Chile. Cubre marca, color, tipografía, espaciado, componentes y reglas de uso obligatorias para todo nuevo desarrollo.

Marca

## Logo institucional

El símbolo de la "A" con tres líneas representa el mensaje de los tres ángeles y la identidad adventista. Tres variantes: vertical (master), horizontal (default para navbars), y horizontal con divisor (para sub-marcas).

Horizontal · sobre claro
Sobre Adventist Blue
Símbolo

### Qué no hacer

No aplicar degradados ni texturas
No rotar, comprimir ni estirar
No reemplazar la tipografía del lockup
No usar otros colores que los del manual
No invertir la posición A↔texto
No reducir bajo 28 px (símbolo) / 85 px (lockup)

Color

## Paleta institucional

Paleta DTI para sistemas digitales. Cada color principal tiene una escala de 5 tonos (100–500) anclada al valor 300 (base).

### Azul Institucional · Primary

100
#CCE7FE
200
#99CFFC
300 · base
#0095F8
400
#007AC9
500
#005F9A

### Azul Medio · Secondary

100
#D1E0F4
200
#8FB6E5
300 · base
#1976D2
400
#145FA8
500
#0F477E

### Turquesa · Auxiliar

100
#CCEEF3
200
#80D6E0
300 · base
#00ACC1
400
#008A9B
500
#006774

### Neutrales

white
#FFFFFF
50
#FAFAFA
100
#F5F5F5
200
#E5E5E5
300
#CFCFCF
400
#9A9A9A
500
#6E6E6E
600 · text
#474747
700
#2E2E2E
800
#1C1C1C
900
#0F0F0F

### Semánticos

Error
Validaciones críticas y mensajes de error.#E27474
Éxito
Confirmaciones y notificaciones positivas.#6AC86F
Alerta
Advertencias y estados intermedios.#D6A40B
Info
Notas contextuales y mensajes neutros.#1976D2

Tipografía

## Familias y escala

Prompt es la familia oficial UNACH para títulos, encabezados y cuerpo. NovaMono se reserva para datos técnicos y fragmentos de código. Máximo dos familias por pantalla.

Prompt Display + Body
Google Fonts
300 · 400 · 500 · 600 · 700
Aa Bb Cc 0123
Universidad · Acreditación · Vinculación con el medio
NovaMono Código · datos técnicos
Bundled local TTF
400
Aa Bb 0123
--color-primary: #0095F8;

### Escala display

H1 Universidad Adventista de Chile 40 / 600
H2 Encabezado de sección principal 34 / 600
H3 Título de tarjeta o formulario 28 / 600
H4 Sub-encabezado de bloque 24 / 500
H5 Etiqueta de grupo 20 / 500

### Escala body + mono

B1 Texto de cuerpo principal — Prompt 16 px, line-height 1.5. Ancho máximo 75 ch para mantener legibilidad.16 / 400
B2 Descripciones y ayudas contextuales secundarias.14 / 400
B3 ETIQUETA DE FORMULARIO 12 / 500
B4 Notas al pie · textos auxiliares pequeños 10 / 400
B5 const api = "https://sigae.unach.cl/v1"8 / mono

Espaciado

## Sistema base 4

Todos los márgenes, paddings y gaps deben ser múltiplos de 4 px. Esto garantiza consistencia visual entre sistemas distintos del ecosistema institucional.

--space-xs 4 px
Icono ↔ texto, gap mínimo
--space-sm 8 px
Padding interno de chips, badges
--space-md 16 px
Padding de tarjetas, separación de campos
--space-lg 24 px
Separación entre secciones de formulario
--space-xl 32 px
Margen entre bloques principales
--space-2xl 48 px
Separación de secciones de página
--space-3xl 64 px
Hero, separación entre vistas

Geometría

## Radios de esquina

Default 8 px (cards, inputs, buttons). 12 px para modales y bottom-sheets. Pill para badges y avatares.

--radius-none
0
--radius-xs
2 px
--radius-sm
4 px
--radius-md
8 px · default
--radius-lg
12 px
--radius-xl
16 px
--radius-pill
∞

Profundidad

## Elevación

Sombras suaves y cortas. No usar drop shadows agresivos — el lenguaje visual institucional es sobrio, no efectista.

flat
1 px border
--shadow-sm
subtle lift
--shadow-md
cards · default
--shadow-lg
menus · popovers
--shadow-xl
modal · sheet

Componente

## Botones

Altura mínima 40 px, padding horizontal 16 px, radio 8 px. Todo botón interactivo debe documentar Default · Hover · Pressed · Disabled · Loading.

Default Hover Pressed Disabled Loading Primary
Secondary
Danger

Componente

## Campos de texto

Material Outlined como base. Altura 40 px, radio 8 px. Etiqueta sobre el campo, helper text debajo, mensajes de error en rojo institucional.

RUTDefault
RUTFocus
RUTFormato inválido
RUTDisabled
RUTRead-only
RUTVerificado

Componente

## Controles de formulario

Área táctil accesible (mínimo 24 × 24 px de hit-target), color primario al activarse, estados explícitos.

Checkbox
Unchecked ✓Checked —Indeterminate Disabled
Radio
Presencial Online Disabled
Switch
Notif. email Modo oscuro SMS

Componente

## Alertas y badges

Iconografía + color semántico + texto. Los colores de estado nunca son decorativos.

✓
Solicitud enviada.Bienestar Estudiantil revisará tu caso en 48 horas.
!
No se pudo guardar.Revisa los campos marcados en rojo.
!
Tu sesión está por expirar.Guarda tus cambios antes de continuar.
i
Mantención programada.El sistema estará no disponible el sábado 21/06 entre 02:00 y 04:00.
Matriculado Pagado Pendiente Vencido Borrador Becado En revisión

Componente

## Tarjetas

Tres estados: estática (border 1 px), elevada (sombra suave), seleccionada (border 2 px primary).

#### Estática

Acreditación CNA · vigente hasta 2028

5 años

#### Elevada

Matrículas procesadas hoy

128

#### Seleccionada

Pedagogía en Educación Física

42

Componente

## Tabla de datos

Header gris claro, mayúsculas pequeñas trackeadas, hover row sutil, divisores horizontales únicamente.

Estudiante | Programa | Estado | Arancel | Último acceso
--- | --- | --- | --- | ---
Daniela Ruiz Morales 20.418.392-7 | Pedagogía en Educación Física | Activo | Al día | 14/05/2026
Pedro Caro Vergara 19.882.103-K | Pedagogía en Educación Física | Activo | Pendiente | 14/05/2026
Antonia Jara Sandoval 19.667.881-1 | Pedagogía en Inglés | Egresado | Al día | 02/03/2026
Matías Pino Larenas 20.998.121-4 | Agronomía | Suspendido | Vencido | 08/04/2026

Recurso

## Iconografía · Solar

Solar Icon Set en su variante Linear como default. Variante Bold reservada para el ítem activo de la navegación. Tamaños 16 / 20 / 24 / 32 / 48 px.

### Tamaños

16 · xs
20 · sm
24 · md
32 · lg
48 · xl

### Sets representativos

home-2
users-group
book-2
calendar
card
medal-ribbons-star
chart-2
settings
magnifer
bell
check-circle
danger-triangle
info-circle
document-text
inbox
user-circle

### Variantes

linear · default
bold · activo
broken
outline

Implementación

## Tokens CSS expuestos

Variables disponibles en `colors_and_type.css`. Importá el archivo y usá las variables semánticas — nunca hex directos en tus componentes.

### Color

`--color-primary` Azul institucional
`--color-primary-hover` Hover state
`--color-primary-press` Active state
`--color-on-primary` Texto sobre primary
`--color-secondary` Azul medio
`--color-accent` Turquesa auxiliar
`--color-surface` Tarjetas, paneles
`--color-surface-2` Sutil contraste
`--color-background` Fondo de página
`--color-on-surface` Cuerpo de texto
`--color-on-surface-strong` Titulares
`--color-on-surface-muted` Texto secundario
`--color-border` Bordes claros
`--color-divider` Líneas separadoras
`--color-error`#E27474
`--color-success`#6AC86F
`--color-warning`#D6A40B
`--color-info`#1976D2
`--color-focus-ring` Anillo de foco 3 px
`--color-overlay` Backdrop modal
`--brand-adventist-blue`#003366 · papelera
`--brand-azul-claro`#0072CE · papelera
`--brand-azul-marino`#041E42 · papelera

### Tipografía, espaciado y geometría

`--font-display` Prompt
`--font-body` Prompt → Inter → Roboto
`--font-mono` NovaMono
`--fs-h1 … --fs-b5` 40 · 34 · 28 · 24 · 20 · 16 · 14 · 12 · 10 · 8
`--fw-light/regular/medium/semibold/bold` 300 · 400 · 500 · 600 · 700
`--lh-tight/snug/normal/relaxed` 1.2 · 1.35 · 1.5 · 1.65
`--measure-max` 75 ch
`--space-xs … --space-4xl` 4 · 8 · 16 · 24 · 32 · 48 · 64 · 96
`--radius-xs … --radius-pill` 2 · 4 · 8 · 12 · 16 · ∞
`--shadow-sm … --shadow-xl` 4 niveles + focus + inset
`--ease-standard` cubic-bezier(0.2,0,0,1)
`--duration-fast/base/slow` 120 · 200 · 320 ms
`--container-max` 1440 px