Antrenează-ți ochiul pe care Claude nu ți-l poate da, Modvia Academy, 2026
🎨NIVEL 2
Culoarea, a doua pârghie de 80%
Folosește HSL, nu hex aleator. Limitează-ți paleta. Pune contrastul pe primul loc.
XP la finalizare: 350•Badge deblocat
Lecția 1, HSL, singurul spațiu de culoare care merită folosit
RGB și hex sunt formate de stocare. HSL este un format de gândire. Trece fiecare proiect pe HSL și paletele tale devin mai strânse.
H, hue (nuanța), 0 până la 360 de grade. Aceeași familie de nuanțe = armonios.
S, saturație, 0 până la 100%. Mare = vibrant, mică = discret.
L, lightness (luminozitate), 0 până la 100%. Mare = deschis, mică = închis.
Construiește palete variind L pe un H+S fix, îți dă instantaneu o scară tonală coerentă.
Lecția 2, Șablonul de paletă dark cinematică
Token
Valoare
Background-base
hsl(225 18% 5%) (navy foarte închis)
Background-elevated
hsl(225 14% 8%)
Border-subtle
hsl(225 12% 14%)
Text-primary
hsl(225 6% 95%)
Text-mute
hsl(225 8% 60%)
Accent
hsl(220 100% 65%) (albastru electric)
Accent-hover
hsl(220 100% 75%)
Doar paleta asta a produs peste 1.000 de site-uri premiate. Fură-o, variază nuanța de accent.
Lecția 3, Contrast și accesibilitate
Text de body pe fundal, contrast minim 4.5:1 (WCAG AA).
Text de display, minim 3:1 (permis pentru text mai mare).
Folosește coolors.co sau webaim.org/resources/contrastchecker pentru verificare.
Butoanele trebuie să aibă 3:1 față de fundalul lor.
Stările de hover trebuie să schimbe cel puțin una dintre, luminozitate sau saturație, cu 15%+.
Lecția 4, Culoarea pentru emoție
Vibe
Familia de nuanțe
Premium / lux
Navy profund, antracit, fildeș, accent auriu
Cinematic / tech
Aproape negru, albastru electric sau violet
Jucăuș / agenție
Roz aprins, lime, galben electric
Wellness / calm
Sage discret, bej cald, teracotă
Editorial / meșteșug
Negru, alb, o singură culoare care iese în evidență
Brutalist / experimental
Negru pur, alb pur, un singur accent de contrast puternic
Lecția 5, Greșelile de culoare pe care le face toată lumea
Negru pur (#000) pe alb pur (#f8f7ff). Contrast dureros. Folosește hsl(225 8% 6%) pe hsl(0 0% 98%).
Gradienți aleatori cu 5 culori. Folosește maximum 2 culori pentru gradienți.
Accente cu nuanțe diferite pentru secțiuni diferite. Alege una, repet-o.
Borduri colorate + text colorat + fundal colorat. Alege un singur lucru de colorat.
Uiți echivalentele pentru dark-mode. Proiectează întotdeauna ambele.
📜 Prompt Playbook, Generează o paletă HSL pornind de la un brief de vibe
Cel mai bun pentru. Setarea unui proiect nou •Cel mai bun AI. Claude Opus 4.6
Construiesc un site pentru <industrie>, vibe <3 cuvinte>. Generează o paletă HSL cu 7 token-uri, background-base, background-elevated, border-subtle, text-primary, text-mute, accent, accent-hover. Dă-mi rezultatul ca proprietăți CSS personalizate. Justifică fiecare alegere într-o singură propoziție. Apoi propune 1 paletă alternativă, în caz că prima nu se simte potrivită.
QUEST BRONZ+150 XP
🎨Construiește 3 palete cinematice
Obiectiv. Adaugă 3 palete implicite în trusa ta.
Pași
Folosește prompt-ul pentru 3 vibe-uri diferite.
Salvează fiecare ca fișier de variabile CSS.
Testează fiecare într-un mock de 1 pagină cu 1 hero + 1 buton.
Alege-o pe cea mai puternică și lansează-o pe un proiect real.
Gata când
☐ 3 palete salvate
☐ 1 folosită live
QUEST ARGINT+250 XP
🌗Auditează 10 dintre site-urile tale vechi pentru contrast
Obiectiv. Prinde eșecurile tăcute de accesibilitate.
Pași
Trece fiecare site prin verificatorul de contrast webaim.org.
Notează fiecare eșec de text-pe-fundal.
Repară cele mai proaste 3 site-uri.
Documentează situația înainte/după.
Gata când
☐ 10 site-uri auditate
☐ 3 reparate
QUEST AUR+500 XP
🏆Lansează un site cu o singură culoare
Obiectiv. Forțează-te să proiectezi cu reținere.
Pași
Alege 1 nuanță (oricare).
Construiește o landing page completă folosind doar negru, alb și tonuri ale acelei nuanțe.
Animația, tipografia, ierarhia trebuie să facă munca grea.