soneta-ui-style

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.).