Predstavte si web, kde každé tlačidlo vyzerá trochu inak. Jeden má zaoblené rohy, druhý ostré. Jeden je modrý, druhý námornícky. Jeden má tieň, druhý nie.
Toto nie je hypotéza — je to realita väčšiny webov, ktoré sa vyvíjajú bez systému.
Čo je dizajn systém?
Dizajn systém je zbierka pravidiel, komponentov a štýlov, ktoré definujú vizuálny jazyk projektu. Môže byť jednoduchý (niekoľko CSS premenných a typografia) alebo komplexný (plnohodnotná komponentová knižnica s dokumentáciou).
Pre Modulo CMS sme zvolili stredný prístup:
Farby ako CSS premenné:
--c-primary: #6366f1;
--c-accent: #a855f7;
--c-text: #09090b;
--c-muted: #71717a;
--c-border: #e4e4e7;
Zaoblenie konzistentné: --radius: 12px
Typografia: Inter, system-ui, sans-serif — bez externých fontov pre rýchlosť
Tiene: len kde treba, vždy rovnaký pattern
Prečo to ušetrí čas
Keď máte dizajn systém, každé rozhodnutie o dizajne je otázkou "použijem --c-primary alebo --c-accent?" nie "aká modrá to bola?"
Pri zmene brandovej farby stačí zmeniť jeden riadok CSS a zmena sa prejaví všade. Bez systému by ste hľadali #6366f1 po celom codebase.
Komponentová knižnica v admin paneli
Pre admin panel používame Vuetify 3 — kompletný dizajn systém pre Vue 3. Vuetify má stovky komponentov: tabuľky, formuláre, dialógy, navigácia. Všetky sú tematizovateľné — môžete zmeniť tému a celý admin sa prispôsobí.
Toto je sila komponentovej knižnice: nemusíte vymýšľať koleso. Sústredíte sa na funkcionalitu, nie na štylizáciu každého tlačidla.
Verejný web: vlastné CSS
Verejný web Modulo CMS používa čisté CSS s premennými. Žiadny framework, žiadna externá závislosť. Dôvod: verejný web musí byť rýchly a ľahký. Tailwind, Bootstrap aj Vuetify pridávajú kilobajty, ktoré návštevník musí stiahnuť.
S CSS premennými dosiahneme konzistenciu bez záťaže.
Typografia: základ, ktorý sa prehliadne
Väčšina webov sa príliš sústredí na farby a zabudne na typografiu. Pritom 90% webu je text.
Naše pravidlá:
- Nadpis H1:
clamp(1.75rem, 4vw, 2.5rem)— responzívne bez media queries - Line-height pre text:
1.8— priestor pre pohodlné čítanie - Letter-spacing pre nadpisy:
-0.04em— tesnejšie, modernejšie - Font-weight: 900 pre nadpisy, 500 pre text, 700 pre labely
Spacing: ôsma sústava
Všetky medzery sú násobkami 8px: 8, 16, 24, 32, 48, 64. Nikdy 7, 9 alebo 13. Toto robí dizajn rytmický a konzistentný, aj keď na to nikto priamo nepozrie.
Záver: systém pred kódom
Ak začínate nový projekt, investujte prvé hodiny do definovania systému: farby, fonty, spacing, zaoblenie, tiene. Tieto rozhodnutia ušetria dni práce neskôr.
V Modulo CMS je dizajn systém súčasťou projektu od prvého commitu. Keď pridávame nový modul, nová stránka vyzerá konzistentne — bez extra práce.
