atstarpes

1. Whitespace (atstarpes un elpa dizainā)

  • Izmanto konsekventas vertikālās atstarpes starp blokiem (piemēram, 24–48px).
  • Ievēro lielāku iekšējo atstarpi (padding) ap svarīgiem blokiem, piemēram, hero sekcijām.
  • Nelieto pārāk mazas atstarpes – tās vizuāli “saspiest” lapu un apgrūtina uztveri.
  • Izmanto lielākas atstarpes sekcijām ar atšķirīgu fonu, lai radītu dabiskas sadaļu pārejas.
  • Paturi prātā “white space hierarchy”: jo svarīgāks elements, jo vairāk vietas tam apkārt.

krāsas

2. Krāsas (Colors)

  • Izmanto ne vairāk kā 3–5 primārās krāsas visā projektā.
  • Definē brand palette: primārā, sekundārā un akcenta krāsa.
  • Ierobežo košas krāsas tikai CTA pogām vai svarīgiem elementiem.
  • Foniem priekšroku dod gaišiem vai ļoti tumšiem toņiem, lai nodrošinātu augstu kontrastu ar tekstu.
  • Nodrošini, ka krāsu kontrasts atbilst WCAG (4.5:1 tekstam).
  • Izmanto vienādas krāsas toņus visām ikonām vai ilustrācijām.

3. Tipogrāfija (Fonts & Font size)

  • Izvēlies 1 primāro fontu tekstam un 1 akcenta fontu virsrakstiem (ja nepieciešams).
  • Veido konsekventu hierarhiju (piemērs):
  • H1: 40–60px
  • H2: 28–40px
  • H3: 22–28px
  • Body: 16–18px
  • Small text: 14px
  • Minimālais rindas augstums (line-height) — 1.4–1.6.
  • Nelieto vairāk par 2–3 dažādiem font-weight visā lapā.
  • Nodrošini pietiekamu fonta izmēru arī mobilajā skatā (vismaz 15–16px parastajam tekstam).