/// Ghid de brand

O marcă, un verde, o voce.

Întregul sistem de brand Protocore — logo, spațiu liber, culoare, tipografie, voce și denumiri — pe o singură pagină. Citește-l aici sau ia PDF-ul (EN).

/// Sistemul de logo

Patru feluri de a așeza marca.

Marca fațetată a nucleului este singura resursă desenată. Lockup-urile așază numele lângă ea sau sub ea, în Roboto Medium — nu redesena niciuna.

Marca

Singură, la dimensiuni mici — favicon-uri, iconițe de aplicație și oriunde numele nu ar rămâne lizibil.

Protocore
Lockup orizontal

Marca lângă nume. Varianta implicită — antete, documente și semnături.

Protocore
Lockup vertical

Marca deasupra numelui. Pentru plasări pătrate — carduri sociale, casete și ștampile.

Casete de avatar

Marca centrată pe o casetă plină de 1024 px. Pentru poze de profil pe orice platformă.

/// Spațiu liber și dimensiuni

Spațiu în jur, un prag dedesubt.

Două numere fixe păstrează marca lizibilă oriunde apare.

Spațiul liber — o lățime de marcă pe toate cele patru laturi.

Marca la 16 px — pragul digital.
Spațiu liber
Lățimea mărcii, pe toate cele patru laturi. Nimic nu intră în el — nici text, nici linii, nici marginile paginii.
Înălțime minimă · digital
16 px. Sub ea, lizibilitatea dispare — folosește marca singură, niciodată un lockup.
Înălțime minimă · tipar
6 mm.
/// Culoare

Cinci culori, roluri stricte.

Aproape monocrom în mod implicit. Verdele e un accent, nu o temă — nu umple niciodată suprafețe mari.

Cerneală
#0a0a0a
rgb 10 · 10 · 10

Text pe deschis. Suprafețe închise.

Hârtie
#fafafa
rgb 250 · 250 · 250

Fundaluri deschise de pagină.

Alb
#ffffff
rgb 255 · 255 · 255

Carduri pe hârtie. Text pe cerneală.

Accent
#3fcf8e
rgb 63 · 207 · 142

Verdele — doar pe suprafețe închise.

Accent pe deschis
#0e9e6e
rgb 14 · 158 · 110

Text accent pe alb — linkuri și etichete.

/// Tipografie

Roboto face toată treaba.

Două familii acoperă tot. Fără un al treilea font, fără italice pentru accent.

Douăsprezece produse pe un singur nucleu.
Roboto 400 · 500 · 700

UI și titluri — 400 pentru text, 500 pentru titluri și lockup-uri, 700 cu măsură.

/// FIȘĂ DE DATE · 12
Roboto Mono 400

Etichete, supratitluri și numere — majuscule, cu spațiere largă.

Regular 400Medium 500Bold 700
/// ETICHETĂ DE SECȚIUNE

Etichetele de secțiune încep cu trei slash-uri și un spațiu — în Roboto Mono, majuscule, cu spațiere largă. Slash-urile sunt caractere tastate, nu grafică desenată.

/// Voce și ton

Puține cuvinte, toate cu acoperire.

Cinci reguli acoperă fiecare rând de text Protocore, de la titluri la etichete de butoane.

[ 01 ]Propoziții scurte, declarativeO idee pe propoziție. Taie orice parte care poate lipsi.
[ 02 ]Numere concreteDoar cifre reale — douăsprezece produse, un singur nucleu. Mai bine niciun număr decât unul rotunjit în sus.
[ 03 ]Fără adjective de marketingRevoluționar, fără fricțiuni, de ultimă generație — se șterg din prima. Substantivul duce greul.
[ 04 ]Fără afirmații de reglementareNu afirma și nu sugera licențe, înregistrări sau statut de conformitate în textele de brand.
[ 05 ]Majusculă doar la începutTextele de UI, titlurile și butoanele folosesc majusculă doar la început de frază. Scrierea integrală cu majuscule rămâne pentru etichetele mono.
/// Denumiri

Produsele poartă numele familiei.

Un singur tipar, aplicat fără excepție.

Prima mențiune
Numele complet — „Protocore Pay”, „Protocore Gateway”. După aceea, doar numele produsului.
PDS
Prescurtare de la Protocore Design System. Desfășoar-o la prima mențiune; PDS după aceea.
Compania
Protocore — un singur cuvânt, cu P mare. Niciodată ProtoCore, PROTOCORE sau Proto Core.
/// Utilizare

Așa da, așa nu.

Regulile din kitul de presă, extinse la întregul sistem.

/// Așa da
  • [ 01 ]Păstrează un spațiu liber egal cu lățimea mărcii pe toate laturile.
  • [ 02 ]Folosește varianta neagră pe fundaluri deschise și varianta albă pe cele închise.
  • [ 03 ]Rezervă varianta accent pentru suprafețele de cerneală (#0a0a0a).
  • [ 04 ]Scalează din fișierele SVG — marca rămâne clară la orice dimensiune.
  • [ 05 ]Folosește lockup-ul vertical când plasarea e pătrată.
  • [ 06 ]Sub 16 px înălțime, treci la marca singură.
/// Așa nu
  • [ 01 ]Nu recolora marca în afara variantelor oferite.
  • [ 02 ]Nu o roti, nu o contura și nu adăuga umbre sau alte efecte.
  • [ 03 ]Nu redesena marca și nu îi schimba proporțiile.
  • [ 04 ]Nu scrie numele Protocore cu alt font — lockup-urile folosesc Roboto Medium.
  • [ 05 ]Nu pune verdele accent pe alb — pentru text accent acolo folosește #0e9e6e.
  • [ 06 ]Nu așeza marca pe fotografii sau degradeuri — doar pe cerneală sau hârtie, culori pline.