Manrope titluri · greutate 600
Aa Ăă Ââ Îî Șș Țț
Fumegând hipnotic sașiul azvârle mreje în bălți.
Ghid de identitate · versiunea 1 · octombrie 2026
Cum arată, cum se mișcă și cum vorbește AVANEMI.
O singură idee ține totul laolaltă: termografia. Un client nou e cald. Fiecare minut fără răspuns îl răcește. Tot ce vedeți pe site, de la culori la animații, spune povestea asta.
01Conceptul
Clientul e un corp termic.
Instalatorii lucrează cu temperatura în fiecare zi: pompe de căldură, aer condiționat, panouri care stau în soare. Camera termică e o unealtă pe care o cunosc. Noi o folosim ca metaforă pentru un client.
Când cererea abia a sosit, clientul e cald: așteaptă un telefon. Cu fiecare oră, interesul scade. Corpul 3D de pe site se răcește când povestea vorbește despre întârzieri și se reaprinde când pornește sistemul.
- Caldce e viu: un client nou, un răspuns rapid, o vizită programată
- Recece se pierde: un apel neprins, o ofertă uitată, o cerere de vineri seara
- Precislinii fine, etichete monospațiate, cifre exacte, ca pe o planșă tehnică
02Logo
Un punct cald și un nume.
Marca e un disc în gradient termic, de la alb-cald în centru la violet pe margine. Numele se scrie cu majuscule, în Geist 600, cu spațiere largă.
AVANEMI
AVANEMI
Așa da
- Spațiu liber în jur cât diametrul mărcii.
- Cel puțin 20 px înălțime pentru marcă, 12 px pentru nume.
- Numele cu majuscule și spațiere de 0,2 em.
Așa nu
- Nu întindeți și nu rotiți marca.
- Nu schimbați gradientul cu altă culoare.
- Nu puneți logo-ul peste o poză aglomerată.
03Culori
Două rampe: căldură și gheață.
Fundalul e aproape negru, cu o tentă violet. Căldura vine din harta „inferno” a camerelor termice, iar gheața e pentru ce se pierde. Apăsați pe o culoare ca să copiați codul.
Contrast pentru text
04Tipografie
Precis, cu o scânteie.
Manrope pentru titluri, Geist pentru text și Geist Mono pentru etichete, cu diacritice românești complete (ă, â, î, ș, ț). Le servim de pe site, nu de la Google, ca să nu trimitem date ale vizitatorilor. Titlurile au greutate 600, spațiere aerisită și accent de culoare.
Accentul un singur cuvânt, în culoarea căldurii
cât e cald.
Același font, aceeași greutate. Fără italic și fără gradient în text.
Geist Mono etichete, ore, cifre
00:47 · 36,8°
CERERE NOUĂ · VINERI, 19:42:05
Titlul termic
Treceți cursorul peste text. Pe telefon, trageți cursorul de mai jos.
Prinde clientul cât e cald.
| Rol | Mărime | Greutate | Exemplu |
|---|---|---|---|
| Titlul mare | 50–128 px | 480, spațiere −0,055 em | Cald. |
| Titlu de secțiune | 34–70 px | 500, −0,04 em | Ce promitem. |
| Subtitlu | 23–32 px | 500, −0,025 em | Răspuns în sub 2 minute |
| Text principal | 17–21 px | 400, rând 1,55 | Voi instalați. Noi răspundem. |
| Etichetă | 11–12 px | Geist Mono 500, majuscule, +0,16 em | 01 · Problema |
05Mișcare
Căldura urcă repede. Se răcește încet.
Asta e regula fiecărei animații. Ce apare, apare repede și se așază lin. Ce dispare, se stinge fără grabă. Apăsați pe o curbă ca s-o vedeți în mișcare.
- 160 msstări de hover, culori
- 260 msbutoane, comutatoare
- 900 msapariții la scroll
- 0 mspentru cine a cerut mai puțină mișcare
06Laboratorul termic
Corpul 3D, pe masa de lucru.
E același obiect de pe pagina principală: o sferă deformată de zgomot simplex, colorată după temperatură, cu izoterme, particule și strălucire. Totul e desenat în timp real, în WebGL. Mutați comenzile.
36,8°C
Laboratorul are nevoie de WebGL 2.
- Geometrie
- sferă, ~12.500 de vârfuri
- Deformare
- zgomot simplex 3D, 4 octave
- Culoare
- hartă inferno → gheață
- Randare
- WebGL 2 direct, fără post-procesare
07Componente
Piesele de bază.
Butoane
Unul singur alb pe ecran: acțiunea principală. Inelul termic apare la hover.
Etichete și cipuri
01Cald
02Rece
< 2 min
Banda colorată din etichetă arată „temperatura” secțiunii.
Mesaje
Bună seara! Am primit cererea dumneavoastră pentru panouri fotovoltaice.
Da, luni e bine.
Vizită programată · luni, 11:00
Maria I. · Filiași · panouri
Gri pentru asistent, verde închis pentru ce scrie clientul, cald pentru confirmări.
Citire termică
36,8°C ▲ cald
6,2°C ▼ rece
Ca pe ecranul unei camere termice: o cifră, o unitate, o direcție.
08Tonul vocii
Scurt, simplu, adevărat.
Vorbim limba firmelor de instalații, profesionist, dar simplu: cum i-ai explica unui copil de 10 ani. Fraze scurte, cuvinte obișnuite, cifre cu sursă. Ne adresăm firmei cu „voi”.
Așa daAșa nu
„Fiecare cerere primește răspuns în sub 2 minute.”
„Revoluționăm comunicarea cu clienții prin AI.”
„Rezumatul ajunge la cine se ocupă de clienți.”
„Patronul primește fișa cererii pe WhatsApp, cu buton de apel.”
„Revenim la fiecare ofertă până primiți un răspuns.”
„Secvență de follow-up în cinci pași: ziua 1, 3, 7, 14 și 30.”
„Ați primit oferta?”
„V-a ajuns oferta?”
„Nu vindem lead-uri.”
„Vă aducem sute de cereri noi pe lună.”
- Diacritice mereu: ă, â, î, ș, ț.
- Ideea principală, fără detaliile de proces. Detaliile le arătăm la discuție, pe demo.
- Fără nume de unelte sau platforme.
- Nu spunem „patron”: spunem „voi”, „firma”, „cine se ocupă de clienți”.
- Firmele nu doar montează panouri: instalează și pompe de căldură, și climatizare.
- Cifrele din studii, cu sursa și cu precizarea că sunt ordin de mărime.
- Asistentul spune mereu că e virtual.
09Resurse
Pentru oricine construiește.
Tokenuri CSS
Fonturi
- Geist și Geist Mono · Vercel, licență SIL Open Font
Pe site sunt servite local, prin Fontsource, cu subsetul latin extins.