---
name: Posodobitev podatkov strank
description: Varni portal za urejanje osebnih podatkov strank zavarovalnice AVRIO
colors:
  primary: "#008942"
  primary-light: "#e9faf2"
  neutral-bg: "#ffffff"
  neutral-tint: "#fafbfc"
  neutral-border: "#e9ecef"
  cream: "#FFF4D7"
  error: "#dc3545"
typography:
  body:
    fontFamily: "Montserrat, ui-sans-serif, system-ui, sans-serif"
    fontSize: "16px"
    lineHeight: 1.5
  label:
    fontFamily: "Montserrat, ui-sans-serif, system-ui, sans-serif"
    fontSize: "14px"
    fontWeight: 600
rounded:
  sm: "6px"
  md: "8px"
spacing:
  sm: "15px"
  md: "25px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral-bg}"
    rounded: "{rounded.md}"
    padding: "10px 30px"
  button-primary-hover:
    backgroundColor: "{colors.neutral-bg}"
    textColor: "#000000"
    rounded: "{rounded.md}"
    padding: "10px 30px"
---

# Design System: Posodobitev podatkov strank

## 1. Overview

**Creative North Star: "Uradna čitalnica"**

Vizualni sistem aplikacije je oblikovan z mislijo na resnost, zanesljivost in maksimalno berljivost. Ker portal služi zbiranju in posodobitvi uradnih ter regulatornih osebnih podatkov (npr. EMŠO, davčna številka, osebni dokumenti), je ključnega pomena, da uporabnik ob vstopu začuti varnost in profesionalnost.

Struktura obrazca zavrača odvečne animacije in modne SaaS trende, kot so lebdeče kartice z močnimi sencami ali zamegljena ozadja (glassmorphism). Namesto tega se zanaša na čisto, strukturirano geometrijo in kontrastne elemente.

**Key Characteristics:**
- Popolnoma ploščat (flat) dizajn s poudarkom na robovih in blagih ozadjih namesto senc.
- Uporaba korporativne zelene barve zavarovalnice AVRIO (`#008942`) za poudarke in interaktivna stanja.
- Montserrat tipografija z vnaprej določeno hierarhijo in omejeno dolžino vrstic za optimalno branje.

## 2. Colors

Celotna barvna paleta podpira uradni značaj zavarovalnice in zagotavlja skrbno načrtovane kontraste za dostopnost.

### Primary
- **AVRIO zelena** (#008942): Uporablja se kot primarna barva za gumbe, aktivne radijske gumbe, potrditvena polja (checkboxe) in poudarke, ki označujejo uspeh.
- **Svetlo zelena** (#e9faf2): Ozadje za aktivne/izbrane elemente in hover stanja.

### Neutral
- **Bela** (#ffffff): Ozadje za vnosna polja in obrazec.
- **Svetlo siva** (#fafbfc): Ozadje za sekcije obrazca (`.form-section`) za vizualno ločevanje skupin podatkov.
- **Robna siva** (#e9ecef): Uporablja se za meje sekcij in neaktivne obrobe elementov.
- **Krem** (#FFF4D7): Ozadje glave obrazca za prepoznaven logotip zavarovalnice.

### Named Rules
**Pravilo umirjenega poudarka.** Primarna zelena barva se ne sme uporabljati na več kot 10 % površine zaslona. Njena vloga je usmerjanje pozornosti na akcijske gumbe in potrditve, ne pa dekoracija ozadja.

## 3. Typography

**Display Font:** Montserrat (sans-serif)
**Body Font:** Montserrat (sans-serif)

Tipografija je izbrana zaradi čistih linij in visoke berljivosti na vseh vrstah zaslonov.

### Hierarchy
- **Headline** (semibild, 21px, line-height 1.3): Naslovi posameznih večjih sekcij obrazca.
- **Title** (semibold, 14px, uppercase): Podnaslovi in kickeri za označevanje vrst obrazcev.
- **Body** (regular, 16px, line-height 1.5): Vsebinah vnosnih polj, spremna besedila in opisi znotraj informacijskih modalov. Omejeno na 65–75 znakov na vrstico.
- **Label** (semibold, 14px, barva #495057): Labele nad vnosnimi polji.

## 4. Elevation

Ta sistem namenoma ne uporablja senc (drop shadows) za ustvarjanje globine. Vsi elementi ležijo plosko na podlagi, razmejitev med njimi pa se doseže izključno z uporabo robov (`border`) in nežnih razlik v barvi ozadja.

### Named Rules
**Pravilo ploščatosti.** Nobena kartica, vnosno polje ali gumb ne sme imeti nastavljene sence `box-shadow` (z izjemo fokusnih obročev). Globina se gradi izključno s strukturiranim plastenjem barvnih ozadij.

## 5. Components

### Buttons
- **Shape:** Zaobljeni robovi (8px polmer).
- **Primary:** Ozadje AVRIO zelena, bel tekst, hover stanje preklopi na zeleno obrobo in črn tekst.
- **Secondary (Outline):** Zelena obroba, zelen tekst, hover preklopi na polno zeleno ozadje in bel tekst.

### Inputs / Fields
- **Style:** 2px obroba v zeleni barvi, belo ozadje, 8px polmer robov.
- **Focus:** Zelena obroba z nežno zeleno senco fokusa (`0 0 3px 3px rgb(0 141 74 / 29%)`).
- **Error:** Rdeča obroba (`#dc3545`) z rdečo senco fokusa (`rgba(220, 53, 69, 0.1)`).

### Radio Groups
- **Labels:** 2px obroba v svetlo sivi barvi, bela podlaga. Ob izbiri se obroba spremeni v zeleno, ozadje pa v svetlo zeleno (`#e9faf2`).

### Checkboxes
- **Style:** Velikost 18px x 18px, zgornji odmik 3px za poravnavo s prvo vrstico besedila, zelena barva poudarka (`accent-color: #008942`).

## 6. Do's and Don'ts

### Do:
- **Do** uporabite `accent-color: var(--color-green)` na vseh potrditvenih poljih (checkboxih).
- **Do** navpično zamaknite potrditvena polja za `3px`, da se vizualno ujemajo z začetkom prve vrstice besedila.
- **Do** preverite, da imajo vsa sporočila o napakah in spremna besedila zadosten kontrast (najmanj 4.5:1).

### Don't:
- **Don't** uporabljati senc (`box-shadow: ...`) za dekorativne namene na obrazcih ali gumbih.
- **Don't** uporabljati polmerov robov večjih od 8px na vnosnih poljih in gumbih (prepovedano prekomerno zaokroževanje).
- **Don't** dodajati stranskih barvnih črt na karticah ali sekcijah kot dekorativni poudarek.