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;    /* indigo */
--c-accent:  #a855f7;    /* fialová */
--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.