# Visuele Style Guide & UX Identity

Dit document beschrijft de visuele identiteit en de gebruikerservaring (UX) van het Mini-EPD. De focus ligt op de 'look & feel' en de ontwerpkeuzes, zonder technische code.

---

## 1. De Visuele Persoonlijkheid

Het ontwerp van het EPD is gestoeld op drie kernwaarden:
1.  **Betrouwbaarheid**: Een rustig, professioneel fundament (Slate & Teal).
2.  **Menselijkheid**: Gebruik van klassieke typografie (Serif) voor verslagen.
3.  **Innovatie**: Een warme, magische uitstraling voor AI-functies (Amber & Goud).

---

## 2. Kleurgebruik & Betekenis

Het kleurenpalet is functioneel ingezet om de gebruiker te gidsen door de complexe medische data.

### 2.1 De Basis (Rust & Ruimte)
De interface ademt rust door het gebruik van een zeer lichte, bijna witte achtergrond (**Lichtgrijs/Slate**). Dit zorgt ervoor dat de content (patiëntdata) de meeste aandacht krijgt. Borders zijn subtiel en zacht, waardoor er geen harde lijnen in het zicht staan.

### 2.2 Actie & Focus (Teal / Groenblauw)
**Teal** is de primaire accentkleur. Het wordt gebruikt voor alles wat "standaard" en "veilig" is:
*   Navigatie en menu's.
*   Primaire knoppen voor dagelijkse handelingen.
*   Focus-ringen (om aan te geven waar de gebruiker is).
*   Bevestigingen en succesmeldingen.
*   *Gevoel: Professioneel, medisch, kalm.*

### 2.3 AI & Intelligentie (Amber / Goud)
**Amber** is gereserveerd voor alle functies waarbij de computer met de gebruiker meedenkt (AI):
*   Knoppen die samenvattingen genereren.
*   Highlights bij automatisch herkende tekst.
*   AI-assistent iconen (gecombineerd met een sterretje/sparkle ✨).
*   *Gevoel: Magisch, waardevol, onderscheidend.*

### 2.4 Module Kleuren
Om snel te kunnen schakelen tussen dossiers, hebben specifieke onderdelen hun eigen kleuraccent:
*   **Afspraken**: Groen (Fris, vooruitgang).
*   **Medicatie**: Geel/Amber (Waarschuwing, actie).
*   **Labuitslagen**: Oranje (Energie, resultaat).

---

## 3. Typografie (De Stem van de App)

De app gebruikt drie verschillende lettertypes om context te geven aan de tekst.

*   **De Stem van de Arts (Serif)**: Voor medische verslagen en verhalen wordt een klassiek lettertype met schreef gebruikt. Dit leest prettiger bij lange teksten en geeft een gevoel van autoriteit en menselijkheid, zoals in een gedrukt medisch dossier.
*   **De Stem van de App (Sans-Serif)**: Voor alle menu's, knoppen en navigatie wordt een modern, strak lettertype zonder schreef gebruikt. Dit zorgt voor optimale leesbaarheid en een efficiënte uitstraling.
*   **De Stem van de Data (Monospace)**: Voor getallen, uitslagen en technische details worden letters gebruikt die allemaal even breed zijn (zoals bij een typemachine). Dit zorgt ervoor dat kolommen met cijfers altijd strak onder elkaar staan.

---

## 4. Knoppen & Interactie

### 4.1 Standaard Knoppen
Standaard knoppen hebben zachte, afgeronde hoeken en een rustige uitstraling. 
*   **Primaire actie**: Een volle Teal kleur.
*   **Secundaire actie**: Een witte achtergrond met een dunne rand.
*   **Subtiele actie**: Geen achtergrond, alleen tekst die oplicht bij aanraking.

### 4.2 De 'Magische' AI-Knop
De knoppen voor AI-functies vallen direct op. Ze gebruiken geen egale kleur, maar een verloop (**gradient**) van goud naar donker-amber. Dit geeft de suggestie van diepte en "energie". Vaak vergezeld door een klein sparkle-icoontje.

---

## 5. Layout & UX Patronen

### 5.1 De 'Geleende' Sidebar
De navigatie bevindt zich aan de linkerkant.
*   **Open**: Toont iconen en tekst voor volledige duidelijkheid.
*   **Ingeklapt**: Toont alleen iconen om werkruimte te maximaliseren. Voor de duidelijkheid verschijnen er 'zwevende' labels (tooltips) als je over de iconen beweegt.
*   **Contrast**: De sidebar is vaak iets donkerder of heeft een duidelijke verticale lijn om de scheiding tussen "besturing" en "inhoud" aan te geven.

### 5.2 Kaarten (Cards)
Informatie wordt gepresenteerd op witte "kaarten" die licht boven de achtergrond lijken te zweven door een zachte schaduw. Dit voorkomt dat de interface rommelig wordt en maakt duidelijk welke informatie bij elkaar hoort.

### 5.3 Feedback & Animaties
De interface voelt "levend" aan:
*   Elementen glijden soepel in beeld (slide-in).
*   Belangrijke meldingen zweven lichtjes (floating effect) om subtiel de aandacht te trekken zonder te storen.
*   Knoppen reageren direct door een kleine kleurverandering als je eroverheen beweegt.

---

## 6. Samenvatting van de Vibe
De app ziet eruit als een modern, high-end dashboard. Het combineert de zakelijkheid van een bank-app (veiligheid) met de slimheid van een moderne AI-tool (amber accenten) en de warmte van een magazine (serif typografie).