# DESIGN.md — Sistem de design AutoPass (by ROMFAST) > Sursa de adevar pentru identitatea vizuala a dashboard-ului. Implementarea concreta sta in > `app/web/templates/base.html` (variabile CSS `:root` + `[data-theme="light"]`). Acest fisier > spune *ce* si *de ce*; base.html spune *cum*. ## Lucrul de retinut > „Software serios pentru o obligatie legala serioasa — dar parte din familia ROMFAST/ROA, nu un > tool anonim." Operatorul de service trebuie sa simta ca declara la stat printr-un instrument de > incredere, cu identitatea producatorului (ROMFAST) prezenta discret, nu griul generic de azi. ## Context produs Gateway web care declara prezentari de service-auto la RAR AUTOPASS (L.142/2023). Utilizatori: operatori de service-auto si integratori ROAAUTO. Face parte din familia **ROA — Romfast Applications** (ERP romanesc, modul Service Auto). Referinta de brand: **romfast.ro** — alb curat, accent albastru azur, pill-uri rotunjite, comutator de tema, logo rosu+albastru. ## Decizie cromatica Accentul functional = **albastrul ROMFAST** (acelasi cu „FAST" din logo si cu accentul de pe romfast.ro), nu albastrul generic SaaS de pana acum. Rosul apare DOAR in wordmark-ul „ROM" — nu ca accent de UI, fiindca rosul e rezervat starilor de eroare. Un singur accent, restul neutre, ca sistemul sa ramana discret. ### Paleta — Dark (default) ``` --bg: #0f1218 fundal aplicatie --card: #181c24 suprafete (carduri, modal, inputuri pe fundal) --card2: #0f1218 fundal input slim / carduri-contor (= --bg, nivelul cel mai adanc) --ink: #e6e9ef text principal --muted: #8b93a7 text secundar (label-uri, coduri, „by") --line: #262b36 borduri, separatoare --line2: #1f2530 separator subtire lista slim (mai subtil decat --line) --accent:#2E74D6 azur ROMFAST — butoane primare, pill activ, linkuri, focus --ok: #2FBF8F sent / succes --warn: #E0A93B sending / atentie / Lipsa cod --err: #E05D5D error / needs_data / Date incomplete ``` ### Paleta — Light (`[data-theme="light"]`) ``` --bg: #f5f7fa fundal (alb-rece ca romfast.ro) --card: #ffffff suprafete --card2: #f5f7fa fundal input slim / carduri-contor (= --bg) --ink: #1a1d24 text principal --muted: #5c6473 text secundar --line: #e2e5ea borduri --line2: #eaedf2 separator subtire lista slim (mai subtil decat --line) --accent:#1F66C9 azur, varianta mai inchisa pentru contrast AA pe alb --ok: #15803d verde AA pe alb --warn: #b45309 chihlimbar AA pe alb --err: #dc2626 rosu AA pe alb ``` ### Paleta — Petrol (`[data-theme="petrol"]`, tema selectabila) Tema intunecata alternativa, cu accent petrol-teal (directia initiala aleasa, pastrata ca optiune). Aceleasi neutre-calde inchise; doar accentul difera de azur. ``` --bg: #0e1416 fundal petrol-inchis --card: #161e20 suprafete --card2: #0e1416 fundal input/contor (= --bg) --ink: #e6e9ef text principal --muted: #8b93a7 text secundar --line: #232c2e borduri --line2: #1c2426 separator subtire (intre --bg si --line) --accent:#0E7C7B teal petrol — butoane, pill activ, linkuri, focus --ok: #2FBF8F sent --warn: #E0A93B atentie --err: #E05D5D eroare ``` ### Paleta — Grafit (`[data-theme="grafit"]`, tema selectabila — adaugata PRD 5.15) Similara cu dark, accent azur deschis (preluat din landing, `--infot`). Distinta de dark la cererea userului (D2). Mapare landing->app: `--text->--ink`, `--sub->--muted`, `--okt->--ok`, `--errt->--err`, `--infot->--accent`. ``` --bg: #0f1218 fundal (identic cu dark) --card: #181c24 suprafete --card2: #0f1218 fundal input/contor (= --bg) --ink: #e6e9ef text principal --muted: #8b93a7 text secundar --line: #262b36 borduri --line2: #1f2530 separator subtire --accent:#6ea2ec azur deschis (landing --infot) — linkuri, focus, pill activ --ok: #2FBF8F sent / succes --warn: #E0A93B atentie --err: #E05D5D eroare ``` ### Paleta — Cobalt (`[data-theme="cobalt"]`, tema selectabila — adaugata PRD 5.15) Fundal bleumarin adanc, accent albastru viu. Atmosfera tehnica/corporatista rece. ``` --bg: #080d1c fundal bleumarin adanc --card: #111a33 suprafete --card2: #0b1226 fundal input/contor --ink: #e9ecfb text principal (usor albastrat) --muted: #8a93b8 text secundar --line: #1d2747 borduri --line2: #161f3a separator subtire --accent:#8aa0ff albastru viu (landing --infot) --ok: #2fd0a6 sent / succes (teal mai saturat) --warn: #E0A93B atentie --err: #f06a7a eroare (roz saturat pe bleumarin) ``` ### Paleta — Cupru (`[data-theme="cupru"]`, tema selectabila — adaugata PRD 5.15) Fundal cald ciocolata, accent chihlimbar. Atmosfera artizanala/calda. ``` --bg: #15110b fundal maro inchis-cald --card: #211a12 suprafete --card2: #15110b fundal input/contor (= --bg) --ink: #efe6d6 text principal (crem cald) --muted: #a89a85 text secundar --line: #36291c borduri --line2: #281e14 separator subtire --accent:#dfa45c chihlimbar cald (landing --infot) --ok: #67b98c sent / succes (verde muted-cald) --warn: #c97d2e atentie (chihlimbar mai inchis) --err: #e2685a eroare (coral pe maro) ``` ### Paleta — Hartie (`[data-theme="hartie"]`, tema selectabila — adaugata PRD 5.15) Fundal crem cald (hartie vintage), accent albastru clasic. Similara cu light, distinta la cererea userului. Ambele teme luminoase (hartie + light) respecta contrast AA. ``` --bg: #f3efe6 fundal crem cald --card: #fffdf7 suprafete (crem-alb) --card2: #f3efe6 fundal input/contor (= --bg) --ink: #1e1a13 text principal (maro-inchis, AA pe crem) --muted: #6a6052 text secundar --line: #e2dccc borduri --line2: #ece6d9 separator subtire (mai deschis decat line) --accent:#1F5FBF albastru clasic (landing --infot = --accent) — 6.5:1 pe --bg, AA --ok: #1c7d5d sent / succes (verde AA pe crem) --warn: #b45309 atentie (chihlimbar AA pe crem) --err: #bd463c eroare (rosu AA pe crem) ``` ### Tokeni noi adaugati la PRD 5.15 (in toate cele 7 teme) ``` --card2 fundal input slim si carduri-contor (US-001/002); pe dark = --bg (cel mai adanc nivel) --line2 separator subtire intre randuri lista slim (US-001/002); mai subtil decat --line ``` ### Culori de brand (doar wordmark, NU variabile de UI) ``` ROM: #D1342F rosu logo FAST: #2E74D6 albastru logo (= accentul de UI in dark) ``` Contrast: textul principal pe fundal ramane AA in ambele teme; accentul pe alb foloseste varianta mai inchisa (`#1F66C9`) ca text/linkul sa treaca AA. ## Tipografie - **UI / titluri**: **IBM Plex Sans** — sans-serif cu caracter ingineresc, open-source, potrivit pentru „software serios", parte din limbajul vizual tehnic. Fallback: `system-ui, sans-serif`. - **Coduri / monospace**: **IBM Plex Mono** — pentru coduri RAR (REV2), VIN, numar inmatriculare, detalii tehnice. Inlocuieste `ui-monospace/Menlo` actual cu o familie coerenta cu UI-ul. - **Incarcare**: self-host `woff2` (subset latin + latin-ext pentru diacritice romanesti) in `app/web/static/fonts/`, `font-display: swap`. Fara CDN extern (gateway intern, fara dependente de retea la runtime). Pana la self-host, fallback la stiva de sistem nu strica layout-ul. ## Header & branding - Titlul „Gateway RAR AUTOPASS" **centrat** pe header. - Sub titlu, mic: **logo-ul ROMFAST** (`/static/romfast_logo.png`, ~28px inaltime). Decizie user (2026-06-25, US-012b): se foloseste PNG-ul real al logo-ului (ROM rosu + FAST albastru, fundal transparent — lizibil pe light/dark/petrol), NU wordmark-ul text. Wordmark-ul text (`by ROM FAST` cu `ROM #D1342F` / `FAST #2E74D6`) ramane documentat ca alternativa, dar livrabila finala foloseste imaginea. - Controalele (comutator tema, versiune, hamburger ☰) raman la **dreapta**, fara a strica centrarea optica a titlului (ex. grila 3 coloane: stanga goala/echilibru, centru titlu, dreapta controale). - Responsiv: pe mobil, wordmark-ul ramane sub titlu; controalele nu se suprapun (degrada elegant, eventual titlu mai mic). ## Selector de tema Inlocuieste comutatorul binar soare/luna cu un **buton ciclic** (pattern ca demoanaf.ro): un singur buton care roteste la fiecare click prin setul de teme, cu iconita + tooltip/`aria-label` care arata tema curenta („Tema: Light" etc.). Ordinea ciclului (PRD 5.15 — teme aditive D2): **Light → Dark → Petrol → Grafit → Cobalt → Cupru → Hartie → Auto → (inapoi la Light)**. - `Light` → `data-theme="light"` (azur pe alb) — ☀ - `Dark` → `data-theme="dark"` (azur pe inchis, comportamentul implicit actual) — ☾ - `Petrol` → `data-theme="petrol"` (teal pe petrol-inchis) — ◐ - `Grafit` → `data-theme="grafit"` (azur deschis pe negru-grafit, similar dark) — ◑ - `Cobalt` → `data-theme="cobalt"` (albastru viu pe bleumarin adanc) — ◆ - `Cupru` → `data-theme="cupru"` (chihlimbar pe maro cald) — ◇ - `Hartie` → `data-theme="hartie"` (albastru clasic pe crem cald, similar light) — ○ - `Auto` → urmeaza `prefers-color-scheme`; rezolva la `light` (OS light) sau `dark` (OS dark). — ◉ Persistenta: preferinta explicita (inclusiv „Auto") in `localStorage`, doar la click. Scriptul anti-FOUC din `` cunoaste toate cele 7+1 stari; valori vechi (light/dark/petrol) raman valide fara migrare fortata; valoare lipsa/necunoscuta → auto (fallback sigur, fara blink). Implementare DRY (E2 PRD 5.15): configuratia temelor traieste intr-o singura structura JS `var THEMES = [...]` (sursa de adevar), din care se DERIVA `CYCLE`/`VALID`/`ICONS`/`LABELS`/`NEXT`. Adaugarea unei teme noi = O singura intrare in `THEMES`. Default la prima vizita = Auto (OS-aware), ca inainte. ## Componente — note de aplicare - **Pill-uri de stare/filtru**: rotunjite (`border-radius:99px`), ca badge-ul „ROA" de pe romfast.ro. Pill activ = fundal accent discret (`color-mix(in srgb, var(--accent) ...)`), text pe accent. Categoriile de problema isi pastreaza registrul: Date incomplete/Eroare = `--err`, Lipsa cod = `--warn`. - **Butoane primare**: fundal `--accent`, text alb (neschimbat ca structura, doar culoarea noua). - **Linkuri / sugestii**: `--accent`. - **Focus**: `outline:2px solid var(--accent)` (deja folosit pe randuri). - **Suprafete de stare** (banner, flash, eroare-3n): raman pe `color-mix` peste `--err/--warn/--ok`, deci se adapteaza automat la noua paleta si la light/dark. ## Componente slim (PRD 5.15 US-002) Adaugate in `base.html` (sectiunea `SENTINEL-COMPONENTE-SLIM`). Toate culorile exclusiv prin `var(--token)` — zero hex hardcodat. Consumate de US-003 (dashboard), US-004 (lista), US-007 (formular). ### `.contor-card` Card cifra-contor compact: fundal `--card2`, bordura `--line`, `border-radius:8px`, padding 10-12px. ```html
847
Trimise (total)
luna 124 · azi 9
``` Sub-elemente: - `.contor-cifra` — `font-size:22px; font-weight:700`; culoare prin `.s-*` existente - `.contor-label` — `font-size:11px; color:var(--muted)` - `.contor-sub` — IBM Plex Mono, `font-size:10px; color:var(--muted)` ### `.lista-trimiteri-slim` + `.trimitere-slim` Lista compacta cu separator `--line2`. Randul este clickabil (rol button), tinta `min-height:44px`. ```html ``` Sub-elemente: - `.slim-vin` — IBM Plex Mono, `font-size:13px; font-weight:500; color:var(--ink)` - `.slim-meta` — `font-size:11px; color:var(--muted)` (operatie + ora) ### `.camp-slim` + macro `camp(slim=True)` Varianta compacta de camp formular: label 11px muted deasupra, input `height:30px`, fundal `--card2`. Integrata in macro-ul `camp` din `_macros.html` prin flagul `slim=False` (default — randarea actuala ramane neschimbata). ```jinja2 {{ camp('vin', 'VIN (serie sasiu)', vin, slim=True) }} ``` Pentru campuri mono (VIN, odometru, nr. inmatriculare): adauga clasa `camp-mono` pe input (via `style=""` sau atribut `class=""` direct — macro-ul nu il pune automat, consumatorul decide). ### `.chips` + `.chip` + `.chip-del` Prestatii multi-select: container `.chips` (fundal `--card2`), item `.chip` (accent 18%, IBM Plex Mono 11px), buton de stergere `.chip-del` (accesibil cu `aria-label`). ```html
REV2 R-ODO
``` Clase aditionale: - `.chip-warn` — fundal `--warn` 22% (pentru coduri R-ODO/I-ODO care cer odometruInitial) ### `.add-code` + `.op-row` (picker E4) Buton dashed pentru adaugare cod (`.add-code`) si randul operatie<->cod (`.op-row`, `.op-row-name`, `.op-row-warn`). Folosite de picker-ul E4 din US-007 (formular editare). ```html
REVIZIE PERIODICA REV2
SCHIMBARE PLACUTE FRANA
``` ## Ce NU schimbam - Mecanismul light/dark existent (anti-FOUC, persistenta `localStorage`, comutator) — il pastram, doar reimprospatam variabilele. - Nu introducem rosu ca accent de UI (conflict cu eroare). - ~~Nu folosim PNG-ul logo cu efect 3D in interfata (wordmark redat ca text).~~ REVIZUIT (decizie user 2026-06-25): logo-ul PNG real e folosit in header (US-012b). Fundal transparent + culori proprii il fac lizibil pe toate temele; nu aplicam filtre. - Nu adaugam un al doilea accent — sistemul ramane monocrom-accent + neutre. ## Legatura cu implementarea (PRD 5.10) US-012 (header „by ROMFAST" + titlu centrat) si US-013 (paleta) din `docs/prd/prd-5.10-ux-filtre-pill-paginare-mapari-meniu.md` implementeaza acest sistem. Valorile de mai sus sunt sursa pentru variabilele din `base.html`.