Components
Componente UI reutilizabile pentru farme.ro - butoane, carduri, inputs, alerts
Componente UI
Componentele noastre sunt construite pentru consistență, accesibilitate și funcționalitate. Fiecare element respectă sistemul de design și oferă o experiență coerentă utilizatorilor.
Butoane
Primary Buttons
Secondary Buttons
Card-uri Produse
Brânză de Burduf
Artizanală din Apuseni
45 RON
35 RON
per kg
Brânză de Burduf
Artizanală din Apuseni
45 RON
35 RON
per kg
Brânză de Burduf
Artizanală din Apuseni
45 RON
35 RON
per kg
Câmpuri de Input
Badge-uri & Etichete
Status Badges
Category Tags
Promotional
Card-uri Informative
100% Natural
Produse fără aditivi sau conservanți artificiali
Din România
Susținem producătorii locali din întreaga țară
Verificat
Fiecare producător este evaluat pentru calitate
Butoane
Variante
Dimensiuni
Carduri
Card Standard
Card cu padding standard, border și shadow pentru depth.
Card Muted
Card cu background muted pentru secțiuni secundare.
Alerts
Success
Operațiune realizată cu succes!
Error
A apărut o eroare. Te rugăm să încerci din nou.
Warning
Atenție: Stoc limitat disponibil.
Info
Informație utilă despre produs.
Inputs
Badges
Bune Practici
Ghid complet de utilizare corectă a brandului. Urmează aceste principii pentru a menține consistența și integritatea identității vizuale.
Utilizare Culori
Corect
Text principal pe Primary
Text pe fundal deschis Primary
Folosește culorile brandului în combinații care asigură contrast și lizibilitate
Incorect
Text cu contrast scăzut
Culori din afara paletei
Nu folosi culori din afara paletei sau combinații cu contrast scăzut
Utilizare Tipografie
Corect
Titlu Principal
Text de corp cu spațiere corectă și ierarhie clară. Folosește dimensiunile standard.
Respectă ierarhia tipografică și spațierea dintre elemente
Incorect
Text prea mare
Text prea mic pentru citire
Nu folosi dimensiuni aleatorii sau spațiere inconsistentă
Utilizare Spațiere
Corect
Element 1
Element 2
Spațiere consistentă bazată pe scara de 4px (24px între elemente)
Incorect
Element 1
Element 2
Spațiere inconsistentă sau valori aleatorii (2px, apoi 48px)
Utilizare Imagini
Corect
Imagine luminoasă, clară
Imagini de calitate, bine iluminate, cu focus pe produs
Incorect
Imagine întunecată, neclară
Imagini de calitate scăzută, întunecate sau distorsionate
Butoane & Call-to-Actions
Corect
Text clar, acțiune evidentă, culori din paletă
Incorect
Culori aleatorii, text agresiv, stiluri inconsistente