Amanoba Logo
Back to Course

Szín mint jelentés, nem dekoráció

Day 6 of 30 · The Playbook 2026 – Mesterkurzus Designereknek

Felépíted a szemantikus színrendszert (brand + funkcionális), kontraszt-kész és dokumentált.

Tanulási cél

  • Létrehozol egy szemantikus színkészletet (brand + funkcionális státuszok).
  • Kontraszt-értékeket rendelsz (WCAG 4.5:1 / 7:1).
  • Tokenizálod: background, surface, text, border, state szintek.
  • Definiálsz tiltásokat (hol nem használható a brand szín).
  • Dokumentálod jó/rossz példákkal.
  • Összekötöd a Visual Intent Statementtel.

Miért fontos

  • A szín jelentést hordoz (affordance, állapot), nem dísz.
  • Kontraszt nélkül bukik a használhatóság.
  • Tokenizálás nélkül nem skálázódik a rendszer.

Magyarázat

Szemantikus tér

  • Brand: primary, secondary, accent (ritkán).
  • Funkcionális: success, warning, danger, info, neutral.
  • Felületek: background, surface, overlay.
  • Szöveg: default, muted, inverse.

Token példa

  • color.brand.primary = #FAB908
  • color.text.primary = #111827
  • color.semantic.success.bg = #DCFCE7
  • color.semantic.success.text = #166534
  • color.border.muted = rgba(0,0,0,0.08)

Példák

Rossz: Brand sárga minden státuszra → elveszik a jelentés, nincs kontraszt.

Jó: Brand sárga csak primary CTA; success zöld, warning borostyán, danger piros, mind kontraszt ellenőrizve.

Gyakorlat (vezetett, 10-15 perc)

  1. Rajzold fel a szemantikus színteret: brand, funkcionális státuszok, surface, text.
  2. Adj hex értékeket és kontraszt-ellenőrzést a text/surface párokra (min. 4.5:1, body; 7:1, small text).
  3. Készíts tiltáslistát: hol nem használható a brand szín (pl. hibaállapot, passzív elem).
  4. Dokumentáld jó/rossz példával (screenshot vagy leírás).

Gyakorlat (önálló, 5-10 perc)

Alkalmazd a színrendszert 1 komponensre (pl. kártya): háttér, szöveg, border, hover/focus, állapot-változatok.

Önellenőrzés

  • Megvan a szemantikus színkészlet (brand + funkcionális).
  • Kontraszt-értékek dokumentálva.
  • Token névlista kész.
  • Tilalmi lista létezik.

Opcionális mélyítés