Design system

Identitatea vizuală Recash — culorile, tipografia și detaliile care o fac recognoscibilă.

Identitatea vizuală Recash este construită în jurul unei idei simple: reciclarea trebuie să se simtă ca o acțiune plăcută, nu ca o obligație. Fiecare alegere de mai jos pornește de aici:

  • un verde-lime energic ca accent, nu un verde corporate stins
  • forme rotunjite și umbre "dure", pentru un ton prietenos
  • animații cu rol funcțional, nu decorativ

Paleta de culori

Accentul lime apare pe butoane, linkuri și indicatoare — chiar și selecția de text din pagină este verde-lime, nu albastrul implicit al browserului. Panourile importante folosesc un gradient verde-închis ca fundal de contrast, pe care accentul lime iese în evidență.

Loc pentru imaginePaleta de culori Recash: accentul lime, verdele închis de fundal și neutrele gri

Tipografia

Fontul aplicației este Geist, încărcat automat prin Next.js — optimizat din start, fără salt vizual la încărcarea paginii.

Loc pentru imagineExemple de titluri și text din aplicație, arătând ierarhia tipografică

Forme și umbre

Colțurile foarte rotunjite pe carduri și panouri dau un ton prietenos, iar butoanele primare au o umbră "dură", nu difuză, care se "apasă" vizual la click — un detaliu tactil care face interfața să se simtă reactivă.

Iconografia

Fiecare zonă a aplicației folosește o familie de iconițe consecventă, nu un amestec de stiluri — limbajul vizual rămâne coerent dintr-un ecran în altul.

Micro-interacțiuni

Animațiile au un rol precis: indicatorul de postare activă din header pulsează discret cât timp o tranzacție este în desfășurare, meniurile apar cu o tranziție scurtă, nu brusc. Fiecare mișcare din interfață comunică ceva.

Acest site de documentație reutilizează aceeași paletă, aceleași forme și aceleași iconițe — este o extensie vizuală directă a aplicației Recash.