Intro
Registrul se așază (tija), vine documentul (bucla de sus), afacerea merge înainte (bucla de jos); semnul se așază.
900 ms, o dată · linii 540 ms, decalaj 140 ms
Brand
Identitatea vizuală Brivio
Tot ce îți trebuie ca să folosești corect numele și semnul Brivio: logo, culori, tipografie, mișcare și fișiere gata de descărcat.
Concept: brevitate + brio
Brivio vine de la „brevitate” (scoatem tot ce nu contează) și „brio” (energia unei afaceri care merge înainte). Semnul flow-B spune același lucru: un B construit din două bucle care curg înainte, ca un registru în mișcare.
- 01
Tija
Linia verticală: stabilitate, registrul corect fiscal pe care te poți baza.
- 02
Bucla de sus
Primul flux: documentul intră, e validat și înregistrat.
- 03
Bucla de jos
Mai largă, merge mai departe: afacerea avansează — brio.
De încredere
Corect fiscal. Cifre pe care îți poți pune compania.
Fără efort
Brevitate în tot: mai puține câmpuri, mai puține surprize.
Modern
Se simte ca 2026, nu ca 2006.
Încrezător
Un challenger cu brio — clar, nu timid.
Sistemul de logo
Trei forme, un singur desen. Folosește lockup-ul complet când ai loc, semnul singur în spații mici și varianta mono pe fundaluri colorate sau la tipar.
Brivio
Brivio
- Spațiu liber
- Păstrează în jurul logo-ului o margine egală cu grosimea tijei. Nimic nu intră în acest spațiu.
- Dimensiune minimă
- Semn: 16 px. Lockup complet: 96 px lățime. Sub aceste valori, folosește doar semnul.
Construcție
Semnul e desenat pe o grilă de 64 de unități. Grosimea liniei dă totul: spațiul liber, dimensiunea minimă, cât se deschid buclele. Bucla de jos e cu o unitate mai lată decât cea de sus — afacerea ajunge mai departe.
| Variantă | Linie / cutie | Raze bucle | Unde se folosește |
|---|---|---|---|
| master | 9u / 64u | r 11.5 · 12.5 | ≥ 40 px: interfață, marketing |
| tile | 8.5u / 64u | r 10.2 · 11 | Semn alb pe plăcuță: favicon, iconuri de aplicație (≥ 20 px) |
| lockup | 7u / 56u | r 9.5 · 10.5 | Lângă wordmark, în lockup-ul orizontal |
| 8u / 120u | r 14 · 15 | Antet de factură, tipar (≥ 12 mm) | |
| pixel | 2 px | 3×2 · 4×2 px | Exact 16 px: favicon, tray — pus pixel cu pixel |
Mărimi optice
Semnul nu se micșorează pur și simplu: sub 40 px folosim varianta pe plăcuță, cu bucle mai strânse, iar la 16 px un desen făcut pixel cu pixel, ca buclele să rămână deschise. Afișate la mărimea reală:
16px · pixel- 20px · tile
- 24px · tile
- 32px · tile
48px · master- 64px · master
- 128px · master
Semnul se adaptează culorii tale
În aplicație, semnul preia culoarea de accent aleasă de fiecare utilizator, ca logo-ul să facă parte din spațiul lui de lucru. Albastrul Brivio rămâne implicit. Alege o temă ca să vezi cum arată:
#4258dd → #2aa0f4Mod întunecat: #4258dd → #2aa0f4Fișierele externe — favicon, iconul aplicației, imaginile pentru social media, emailurile și PDF-urile — folosesc mereu semnul indigo original, pentru că nu pot ști ce temă a ales cititorul. În modul cu contrast mărit, semnul devine o singură culoare, solidă.
Mișcare
Semnul se mișcă doar când spune ceva: că ceva începe, că așteptăm sau că poți da clic. Mișcarea e rapidă și sigură, niciodată săltăreață.
Lucrează
Documentele continuă să vină și se înregistrează: buclele se redesenează pe rând, tija stă pe loc.
2400 ms × 2, apoi semnul stă (WCAG 2.2.2)
Gata
Înregistrarea a trecut: buclele fac un pas înainte, semnul pulsează o dată.
420 ms, o dată
Eroare
Un refuz scurt, orizontal. Niciodată doar prin culoare.
200 ms · ±1,5 u
Brio la hover
Buclele se apleacă înainte când treci cu mouse-ul sau cu tastatura; tija rămâne.
160 ms · doar pe logo-uri interactive
Schimbare de accent
Gradientul trece lin la culoarea aleasă, fără salt.
500 ms · culori interpolate (@property)
Tranziție între pagini
Logo-ul din header e același obiect de la o pagină la alta și glisează între poziții.
380 ms · view-transition-name: brivio-mark
Cadre — intro
Cadre din animația de intro, la momentele indicate.
- 0 ms
- 90 ms
- 180 ms
- 320 ms
- 480 ms
- 700 ms
- 900 ms
- O singură sursă
- Geometria, culorile și duratele stau într-un singur fișier (packages/theme/src/brand-mark.ts); din el se generează componenta, fișierele SVG, favicon-ul și ecranele aplicațiilor desktop și mobile.
- Curbe
- Intrări și succes: cubic-bezier(0.22, 1, 0.36, 1). Mișcare continuă: cubic-bezier(0.2, 0, 0, 1). Hover: cubic-bezier(0.32, 0.72, 0, 1). Se animă doar transform și conturul.
- Mișcare redusă
- Dacă sistemul sau setările Brivio cer mișcare redusă, fiecare stare arată semnul desenat complet; la „Lucrează” rămâne doar un puls discret în două trepte.
Culoare
Indigo este culoarea noastră — încredere, dar nu albastrul regal generic. Azurul aduce energia. Gradientul semnătură se folosește cu măsură.
Brivio Indigo
#4258DD · --color-brand
Brio Azure
#2AA0F4 · --color-brand-accent
Indigo Deep
#2F3BB8 · --color-brand-deep
Tipografie
Două familii open-source, găzduite de noi, cu toate diacriticele românești.
Titluri
Brivio 2026
Space Grotesk 500–700
Titluri, wordmark, cifre mari.
Text și interfață
Factură fiscală · ăâîșț
Inter 400–600
Tot textul curent, excelent la dimensiuni mici.
Coduri
RO12345678 · BRV-0042
JetBrains Mono 400–500
CUI, numere de factură, referințe contabile.
Vocea
Vorbim ca un contabil bun care e și prieten: calm, clar, de partea ta.
Simplu
Română sau engleză clară. Fără jargon când există un cuvânt obișnuit.
Calm
Nu speriem pe nimeni cu ANAF. Spunem ce e de făcut și cum.
Precis
Cifre exacte, termene exacte, termeni fiscali corecți.
Ce faci și ce nu faci
Da
- Folosește fișierele oficiale de mai jos.
- Păstrează spațiul liber și dimensiunile minime.
- Pe fotografii sau fundaluri colorate, folosește varianta mono.
- Scrie numele „Brivio”, cu B mare.
Nu
- Nu redesena wordmark-ul în alt font.
- Nu întinde, nu roti și nu adăuga umbre sau contururi.
- Nu recolora semnul în afara paletei Brivio.
- Nu pune semnul gradient pe o fotografie aglomerată.
Descărcări
Fișiere vectoriale (SVG) și raster (PNG), gata de folosit. Poți folosi logo-ul ca să faci trimitere la Brivio; nu îl folosi ca să sugerezi un parteneriat pe care nu îl avem.
- Lockup — fundal deschisSVG
- Lockup — fundal închisSVG
- Lockup — monoSVG
- Lockup verticalSVG
- Lockup vertical — fundal închisSVG
- Lockup vertical — monoSVG
- Semn — gradientSVG
- Semn — fundal închisSVG
- Semn — monoSVG
- Icon aplicațieSVG
- Semn 16 px (pixel)SVG
- Iconiță de browser (ICO)ICO
- Icon 512 pxPNG
- Plan de construcțieSVG
- Imagine social mediaPNG
Pentru presă sau parteneriate, scrie-ne prin pagina de contact.