---

name: soneta-ui-style description: "Design system Soneta / enova365 do budowania aplikacji webowych spójnych wizualnie z enova365 ERP: palety kolorów (jasny/ciemny), typografia, layout, komponenty UI (przyciski, formularze, tabele, sidebar, header, kafelki, modale), odstępy, cienie, ikony SVG, animacje, responsywność. Używaj gdy użytkownik: (1) prosi o zaprojektowanie, zbudowanie lub ostylowanie strony/aplikacji w stylu Soneta/enova365; (2) wspomina 'styl enova', 'styl Soneta', 'design system enova365', 'UI enova'; (3) chce dashboard, formularz, stronę logowania, panel administracyjny w estetyce enova365; (4) prosi o landing page lub aplikację z zielonym motywem enterprise w stylu Soneta; (5) pyta o kolory, czcionki, komponenty lub wzorce UI enova365/Soneta. Działa z każdym stackiem (HTML/CSS, React, Vue, Tailwind, itp.)."

Soneta / enova365 — Design System

Ten skill opisuje reguły projektowania interfejsów użytkownika wizualnie spójnych z aplikacją enova365 ERP firmy Soneta. Stosuj te reguły budując strony internetowe, dashboardy, formularze i aplikacje webowe w estetyce Soneta.

Zasady przewodnie

1. Szmaragdowa zieleń jako kolor wiodący — #016E46 dominuje w headerze, sidebarze (motyw jasny), przyciskach akcji, stanach focus i linkach
2. Enterprise minimalizm — czysty, profesjonalny interfejs bez ozdobników, nacisk na czytelność danych
3. Wysoka gęstość informacji — kompaktowe wiersze (30-36px), pola blisko siebie, minimalne marginesy
4. Płaski design z subtelnymi cieniami — brak skeuomorfizmu, delikatne bordery i cienie
5. Hierarchia przez wagę czcionki, nie rozmiar — różnice wynikają z font-weight (400 vs 600), a nie drastycznych zmian rozmiaru
6. Dwa motywy: jasny i ciemny — oba używają tego samego systemu zmiennych CSS
7. Spójność stanów — każdy komponent definiuje 6 stanów: default, hover, focus, pressed, selected, disabled

---

1. Kolory

1.1 Brand (wspólne)

| Token | Wartość | Użycie | |-------|---------|--------| | --brand_500 | #016E46 | Kolor główny — header, focus, linki | | --brand_600 | #015436 | Brand ciemny | | --brand_700 | #01422A | Brand najciemniejszy | | --brand_300 | #3A8E6F | Brand jasny | | --brand_200 | #02E391 | Brand najjaśniejszy | | Akcent cyjan | #31e2b8 | Logo — turkusowy | | Akcent błękitny | #6acbf3 | Logo — jasny niebieski |

1.2 Motyw jasny (White)

| Przeznaczenie | Kolor | |---------------|-------| | Tło główne (content area) | rgb(230, 231, 231) — jasnoszare, wydziela białe karty | | Tło headera | #016E46 — szmaragdowy | | Tło sidebara | #003320 — bardzo ciemna zieleń, ciemniejszy niż header | | Sidebar hover | rgba(0, 70, 38) | | Sidebar selected | rgba(0, 88, 48) | | Tekst sidebara | #FFFFFF | | Tło surface/karty | #FFFFFF | | Tło sekcji | #F5F5F5 – #FAFAFA | | Tekst podstawowy | #212121 – #333333 | | Tekst drugorzędny | #757575 – #A3A3A3 | | Tekst etykiet | #616161 | | Obramowanie inputów | #BDBDBD – #E0E0E0 | | Obramowanie focus | #016E46 | | Wiersz zaznaczony | rgba(46, 125, 50, 0.08) | | Wiersz hover | rgba(0, 0, 0, 0.04) | | Separator | #E0E0E0 |

1.3 Motyw ciemny (Black)

| Przeznaczenie | Kolor | |---------------|-------| | Tło główne | #1E1E1E – #212121 | | Tło headera | #1B5E20 – #0D3B14 — ciemnozielony | | Tło sidebara | #262626 — grafitowy, nie zielony | | Tło surface/karty | #2A2A2A – #303030 | | Tekst podstawowy | #E0E0E0 – #F0F0F0 | | Tekst drugorzędny | #A3A3A3 | | Tekst etykiet | #BDBDBD | | Obramowanie inputów | #424242 – #555555 | | Obramowanie focus | #016E46 — identyczny jak w jasnym | | Wiersz zaznaczony | rgba(46, 125, 50, 0.15) | | Wiersz hover | rgba(255, 255, 255, 0.05) | | Separator | #424242 | | Overlay modal | rgba(0, 0, 0, 0.7) |

1.4 Kolory semantyczne

| Przeznaczenie | Kolor | |---------------|-------| | Success / Primary action | #2E7D32 — przyciski "Zapisz" | | Danger | #C62828 – #D32F2F — przyciski "Zamknij" | | Warning | #F57C00 | | Info | #1976D2 | | Link | #016E46 | | Disabled | #A3A3A3 z opacity |

1.5 Paleta neutralna (z PaletteBase.css)

Wartości w formacie RGB (bez rgb()):

| Token | Wartość | HEX | |-------|---------|-----| | --neutral_0 | 255, 255, 255 | #FFFFFF | | --neutral_100 | 245, 245, 245 | #F5F5F5 | | --neutral_200 | 229, 229, 229 | #E5E5E5 | | --neutral_300 | 212, 212, 212 | #D4D4D4 | | --neutral_500 | 109, 115, 113 | #6D7371 | | --neutral_700 | 77, 81, 80 | #4D5150 | | --neutral_800 | 38, 38, 38 | #262626 | | --neutral_850 | 33, 33, 33 | #212121 | | --neutral_900 | 23, 23, 23 | #171717 |

Semantyczne: --red_600: #DC2626, --green_400: #10C200, --blue_500: #3B82F6, --orange_500: #F97316, --yellow_400: #F3D930, --emerald_400: #139041.

---

2. Typografia

Czcionki

| Przeznaczenie | Czcionka | Fallback | |---------------|----------|----------| | Główna (--primaryFont) | "FiraSans" | Arial, sans-serif | | Alternatywna (--tertiaryFont) | "ROBOTO" | sans-serif | | Nagłówki | "SourceSansSemiBold" | Arial, sans-serif | | Branding/logo | "Lato" | sans-serif | | Monospace | Consolas | "Courier New", monospace |

Gdy nie możesz załadować czcionek Soneta, użyj "Roboto", "Segoe UI", Arial, sans-serif jako bezpiecznego zamiennika.

Rozmiary

| Przeznaczenie | Rozmiar | |---------------|---------| | Captions | 10px – 11px | | Etykiety pól | 12px (--font_size_label: 9pt) | | Tekst w inputach | 13px – 14px | | Body (podstawowy) | 14px | | Nagłówki sekcji | 14px – 16px + font-weight: 600 | | Tytuł formularza | 16px – 18px | | Duże nagłówki | 20px – 24px | | Logo / ekran logowania | 24px – 32px |

Grubości

| Styl | Wartość | Użycie | |------|---------|--------| | Light | 300 | Delikatne teksty | | Regular | 400 | Domyślna | | Medium | 500 | Przyciski | | Semi-bold | 600 | Nagłówki sekcji, aktywne menu | | Bold | 700 | Tytuły |

Wysokość linii

Body: 18-20px, wiersze tabeli: 20-24px, inputy: 24-26px, nagłówki: 28-32px.

Letter-spacing

Normalny tekst: 0–0.1px, etykiety: 0.15–0.25px, przyciski uppercase: 0.6–2px.

---

3. Layout

Struktura główna

┌──────────────────────────────────────────────────────┐
│                   HEADER BAR (~48-56px)               │
│  [Logo] [Search]           [Ikony] [Avatar]          │
├──────────┬───────────────────────────────────────────┤
│          │  BREADCRUMB (~32px)                        │
│          ├───────────────────────────────────────────┤
│ SIDEBAR  │  TOOLBAR + TABS (~44-48px)                │
│ (250px)  ├───────────────────────────────────────────┤
│          │                                           │
│ Drzewo   │            CONTENT AREA                   │
│ nawigacji│  (Formularz / Lista / Dashboard)           │
│          │                                           │
├──────────┴───────────────────────────────────────────┤
│                   STATUS BAR (opcjonalnie)            │
└──────────────────────────────────────────────────────┘

Wymiary

| Element | Wymiar | |---------|--------| | Header bar | 48px – 56px | | Sidebar rozwinięty | 240px – 260px | | Sidebar zwinięty | 48px – 56px | | Breadcrumb | 28px – 32px | | Toolbar | 40px – 48px | | Status bar | 24px – 28px | | Min width | 1024px |

System layoutu

• Flexbox dominuje — flex-direction: row dla sidebar+content, column dla sekcji
• Grid sporadycznie — dashboard kafelków
• justify-content: space-between w toolbarze
• align-items: center praktycznie wszędzie

---

4. Komponenty UI

4.1 Przyciski

| Wariant | Tło | Tekst | Border | Użycie | |---------|-----|-------|--------|--------| | Primary | #2E7D32 | #FFF | brak | "Zapisz", "Zaloguj" | | Secondary | przezroczyste | inherit | 1px solid szary | "Czynności" | | Tertiary | przezroczyste | inherit | brak | Ikony toolbar | | Danger | #C62828 | #FFF | brak | "Zamknij" |

Wymiary: height 32-38px (standard) / 40-44px (duży), padding 6px 12px / 8px 16px / 10px 20px, border-radius 4-6px, font 13-14px weight 500-600, gap ikona+tekst 6-8px.

Stany: hover — lekkie rozjaśnienie; focus — box-shadow: inset 0 0 3px 1px #016E46; pressed — przyciemnienie; disabled — opacity 0.5-0.6.

/* Przykład: przycisk Primary */
.btn-primary {
  background-color: #2E7D32;
  color: #FFFFFF;
  border: none;
  border-radius: 4px;
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-primary:focus { box-shadow: inset 0 0 3px 1px #016E46; }
.btn-primary:disabled { opacity: 0.5; cursor: default; }

4.2 Pola formularza

| Właściwość | Jasny | Ciemny | |------------|-------|--------| | Tło | #FFFFFF | #2A2A2A | | Tekst | #212121 | #E0E0E0 | | Border | 1px solid #BDBDBD | 1px solid #555555 | | Border-radius | 4px | 4px | | Wysokość | 30-32px | 30-32px | | Padding | 4px 8px | 4px 8px | | Font-size | 13-14px | 13-14px |

Focus: border #016E46 + opcjonalnie box-shadow: inset 0 0 3px 1px #016E46. Error: czerwony shadow. Warning: pomarańczowy shadow. Disabled: tło #F5F5F5 / #1A1A1A.

Etykiety: font 12px, kolor #757575 (jasny) / #BDBDBD (ciemny), weight 400.

Układ formularza: siatka 2-4 kolumn, etykieta po lewej (~100-140px stała szerokość), input flex: 1, gap między wierszami 8-12px, sekcje oddzielone nagłówkami z marginesem 16-24px.

4.3 Checkbox

Rozmiar 16-18px, border-radius 2-3px, checked: zielone tło #2E7D32 z białym checkmarkiem.

4.4 Tabele / Listy

Nagłówek: tło #F5F5F5 (jasny) / #2A2A2A (ciemny), tekst #616161 / #BDBDBD, font 12-13px weight 600, padding 8px 12px.

Wiersze: tło naprzemienne #FFF / #FAFAFA (jasny), #1E1E1E / #252525 (ciemny), height 30-36px, padding 4-6px 12px, font 13-14px. Hover: rgba(0,0,0,0.04) / rgba(255,255,255,0.05). Selected: zielony tint rgba(46,125,50,0.08) / 0.15.

4.5 Zakładki (Tabs)

Styl outline: padding 6px 12px, border 1px solid szary, border-radius 4px, font 13px, aktywna — zielone tło lub zielony border, gap 4-6px.

Styl page tabs: przylegające (gap: 0), aktywna — wyróżnione tło + pogrubiony tekst.

4.6 Header Bar

• Tło: #016E46 (jasny) / #1B5E20 (ciemny)
• Wysokość: 48-56px, padding: 0 16px
• Logo: ZAWSZE osadzać poniższe oficjalne SVG inline (nie wymyślać własnego logo!):

<svg viewBox="0 0 200 33.5" height="22" fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg">
  <path d="M69.7,0.1C60.5,0.1,53,7.6,53,16.7c0,9.2,7.5,16.7,16.7,16.7c9.2,0,16.7-7.5,16.7-16.7C86.4,7.6,78.9,0.1,69.7,0.1z M153.2,4.7c-2.8,0-5.4,0.9-6.7,1.8l1,3.2c1-0.6,2.9-1.5,4.8-1.5c2.6,0,3.7,1.3,3.7,3c0,2.3-2.6,3.2-4.6,3.2h-2v3.2h2c2.7,0,5.3,1.2,5.3,4c0,1.8-1.3,3.7-4.7,3.7c-2.2,0-4.4-0.9-5.3-1.4l-1,3.4c1.3,0.8,3.7,1.6,6.6,1.6c5.8,0,9.1-3.1,9.1-7.1c0-3.2-2.3-5.3-5.2-5.8v-0.1c2.9-1,4.3-3,4.3-5.5C160.5,7.3,158,4.7,153.2,4.7L153.2,4.7z M178.3,4.7c-0.4,0-0.8,0-1.3,0.1c-3.3,0.3-6.2,1.4-8.3,3.5c-2.4,2.3-4.1,5.9-4.1,10.4c0,5.8,3.1,10.1,8.8,10.1c5,0,8.3-3.9,8.3-8.4c0-4.8-3.1-7.6-7.2-7.6c-2.3,0-4.1,0.9-5.3,2.3h-0.1c0.6-3.2,2.9-6.2,7.9-6.8c0.9-0.1,1.6-0.1,2.2-0.1V4.7C179,4.7,178.7,4.7,178.3,4.7L178.3,4.7z M187.1,5.1l-1.5,11.8c0.9-0.1,1.9-0.2,3.2-0.2c4.7,0,6.6,1.8,6.6,4.5c0,2.8-2.5,4.3-5.1,4.3c-2.1,0-4.1-0.7-5.2-1.2l-0.9,3.4c1.2,0.7,3.5,1.4,6.2,1.4c5.7,0,9.4-3.6,9.4-8.1c0-2.8-1.3-4.8-3.1-5.9c-1.5-1-3.6-1.5-5.7-1.5c-0.7,0-1.2,0-1.7,0.1l0.7-4.7h9V5.1C199.3,5.1,187.1,5.1,187.1,5.1z M65.3,7.1c0.3,0,0.8,0.2,1.4,0.5l12.7,7.7c0.5,0.3,0.9,0.9,0.9,1.5c0,0.6-0.4,1.2-0.9,1.6l-13.1,7.9c-0.3,0.2-0.6,0.2-0.9,0.2c-1,0-1.8-0.8-1.8-1.8V8.9C63.5,7.9,64.4,7.1,65.3,7.1z M173.2,16.1c2.6,0,4.1,1.9,4.1,4.6c0,2.8-1.5,4.8-3.7,4.8c-2.9,0-4.4-2.5-4.4-5.6c0-0.6,0.1-1,0.3-1.4C170,17.1,171.5,16.1,173.2,16.1z"/>
  <path d="M93.1,4.3c-0.2,0-0.3,0.1-0.5,0.1l-0.4,0.2c-0.7,0.4-1.1,1.3-0.8,2.1l9,21.1c0.5,0.6,1.6,1,2.8,1c1.2,0,2.3-0.4,2.8-1.1l8.5-21.3c0.1-0.8-0.3-1.7-1.1-2l-0.3-0.1c-0.1,0-0.2-0.1-0.3-0.1h-0.5c-0.5,0.1-1,0.3-1.3,0.8l-7.8,20.1L95,5.2c-0.3-0.5-0.8-0.9-1.4-0.9C93.6,4.3,93.1,4.3,93.1,4.3z M9.1,4.4C3,4.4,0,7.8,0,14.9v3c0,7.5,5.1,10.5,11.2,10.5h4.7c0.9-0.1,1.5-0.7,1.7-1.6v-0.5c-0.1-0.8-0.8-1.5-1.6-1.6h-4.8c-2.7,0-7.3,0-7.4-6h12.4c1,0,1.9-0.8,1.9-1.9v-1.8C18,7.7,15.2,4.4,9.1,4.4z M28.9,4.4c-1,0-1.9,0.8-1.9,1.9v20.3c0,0.9,0.7,1.6,1.6,1.8h0.5c0.8-0.1,1.5-0.8,1.6-1.6V8.1h3.8c3.2,0,7.5,0.4,7.5,6.8v12c0.2,0.8,0.9,1.4,1.7,1.4h0.3c0.9,0,1.6-0.7,1.7-1.5V14.9c0-7.4-5-10.5-11.3-10.5C34.6,4.4,28.9,4.4,28.9,4.4z M121.1,4.4c-0.9,0.1-1.6,0.9-1.6,1.8v0.1c0,0.9,0.7,1.7,1.6,1.8h6.4c2.9,0,4.8,0.4,5.2,5.2H128c-2.2,0-8.9,0-8.9,7.4c0,5.6,3.9,7.6,7.3,7.6h8.2c1,0,1.9-0.8,1.9-1.9V14.9c0-7.4-2.7-10.5-8.9-10.5L121.1,4.4L121.1,4.4z M9.1,8.1c2.8,0,5.2,0.5,5.2,6.7H3.7C3.7,8.6,6.3,8.1,9.1,8.1z M128,17h4.7v7.6h-6.4c-1.6,0-3.6-0.7-3.6-3.9C122.8,18.2,123.5,17,128,17z"/>
</svg>

• Search: białe tło, ciemny tekst, ikona lupy, border-radius 4px
• Ikony: białe SVG 20-24px
• Avatar: kółko 32-36px, zielone tło + biały inicjał
• Shadow: 0 2px 4px rgba(0,0,0,0.1) na dole

4.7 Sidebar

Motyw jasny: tło #003320 (ciemniejsza zieleń niż header), biały tekst, białe ikony SVG 16-18px. Motyw ciemny: tło #262626 (grafitowy), jasnoszary tekst.

Kształt: border-radius 8-12px, margin 4-6px (góra/lewo/dół) — pływający panel z zaokrąglonymi rogami.

Struktura: (1) pasek sterowania "Zwiń"/"Odepnij", (2) pole wyszukiwania, (3) drzewo nawigacji z chevronami.

Hover: rgba(255,255,255,0.08) (jasny) / 0.05 (ciemny). Aktywny: rgba(255,255,255,0.12) + pogrubienie. Padding elementu: 8px 16px, wcięcie podpoziomów: +16-20px.

4.8 Breadcrumb

Wysokość 28-32px, font 12px, kolor #757575 (linki), ostatni segment #212121 (nie-link), separator > kolor #BDBDBD z margin: 0 4px, ikona Home SVG 14-16px, padding 4px 16px.

4.9 Modal / Dialog

| Właściwość | Jasny | Ciemny | |------------|-------|--------| | Overlay | rgba(0,0,0,0.5) | rgba(0,0,0,0.7) | | Tło | #FFFFFF | #2A2A2A | | Border-radius | 8-12px | 8-12px | | Shadow | 0 4px 20px rgba(0,0,0,0.25) | …0.5) | | Padding | 20-25px | 20-25px | | Szerokość | 400-600px | 400-600px |

4.10 Dropdown / Menu kontekstowe

Tło białe/ciemne, border 1px solid #E0E0E0 / #424242, border-radius 8px, shadow 0 4px 12px rgba(0,0,0,0.15) / 0.4, padding elementu 8px 16px, font 13-14px, ikony kolorowe 16-20px po lewej.

4.11 Ekran logowania

Dwuczęściowy layout ~50/50: lewa — zdjęcie/branding z logo, prawa — formularz logowania wycentrowany w pionie. Logo "enova365" z akcentami kolorystycznymi. Hasło: "System ERP dla ambitnego biznesu" 22px kursywa. Przycisk "Zaloguj": zielony, pełna szerokość, 40px height. Footer: "by Soneta ®".

4.12 Dashboard — Kafelki (Tiles)

Tło content area: rgb(230, 231, 231) (jasny) — wydziela białe kafelki.

Kafelek: width 352px, min-height 80px, border-radius 12px, tło białe/ciemne, border-left 4px solid [kolor_modułu] — kolorowy akcent, shadow 0 0 10px 1px rgba(229,229,229), padding 10px 16px.

Układ wewnętrzny kafelka: display: flex; align-items: center; gap: 10px — ikona po lewej, tekst (tytuł + opis) po prawej. Ikona jest wycentrowana w pionie względem bloku tekstowego.

Ikona w kafelku: rozmiar 20px × 20px, kolor = kolor modułu (taki sam jak border-left). Ikona to czyste SVG liniowe (outline) — same kontury, bez koła/okręgu za ikoną, bez żadnego tła pod ikoną. Ikona renderowana bezpośrednio na białym tle kafelka.

Katalog SvgResources/ tego skilla zawiera ~370 gotowych ikon SVG enova365. Każda ikona ma viewBox="0 0 160 160" i używa fill na elementach <path> (cienkie kształty dające efekt liniowy). Aby użyć ikony w kafelku, skopiuj zawartość pliku SVG, ustaw width="20" height="20" i nadaj kolor modułu przez atrybut fill na elemencie <svg> lub <path>.

Mapowanie modułów na pliki ikon SVG (katalog SvgResources/):

| Moduł | Plik ikony | Kolor | |-------|-----------|-------| | Terminarz | kalendarz.svg | Zielony #2E7D32 | | Kadry i płace | osoba.svg | Pomarańczowy #F57C00 | | Księgowość | kalkulator.svg | Fioletowy #7B1FA2 | | Handel | towar.svg | Żółty #F9A825 | | CRM | crm.svg | Zielonkawy #2E7D32 | | Produkcja | fabryka.svg | Magenta #C2185B | | Ewidencja dokumentów | dokument.svg | Niebieski #1976D2 | | Ewidencja Środków Pieniężnych | monety.svg | Cyjan #00838F | | Księga inwentarzowa | portfel.svg | Oliwkowy #827717 | | Ewidencja pojazdów | samochod.svg | Czerwony #C62828 | | Business Intelligence | wykres.svg | Złoty #F9A825 |

Przykład osadzenia ikony z pliku kalendarz.svg w kafelku:

<svg width="20" height="20" viewBox="0 0 160 160" fill="#2E7D32" xmlns="http://www.w3.org/2000/svg">
  <path d="M150 15.002h-40.035V5.037c0-2.762-2.237-5-5-5s-5 2.238-5 5V15h-40V5.037c0-2.762-2.238-5-5-5s-5 2.238-5 5V15H10C4.478 15 0 19.477 0 25v125c0 5.522 4.478 10 10 10h140c5.522 0 10-4.478 10-10V25c0-5.52-4.478-9.998-10-9.998zM150 150H10V25h39.965v5.038c0 2.762 2.238 5 5 5s5-2.238 5-5v-5.036h40v5.038c0 2.763 2.237 5 5 5s5-2.237 5-5v-5.037H150V150zm-35-69.998h10c2.76 0 5-2.24 5-5v-10c0-2.76-2.24-5-5-5h-10c-2.76 0-5 2.24-5 5v10c0 2.76 2.24 5 5 5zM115 120h10a5 5 0 0 0 5-5v-10c0-2.76-2.24-5-5-5h-10c-2.76 0-5 2.24-5 5v10c0 2.765 2.24 5 5 5zm-30-20H75c-2.76 0-5 2.24-5 5v10a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5v-10c0-2.757-2.24-5-5-5zm0-39.998H75c-2.76 0-5 2.24-5 5v10c0 2.76 2.24 5 5 5h10c2.76 0 5-2.24 5-5v-10a5 5 0 0 0-5-5zm-40 0H35c-2.76 0-5 2.24-5 5v10c0 2.76 2.24 5 5 5h10c2.76 0 5-2.24 5-5v-10a5 5 0 0 0-5-5zM45 100H35c-2.76 0-5 2.24-5 5v10a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5v-10c0-2.757-2.24-5-5-5z"/>
</svg>

Jeśli nie masz dostępu do plików SVG, narysuj prostą ikonę liniową inline — cienkie ścieżki <path> z fill="[kolor_modułu]", viewBox 0 0 160 160, bez tła i bez koła.

Tytuł: Roboto 16px weight 600, line-height 28px. Opis: Roboto 14px weight 400, kolor rgb(68, 70, 69), line-height 16px.

Layout kafelków: flex-wrap, gap 8px, tytuł grupy: 16px weight 500 uppercase.

Hover: tło #F5F5F5, active: brak shadow, focus: outline 2px.

4.13 Toolbar

Wysokość 40-48px, border-bottom separator, flex row align-items: center, gap 4-8px, padding 4px 16px. Przyciski outline/tertiary 30-32px height. Filtry: zielone tło, pill shape border-radius: 16-20px.

4.14 Scrollbar

Track przezroczysty, thumb #BDBDBD (jasny) / #555555 (ciemny), thumb hover #999 / #777, width 8-10px, border-radius 4-5px.

---

5. System odstępów (skala 4px)

| Token | Wartość | Użycie | |-------|---------|--------| | xs | 2px | Mikro-gap ikona↔tekst | | sm | 4px | Padding małych elementów | | md | 8px | Standardowy padding/gap | | lg | 12px | Padding komórek, gap przycisków | | xl | 16px | Padding sekcji, margin grup | | 2xl | 20px | Padding kart/modali | | 3xl | 24px | Margin między sekcjami | | 4xl | 32px | Duże odstępy | | 5xl | 40px | Bardzo duże odstępy |

---

6. Border-radius

| Element | Wartość | |---------|---------| | Inputy | 4px | | Przyciski | 4-6px | | Karty/kafelki | 8-12px | | Modale | 8-12px | | Pill/badge | 16-20px | | Avatary | 50% | | Tooltipy | 4-6px |

---

7. Cienie

| Kontekst | Wartość | |----------|---------| | Subtelny (karty) | 0 1px 3px rgba(0,0,0,0.08) | | Standardowy (dropdown) | 0 2px 8px rgba(0,0,0,0.15) | | Wyraźny (modal) | 0 4px 20px rgba(0,0,0,0.25) | | Focus inset | inset 0 0 3px 1px #016E46 | | Header | 0 2px 4px rgba(0,0,0,0.1) | | Ciemny motyw | Alpha ×1.5 – ×2 |

---

8. Ikony

System ikon enova365: liniowe SVG (outline), viewBox 0 0 160 160, kolor przez fill (nie stroke), fill: currentColor lub bezpośredni kolor.

| Rozmiar | Wartość | Użycie | |---------|---------|--------| | Mały | 14-16px | Inline tekst, sidebar | | Standardowy | 18-20px | Toolbar, menu | | Duży | 24-32px | Nagłówki, dashboard |

Kolory: #616161 (jasny content), #BDBDBD (ciemny), #FFFFFF (na zielonym tle), #2E7D32 (aktywny).

Główne ikony: szukaj.svg (lupa), dom.svg (home), ustawienia.svg (trybik), dzwonek.svg (powiadomienia), osoba.svg (użytkownik), folder.svg, dokument.svg, dodaj.svg (+), usun.svg (kosz), zapisz.svg (dyskietka), anuluj.svg (X), filtr.svg.

Logo: Oficjalne SVG logo enova365 jest osadzone w sekcji 4.6 (Header Bar) powyżej. ZAWSZE kopiuj dokładnie ten kod SVG — nigdy nie wymyślaj własnej wersji logo ani nie próbuj odtwarzać go z tekstu + ikon. Na ciemnym tle użyj fill="#FFFFFF", na jasnym fill="#000000".

---

9. Animacje

| Właściwość | Wartość | |------------|---------| | Transition domyślny | all 0.2s ease | | Hover | background-color 0.2s, color 0.2s | | Opacity | opacity 0.3s ease | | Sidebar collapse | width 0.3s ease |

---

10. Responsywność

| Breakpoint | Zachowanie | |------------|------------| | Desktop (>1200px) | Pełny layout: sidebar + content | | Tablet (768–1200px) | Sidebar zwinięty, rozwijany overlay | | Mobile (<768px) | Wersja mobilna — osobna aplikacja |

---

11. CSS Variables — konwencja nazewnictwa

Format: --{komponent}_{wariant}_{stan}_{właściwość}

Prefiksy: command_ (przyciski), input_ (formularze), nav_tree_ (sidebar), headerbar_, modal_, tooltip_, popup_, checkbox_, radio_, dp_ (date picker), scroll_, spinner_, dashboard_, bookmark_ (zakładki), path_ (breadcrumb), label_, verifier_ (walidacja).

Przykłady: --command_primary_hover_bg, --nav_tree_item_selected, --input_focused_border, --modal_bar_title_fg.

---

12. Kolory ikon modułów (menu główne)

Na dashboardzie ikony w kolorowych kółkach (border-radius 50%, 32-40px):

| Moduł | Kolor | |-------|-------| | Terminarz | Zielony | | Ewidencja dokumentów | Niebieski | | Kadry i płace | Pomarańczowy | | Księgowość | Fioletowy | | Handel | Żółty | | Produkcja | Magenta | | CRM | Zielonkawy |

---

Materiały referencyjne

Pełny przewodnik projektowy z większą ilością szczegółów: przeczytaj enova365-design-guide.md w katalogu tego skilla.

Pliki CSS z pełnymi paletami zmiennych:

• wzorce/css/standard/PaletteBase.css — paleta jasna (~830 zmiennych)
• wzorce/css/standard/PaletteDark.css — paleta ciemna

Ikony SVG: katalog SvgResources/ zawiera ~370 ikon liniowych.

Pliki SCSS komponentów: katalog wzorce/css/fullbrowser/ — style poszczególnych komponentów (TileItem, Login, HeaderBar, NavPanelTree, Grid, itd.).