Pagină de test

Un sistem de design generat, nu inventat

Fiecare decizie de mai jos — paletă, perechea de fonturi, durata animației, pragul de contrast — vine dintr-o interogare în baza locală a skill-ului ui-ux-pro-max. Pagina e chiar dovada: dacă arată bine și trece verificările, baza a fost utilă.

Vezi tokenii Regulile aplicate

Culoare

Paleta „Developer Tool / IDE”

Returnată de --domain color. Rapoartele de contrast de sub fiecare culoare sunt calculate pe formula WCAG, nu estimate.

Background / Foreground

#F8FAFC pe #0F172A17.06:1

Accent

#0F172A pe #22C55E7.83:1

Muted foreground

#94A3B8 pe #0F172A6.96:1

Border (din bază)

#475569 pe #0F172A2.36:1

Border (corectat)

#64748B pe #0F172A3.75:1

Accent, variantă light

#15803D pe alb5.02:1

Ce n-a trecut din prima

Culoarea de bordură din paletă (#475569) dă 2.36:1 pe fundal — sub pragul de 3:1 cerut pentru elemente de interfață. Am păstrat-o doar pentru linii decorative și am urcat la #64748B (3.75:1) acolo unde bordura chiar delimitează un control. Verde-ul #22C55E pe alb dă doar 2.28:1, deci în varianta luminoasă accentul devine #15803D.

Tipografie

Perechea „Geometric Modern”

Outfit pentru titluri, Work Sans pentru text — recomandate explicit pentru landing pages. Corp 16px, line-height 1.6, titluri cu clamp() ca să nu existe salt între breakpoint-uri.

h1 · clamp 2→3.5rem Bijuterii gravate

h2 · 600 Titlu de secțiune

body · 16px/1.6 Textul de bază, la mărimea implicită a browserului.

small · 0.875rem Text secundar — tot peste 4.5:1.

Mișcare

Presetul „Scroll Reveal / Subtle”

Baza dă un snippet GSAP: opacity 0 → 1, y 12px, 350 ms, power1.out. L-am implementat în CSS + IntersectionObserver — același rezultat, fără 70 KB de dependență. Secțiunile de mai sus au intrat exact așa.

Control de calitate

Regulile UX aplicate în pagină

Din --domain ux, ordonate după severitate.

Regulă	Sev.	Cum e respectată aici
Reduced Motion	High	`prefers-reduced-motion` taie toate animațiile; conținutul rămâne vizibil.
Excessive Motion	High	O singură animație de tip reveal, 12px. Nimic nu pulsează, nimic nu se repetă.
Color Contrast	High	Toate perechile de text ≥ 4.76:1, calculate. Bordurile funcționale ≥ 3:1.
Motion Sensitivity	High	Fără parallax, fără scroll-jacking.
Touch target	Critical	Butoanele au `min-height:44px`.
Easing Functions	Low	`ease-out` la intrare, niciodată `linear`.
Keyboard nav	Critical	Link „sari la conținut”, `:focus-visible` păstrat și vizibil.
No horizontal scroll	High	Tabelul ăsta derulează în containerul lui, nu în pagină.