# 02 · Dizayn sistemi şablonu (`DESIGN.md`) > Bu faylı yeni layihənin kökünə `DESIGN.md` adı ilə kopyalayın və `«…»` yerlərini doldurun. > Doldurulmamış bölmə buraxmayın — boş bölmə silinir, «TODO» qalmır. > Sistem əsası: `Agents/Agent.Designer/tokens/tokens.css` (38 semantik token × 8 skin × light/dark). --- ## 0. Bir cümlə ilə «…» — «kim üçün», «hansı işi görür», «hansı şəraitdə istifadə olunur». > Nümunə: *Anbar müdiri gün ərzində 200+ sətir daxil edir, işıqlı anbar ofisində, klaviatura ilə.* > Bu cümlə sonrakı hər qərarı yoxlayan meyardır: sıxlıq, şrift ölçüsü, tema, kontrast. --- ## 1. Tema və skin | Sual | Cavab | |---|---| | Əsas tema | «light-first / dark-first / hər ikisi bərabər» | | Səbəb (səhnə) | «…» — iş vaxtı, işıq şəraiti, ekran növü | | Skin | «neutral-pro / signal / clinical / industrial / atelier / nocturne» | | Skin seçim səbəbi | «…» | Skin seçimi: | Skin | Nə vaxt | |---|---| | `neutral-pro` | Məhsul UI, sıx məlumat, alət tapşırığın içində əriyir | | `signal` | Brend görünməlidir — SaaS, marketinq + panel | | `clinical` | Qurum, sənəd ağırlığı, oxunaqlılıq sıxlıqdan üstündür | | `industrial` | Utilitar alət, terminal, operator ekranı | | `atelier` | Qonaqpərvərlik, şəkil aparıcıdır, boşluq bahalıdır | | `nocturne` | Media, dark-first | Tətbiq: ```html ``` `data-theme` verilmirsə sistem `prefers-color-scheme`-ə tabe olur. --- ## 2. Token müqaviləsi 🔴 **Məhsul kodunda `#hex`, `rgb()`, `hsl()` yazmaq qadağandır.** Yalnız bu 38 token: | Qrup | Tokenlər | |---|---| | Səth | `--bg`, `--bg-subtle`, `--surface`, `--surface-2`, `--surface-3` | | Sərhəd | `--border`, `--border-strong` | | Mətn | `--text`, `--text-muted`, `--text-subtle`, `--text-disabled` | | Əsas | `--primary`, `--primary-hover`, `--primary-active`, `--primary-subtle`, `--primary-border`, `--on-primary` | | Aksent | `--accent`, `--on-accent`, `--accent-subtle` | | Vəziyyət | `--success`/`--on-success`/`--success-subtle` və eyni şəkildə `warning`, `danger`, `info` | | Qarşılıqlı | `--focus`, `--selected`, `--hover-veil`, `--overlay` | | Brend səthi | `--brand-surface`, `--on-brand-surface` | Ölçü, radius, müddət də tokendir: `--space-*`, `--size-*`, `--radius-*`, `--duration-*`, `--ease-*`, `--z-*`. ❌ Yeni brend rəng adı (`--brand-blue`, `--surface-card`, `--muted-2`) əlavə etmək **qadağandır**. Ehtiyac varsa mövcud rolun `-subtle` variantı və ya `--surface-3` istifadə olunur. ### Miqrasiya — 5 rollu OKLCH sistemindən (hub / posflame) | Köhnə | Yeni | |---|---| | `bg-background-50` | `--bg` / `--surface` | | `bg-background-100` | `--surface-2` | | `bg-background-200/70` (sərhəd) | `--border` | | `text-foreground-950` | `--text` | | `text-foreground-700/600` | `--text-muted` | | `text-foreground-400` | `--text-subtle` | | `bg-primary-500` | `--primary` | | `hover:bg-primary-600` | `--primary-hover` | | `bg-primary-100` | `--primary-subtle` | | `bg-accent-500` | `--accent` | | `bg-accent-100` | `--accent-subtle` | | `bg-secondary-100` | `--surface-2` + `--text-muted` | --- ## 3. Rəng iyerarxiyası - **Bir ekranda bir dominant vurğu.** `--primary` yalnız əsas hərəkətdə. İkinci `--primary` düymə görünürsə, biri `--secondary` (ghost/outline) olmalıdır. - **`--accent` nadirdir** — bir seçilmiş element, bir vurğulanmış göstərici. Hər kartda deyil. - **Vəziyyət rəngləri məlumat daşıyır**, dekorasiya deyil. Yaşıl = uğur, sarı = diqqət, qırmızı = xəta. - **Rəng tək başına status ifadə etmir** — hər nişan mətn daşıyır (WCAG 1.4.1). - **Doymuş fon üzərində mətn** həmişə `--on-*` cütündən götürülür. --- ## 4. Tipoqrafiya | Rol | Token | Layihədə | |---|---|---| | Display / başlıq | `--font-display` | «…» | | Əsas mətn / UI | `--font-body` | «…» | | Rəqəm, kod, ID | `--font-mono` | «…» | Qaydalar: - Ölçü şkalası `--size-2xs … --size-5xl` — arada dəyər uydurulmur. - **Cədvəldəki hər rəqəm, tarix, müddət sütunu** `--font-mono` + `font-variant-numeric: tabular-nums`. - `h1–h3`-də `text-wrap: balance`, mətn bloklarında `pretty`. - Mətn eni `--container-prose` (68ch) ilə məhdudlaşır. - Böyük hərflə tam cümlə yazılmır; `uppercase` yalnız sütun başlığı və nişanda. - İerarxiya çəki ilə qurulur (400 / 500 / 600), rəngin doyğunluğu ilə yox. --- ## 5. Boşluq, radius, qat - Boşluq yalnız `--space-*` addımlarından. Yaxın elementlər arası boşluq həmişə uzaq qruplardan kiçikdir. - Radius: kart `--radius-lg`, düymə/input `--radius-md`, nişan `--radius-full`. - **Dərinlik sərhədlə verilir.** `--shadow-*` yalnız həqiqətən üzən qatda: modal, dropdown, toast. - Qat sırası yalnız `--z-*` tokenlərindən (`--z-dropdown` 1000 → `--z-tooltip` 1500). --- ## 6. Layout | Ekran | Struktur | |---|---| | Tətbiq qabığı | Sidebar `15rem` · TopBar `3.5rem` · (opsional) CommandBar · scroll edən yeganə `main` | | Məzmun eni | `--container-content` / `--container-wide` | | Mobil | Sidebar `<64rem`-də overlay; cədvəl üfüqi scroll konteynerində | Səhifə gövdəsi **heç vaxt üfüqi scroll etmir** — geniş məzmun öz `overflow-x:auto` qabında qalır. --- ## 7. Hərəkət | Nə | Müddət | Easing | |---|---|---| | Hover, focus | `--duration-fast` (120ms) | `--ease-out-quart` | | Panel, dropdown, modal | `--duration-base` (180ms) | `--ease-out-quart` | | Səhifə keçidi | `--duration-slow` (240ms) | `--ease-out-quint` | - Sürükləmə `transform` üzərində; `width`/`top`/`left` animasiya olunmur. - `prefers-reduced-motion: reduce` → bütün keçidlər ani. --- ## 8. Əlçatanlıq (ölçülən, rəylə deyil) | Meyar | Hədəf | |---|---| | Əsas mətn kontrastı | ≥ 7:1 | | İkinci dərəcəli mətn | ≥ 4.5:1 | | Ən solğun mətn (`--text-subtle`) | ≥ 4.5:1 — bundan aşağı heç bir mətn olmur | | Sərhəd / UI elementi | ≥ 3:1 | | Focus halqası | 2px, 2px offset, `--focus` | - Semantik markup: `