Udhëzuesi i Markës NAVA
Ndërtuar nga përvoja e platformës NAVA.
Ky është një udhëzues pune i nxjerrë direkt nga modelet e UI që përdoren ne platformë: gradientë, panele qelqi, ngjyra të forta seksioni dhe qartësi miqësore.
Primare
NAVAHapësirë e Pastër
Rreth emërtimit tipografik të logos duhet të ruhet një hapësirë e barabartë me 1× lartësinë e shkronjës.
Madhësia Minimale
Kombinimi i logos duhet të ketë lartësi minimale prej 24px në web.
Sistemi i Logos
Përdorni asetet zyrtare të logos nga header-i. Zgjidhni formatin e duhur për sfondin dhe madhësinë.
Shënime Përdorimi
- Përdorni lockup-in e plotë në sipërfaqe të ndritshme.
- Përdorni vetëm wordmark-un kur hapësira është e kufizuar.
- Përdorni vetëm ikonën për avatarë, favicon dhe tab-e.
Logo primare
NAVAEmërtimi tipograf
Vetëm ikonë
E përmbysur në të errët
NAVAShembuj madhësish
NAVAE vogëlNAVAMesatareNAVAE madhePaleta Kryesore
Këto përputhen me gradientët e zonave në Kërkim dhe japin njohje të shpejtë në platformë.
Tregun
Veprime kryesore në treg, gradientë të header-it.
Prona
Harta, theksime vendndodhjeje, gjendje besimi.
Karrierë
Thirrje për veprim për punësim me rezultate pozitive.
Qira
Disponueshmëri, theksime rezervimi.
Harta e Pasurive të Paluajtshme
Pamjet e hartës duhet të jenë të qeta dhe të lexueshme: sfond i butë, kufij teal dhe kontrast i qartë i marker-ave.
Rregulla të Hartës
- Përdorni teal për kufij dhe konture përzgjedhjeje.
- Mbani etiketat të errëta dhe me kontrast të ulët mbi sfond.
- Marker-at duhet të përdorin blunë e tregut për qartësi.
Sfondi i hartës
#f8fafcKufi / zonë
#0f766eTeksti i etiketës
#5b6b6aMarker-at kryesorë
#2563ebBashkësia Markerave
Marker-at kryesorë dhe cluster-at përdorin vlera të shkallës blu.
Badge për ulje çmimi
Jeshilja rezervohet vetëm për badge-in e uljes së çmimit, jo për marker-at.
Sipërfaqe & Thellësi
Panelet përdorin efekt xhami mbi tone neutrale të buta. Ruani një ndjesi të lehtë thellësie.
Parazgjedhje Layout-i
- `max-w-7xl` për gjerësinë kryesore të faqes.
- `px-4 sm:px-6 lg:px-8` për skaje të qëndrueshme.
- `gap-6` si hapësirë bazë mes blloqeve.
Panele Qelqi
Përdorni `bg-white/40` + `backdrop-blur-xl` për karta hero dhe bannera.
Gjeometri e Rrumbullakosur
Preferoni `rounded-2xl` ndaj `rounded-3xl` në panele dhe modalë.
Hije të Buta
Përdorni thellësi të lehtë si `shadow-lg` ose `shadow-sm` me sipërfaqe të ndritshme.
Shembull Banner-i Hero
Përdorni gradientë të shtresëzuar me blur të butë për të theksuar veprimet kryesore.
Paleta të Zgjeruara
Këto ngjyra shfaqen në shabllonet e CV-së dhe butonat e autentikimit të palëve të treta.
Shabllone CV-je
Profesionale
Moderne
Kreative
Firmë Dixhitale
Autentikim i palëve të treta
Ngjyrat e Google përdoren në butonat e hyrjes.
Tipografi & Zë
Përdorni fontet standarde të produktit. Bashkoni tituj të fortë me tekst përshkrues të qetë.
Hierarkia
Gjej vendin e duhur, më shpejt.
Kërko në qira, punë dhe pasuri të paluajtshme.
Teksti mbështetës duhet të jetë i shkurtër, i ngrohtë dhe i orientuar nga veprimi.
Drejt & Ndihmuese
Filloni me rezultatin: “Gjej udhëtimin tënd”, “Posto një rol të ri”.
Besim
Përdorni gjuhë miqësore dhe të informuar. Shmangni zhargonin.
E Shkurtër, e Skanueshme
Tituj nën 60 karaktere. CTA 1-3 fjalë.
Komponentë
Butonat, chip-at dhe kartat duhet të duken si pjesë e panelit dhe faqes së kërkimit.
CTA Primare
Përdoret për veprimin kryesor.
CTA Dytësore
Shoqërohet me veprimet kryesore.
Etiketa për statusin e listimeve
Përputhni ngjyrat e statusit të listimeve në karta dhe header-a.
Etiketa për statusin e aplikimeve për punë
Përdorni paletën e statusit të aplikimeve për rrjedhat e shqyrtimit.
Badge Profili
Përdorni këto badge për llogaritë e biznesit dhe sinjalet e besimit në modalet e përdoruesve dhe kompanive.
Badge biznesi
Sfond i bardhë, tekst blu dhe hije e lehtë për qartësi në header-at me xham.
Status i verifikuar
Mbani badge-t e statusit të vogla dhe të lexueshme pranë emrit.
Aksesueshmëri & QA
Ruani kontrastin për tekstin dhe sigurohuni që butonat të jenë të paktën 44px. Përdorni `focus-visible:ring-2` për navigim me tastierë.
Kontrast
Blu 600 + e bardhë është çiftim standard me kontrast të lartë.
Fokus
Ngjyra e unazës duhet të përputhet me gradientin e zonës aktive.
Bëj / Mos bëj
Bëj
Përshtat gradientët e kërkimit dhe stilin e kartave të panelit.
Mos bëj
Mos krijo paleta apo tipografi që largohen nga UI-ja e produktit.