# UNACH Design System

**Universidad Adventista de Chile · Dirección de Tecnología de la Información**
Versión 1.0 · basada en _Lineamientos de Diseño sistemas Unach_ (mayo 2026)

This folder is the working design system for any product built **for or under the domain of the Universidad Adventista de Chile (UNACH)**. It encodes the institutional rules so any agent, designer or developer can produce interfaces that are visually recognisable as part of the UNACH ecosystem.

---

## Context

UNACH is a private Adventist university in Chillán, Región de Ñuble, Chile, founded in 1990 and rooted in an earlier educational tradition that dates to 1906. The institution operates an ecosystem of academic, administrative and pastoral systems — admissions, student finance, learning management, library, alumni portal, communications, etc. — built by an internal team in the **Dirección de TI (DTI)**.

The DTI has **no shared component library yet**. Their stack of choice is:

- **Angular** + **Angular Material** with **Fuse Angular** / **MDash Angular** as admin/dashboard templates for academic and administrative back-office systems.
- **Next.js** for higher-performance public-facing web experiences (SSR, dynamic content).

This design system is the contract that keeps all of those visually consistent.

### Products represented

The institutional URL map (from unach.cl) gives a good index of what we will eventually need to brand:

| Product family | Examples (subdomains under `unach.cl`) |
|---|---|
| **Public sites** | `unach.cl`, `experienciaunach.cl` (admissions), `dircom.unach.cl`, faculty microsites |
| **Academic** | `campusvirtual.unach.cl`, `umas-docentes.unach.cl`, `umas-alumnos.unach.cl`, `biblioteca.unach.cl` |
| **Administrative** | `sigae.unach.cl`, `sacint.unach.cl`, `aagesuite.unach.cl`, `capacita.unach.cl` |
| **Research / VcM** | `vcm.unach.cl`, `dirplac.unach.cl`, `revistas.unach.cl` |

The UI kit in `ui_kits/admin/` targets the **administrative dashboard** archetype (Angular Material + Fuse-style layout) because that is the most reused pattern and the doc calls it out by name.

### Sources used to build this system

- **Primary source (digital):** `uploads/guidelines.docx` — _Lineamientos de Diseño sistemas Unach_ v1.0 (DTI, 08/05/2026, Kevin Maximiliano Arenas Cancapa). Plain-text extraction at `uploads/guidelines.txt`.
- **Print brand manual:** `uploads/ManualUso-UNACH-2020.pdf` — _Manual de Uso UNACH_ (Dirección de Comunicación y Marketing, 2020).
- **Official logo files** delivered by the user: `assets/logos/Logo-UNACH-{vertical,horizontal,divider}.png` (PNG, transparente, 4500×2884).
- **Brand context** cross-checked at `https://www.unach.cl` and `https://experienciaunach.cl`.

### Two coexisting sources of truth

| Layer | Governed by | Primary blue |
|---|---|---|
| **Digital systems** (this design system) | _Lineamientos DTI_ 2026 | `#0095F8` Azul Institucional |
| **Print / institutional identity** (papelera, fachadas, presentaciones) | _Manual de Uso_ 2020 | `#003366` Adventist Blue (Pantone 541 C) |

Cuando construyas software para UNACH, **usa la paleta DTI** (`#0095F8`, `#1976D2`, `#00ACC1`). Los colores de marca impresa quedan expuestos en `colors_and_type.css` como `--brand-adventist-blue`, `--brand-azul-claro`, `--brand-azul-marino` para superficies que deban replicar papelera (certificados institucionales, exports PDF, etc.).

---

## Index — what lives in this folder

| Path | Purpose |
|---|---|
| `README.md` | This document — content + visual + iconography fundamentals |
| `SKILL.md` | Agent-Skill front matter so this folder can be loaded as a Claude Code skill |
| `colors_and_type.css` | All design tokens: palette, semantic vars (light + dark), type scale, spacing, radii, shadows, motion |
| `fonts/` | Local TTFs for Roboto + NovaMono (extracted from the source doc) |
| `assets/` | Logos, icons and brand imagery. See `assets/logos/` for the official PNG lockups + derived white-knockout and monogram crops. |
| `preview/` | Design-system preview cards (rendered in the Design System tab) |
| `ui_kits/admin/` | High-fidelity admin dashboard kit — components, screens, click-through prototype |
| `uploads/` | Original source materials (Word doc + extracted media) |

---

## Content fundamentals

The institutional voice is **formal, institutional Spanish (Chile)** with strong service and identity overtones. It is **not** casual; it is **not** marketing-bro.

### Language & person
- **Spanish (es-CL)** everywhere, with proper diacritics (ñ, tildes). English is acceptable only for code-adjacent words (dashboard, login, dark mode) and is usually parenthesised.
- **First-person plural** when speaking from the institution: _"nuestra institución", "ofrecemos", "promovemos"_. Direct second-person only for in-app affordances aimed at the user: _"Tu perfil", "Recupera tu contraseña"_.
- Avoid _vos_; avoid colloquial chilenismos. Avoid _Usted_ as a polite form in UI copy — products use **tú** for the user.

### Tone
- **Cálido, institucional y de servicio.** Examples from the corpus: _"acompañar la formación integral"_, _"motor del progreso local"_, _"cercanía y conectividad con la comunidad"_.
- For administrative systems the tone is **concrete and procedural**: state what the user is doing or what failed. _"Credenciales incorrectas. Verifica tu RUT y contraseña."_ — not _"Algo salió mal."_
- Mission/identity touches are appropriate in public sites, **never** in internal tooling. Internal tooling should feel professional and unobtrusive.

### Casing
- **Sentence case** for buttons, menu items, page titles inside admin systems: _"Crear estudiante", "Asignar curso"_.
- **Title Case in Spanish** (only the first word + proper nouns capitalised) for marketing headings.
- **ALL CAPS** is reserved for tabular column headers and tiny tracked labels (`.b3` / `.b4` tokens). Never for paragraphs.

### Punctuation
- Use Spanish opening punctuation `¿` `¡` consistently.
- Use the proper guion largo `—` in body copy; use `:` to introduce lists.
- Dates: `dd/mm/aaaa` (e.g. `08/05/2026`).

### Emoji & emphasis
- **No emoji in UI surfaces.** Emoji is acceptable in informal communications channels (Instagram captions) but not inside the institutional systems this design system governs.
- Bold sparingly for the noun being acted on; never for whole sentences.

### Examples (drawn or paraphrased from the institutional corpus)

| Context | Good | Wrong |
|---|---|---|
| Empty state | _"Aún no has registrado solicitudes de soporte. Crea una para comenzar."_ | _"¡Vaya! No hay nada por aquí 🤔"_ |
| Error toast | _"No se pudo guardar el formulario. Revisa los campos marcados."_ | _"Error :("_ |
| Success | _"Solicitud enviada a Bienestar Estudiantil. Revisarán tu caso en 48 hr."_ | _"¡Genial! Todo listo 🎉"_ |
| Login | _"Inicia sesión con tu cuenta institucional"_ | _"¡Hola! Entra con tu mail ✨"_ |
| Page title | _"Estudiantes"_ / _"Estudiantes activos"_ | _"Lista de estudiantes registrados en el sistema"_ |

---

## Visual foundations

### Identity in one line
**Sober, institutional, Material-leaning blue.** Calm surfaces, clear hierarchy, restrained motion. The brand reads as a public institution — not as a startup.

### Brand assets

The official logo (the stylised **"A" with three angel-message ribbons** + UNACH wordmark + "Universidad Adventista de Chile" tagline) is in `assets/logos/`:

| File | Use |
|---|---|
| `Logo-UNACH-vertical.png` | Vertical lockup (4500×2884) — master, login splash, posters |
| `Logo-UNACH-horizontal.png` | Horizontal lockup — default for navbars and document headers |
| `Logo-UNACH-divider.png` | Horizontal lockup with vertical divider — use when paired with a sub-brand or system name |
| `unach-horizontal-white.png` | Knocked-out white version, for dark/blue backgrounds |
| `unach-vertical-white.png` | Knocked-out white vertical lockup |
| `unach-monogram-256.png` | Just the A symbol on transparent — sidebar, favicon, avatar |
| `unach-mark-onblue-80.png` | White A on `#0095F8` square — ready-to-use app mark |

**No alterar el logo** (sin degradados, rotaciones, otros colores, fuentes de contorno, compresión/estiramiento, inversión) — ver Manual de Uso 2020 § _Qué no hacer_. Tamaño mínimo: 28 px para el símbolo aislado; 85 px para el lockup horizontal.

### Color

- **Primary:** `#0095F8` (Azul Institucional). Used for navbar, primary buttons, link, active state, focus ring. **Cannot be substituted** in primary navigation.
- **Secondary:** `#1976D2` (Azul Medio) — supports the primary in dashboards, chart series, secondary CTAs.
- **Accent / Auxiliar:** `#00ACC1` (Turquesa) — reserved for data viz, illustrations, callouts. Never for primary buttons.
- **Background:** `#F5F5F5` neutral surface; cards and panels lift on pure `#FFFFFF`.
- **Body text:** `#474747` — the doc deliberately avoids pure black for legibility comfort.
- **Status colors** (`#E27474` error, `#6AC86F` success, `#D6A40B` warning) only for status — never decorative.
- **Dark mode is required** for every new system. Semantic vars (`--color-surface`, `--color-on-surface`, etc.) swap with `[data-theme="dark"]`.
- Each base color carries a **5-step scale (100→500)** anchored at 300; lighter values (100/200) for backgrounds and badges, darker (400/500) for hover/pressed/text-on-tint.

### Typography
- **Display + Body:** **Prompt** (Google Fonts) — characterful sans-serif that reads as modern and humanist; this matches the institutional move toward _"simple, moderno, con una tipografía muy definida, jovial y cercana"_ described when the new façade typography was introduced in 2020.
- **Code/Mono:** **NovaMono** (bundled locally) for code snippets and data-technical fragments.
- **Fallbacks:** Inter → Roboto → system sans. Roboto TTFs are bundled because the source doc itself ships them.
- Scale: H1 40 / H2 34 / H3 28 / H4 24 / H5 20 / B1 16 / B2 14 / B3 12 / B4 10 / B5 8.
- Line-height **minimum 1.5** for body. Max measure **75ch**. **Never justified.** Left-aligned.
- **Max two type families per screen** — typically Prompt for everything except code.

### Spacing
- Strict **4 px grid**. Tokens `--space-xs..2xl` map to 4 / 8 / 16 / 24 / 32 / 48 px.
- All gutters, paddings, gaps **must** be multiples of 4.
- Form-field vertical rhythm is `--space-lg` (24 px) between groups; `--space-md` (16 px) inside a group.

### Layout
- **Grid:** 3 columns at 1024–1279 px (Desktop), 4 columns ≥ 1280 px (Desktop L), max-width 1440 px, centred with side margins.
- **Sidebar** is mandatory on dashboards (collapsible on mobile, persistent on desktop). **Navbar** on top.
- **Breadcrumb** mandatory at depth ≥ 2.

### Surfaces, borders, shadows
- **Cards:** white surface, `--radius-md` (8 px) corners, `--shadow-md` for lifted, `1px` `--color-border` for flat. No accent left-border tropes.
- **Inputs:** Material outlined or filled style — the kit follows Angular Material conventions.
- **Shadows are soft and short** — `0 2px 4px rgba(15,23,42,.06)`. No big blurry drop shadows; this is an institution, not a fintech.
- **Focus ring** is a 3 px ring in primary-blue at 50 % alpha (`--color-focus-ring`).
- **No glassmorphism**, no heavy blur, no gradient backgrounds for surfaces. The only acceptable gradient is a subtle blue → deepblue header band for marketing/login splash.

### Backgrounds & imagery
- Page background: `--color-background` flat. No textures, no grain.
- Hero images on marketing surfaces use **photography of campus life** (warm, naturalistic, lots of greenery — Chillán is rural). Convert to subtle duotone (`#005F9A` × white) when used behind text.
- Text on imagery **must** sit on a translucent overlay or a colored capsule for contrast (institutional accessibility rule).
- No hand-drawn illustration system. Empty states use simple line iconography (Solar) plus a short caption + action.

### Motion
- **Material standard easing** (`cubic-bezier(0.2,0,0,1)`).
- Durations: 120 ms for tiny state transitions (hover, focus), 200 ms default, 320 ms for entering panels/sheets. No bouncy springs.
- Loading states **always** show a spinner or skeleton — never a blank surface.
- Animated icons are **only** for loading and transitions, never decorative.

### Interaction states (required by doc)
Every interactive component must render: **Default, Hover, Focus, Active/Pressed, Disabled, Loading, Error, Success**.

- **Hover:** primary lightens or darkens by one scale step (e.g. button background goes from `--unach-blue-300` to `--unach-blue-400`); secondary/ghost adopts a 6 % primary tint.
- **Pressed:** drops one further step in scale; no shrink/scale animation (institutional voice).
- **Disabled:** `opacity: 0.4`, pointer-events none, no shadow.
- **Focus:** 3 px `--color-focus-ring`.

### Transparency and blur
- Only used on the modal overlay (`--color-overlay`, ~50 % black) and on toasts (no blur).
- **No backdrop-filter blur** in dashboards — performance + sobriety.

### Corner radii
- Inputs / buttons / cards / chips: `--radius-md` (8 px).
- Pills / avatars / status badges: `--radius-pill`.
- Modals and bottom sheets: `--radius-lg` (12 px).

---

## Iconography

### Icon system
- **Solar Icon Set** is the official library (named explicitly in the source doc). It ships in SVG + framework components and offers `Linear`, `Bold`, `Broken`, `Outline` variants. **Use the `Linear` variant** as the default — it pairs with the calm institutional voice. Use `Bold` only for the **active** item in a sidebar / nav rail.
- Solar is reachable from npm/CDN; the project loads it on-demand:
  - npm: `solar-icon-set` or `@iconify-json/solar`.
  - CDN (Iconify): `https://api.iconify.design/solar/<icon-name>.svg`.
- For preview and prototype work in this design system, we reference Solar via Iconify CDN inside `<img>` / `<svg>` so we don't bundle the full set — see `assets/icons/` for the small curated subset we have copied locally as fallbacks.
- **Substitution flag:** if a particular Solar glyph is missing from the CDN response, fall back to **Material Symbols** (Outlined) — it is the next-closest visual register because the rest of the system is Material-leaning. **All such substitutions must be flagged in code comments.**

### Sizes (mandatory per doc)
| Token | Size | Use |
|---|---|---|
| xs | 16 × 16 | Inline with text, badges |
| sm | 20 × 20 | Compact buttons |
| md | 24 × 24 | Navigation, default actions |
| lg | 32 × 32 | Section headers |
| xl | 48 × 48 | Empty states, illustrations |

### Rules
- Always accompany icons with descriptive text **except** when context is unambiguous (magnifier inside a search field).
- Every functional icon needs `aria-label`.
- One concept = one icon, system-wide. No mixing styles or weights.
- Animated icons **only** for loading / transitions.

### Emoji / unicode
- **No emoji** in product UI.
- Unicode arrows (`→`) and bullets (`•`) are fine in marketing copy; in product UI prefer the icon set.

### Brand imagery
- Real photographs of campus, students and faculty. Warm, natural light, slightly desaturated. Avoid stock-photo gloss.
- Where photography is unavailable, fall back to a flat institutional-blue colour block — never AI-looking illustrations.

---

## Quick start for an agent using this system

1. Read `colors_and_type.css` and import it.
2. Pick a UI archetype:
   - Internal dashboard → start from `ui_kits/admin/index.html` and the components in that folder.
   - Public/marketing page → use only the tokens + Prompt typeface; admin components don't apply.
3. Pull icons from Iconify Solar: `https://api.iconify.design/solar/<name>.svg?color=%230095F8`.
4. Respect the rules in **Visual foundations** above — they are not stylistic preferences, they come from the institutional doc.

---

## Open questions / things flagged for the user

- 🟢 ~~Logo files needed~~ — oficiales recibidos en `assets/logos/`.
- ⚠️ **Reconciliación de azules.** El doc DTI define `#0095F8` para sistemas digitales y el manual 2020 define `#003366` (Pantone 541 C) para identidad impresa. En este sistema **predomina el doc DTI** (per tu indicación). Si Comunicaciones y DTI acuerdan unificar, basta cambiar `--unach-blue-300` en `colors_and_type.css`.
- ⚠️ **Símbolo aislado vectorial.** El monograma (`unach-monogram-256.png`) y la versión sobre azul son recortes derivados del PNG vertical. Para escalabilidad perfecta conviene proveer el SVG vectorial del símbolo solo, si existe en el archivo de marca de Comunicaciones.
- ⚠️ **Tipografía institucional.** El manual 2020 y el doc DTI coinciden en **Prompt**. NovaMono se incluye como mono porque viene en el doc DTI; confirmar si Comunicaciones tiene preferencia distinta para datos técnicos.
- ⚠️ **Fotografía de campus.** Aún no hay foto institucional en el sistema; los mocks usan bloques de color. Aportar 4–6 fotos del campus de Chillán (estudiantes, fachadas, salas) ayudaría a completar el sistema.
- ⚠️ **Breakpoints mobile/tablet.** El doc DTI solo cubre Desktop (1024+) y Desktop L (1280+); los breakpoints de mobile/tablet del kit son inferencias de Angular Material y conviene ratificarlos.

