Esența brandului
Cine suntem și de ce contăm.
Fundația strategică din care decurg toate deciziile de design, copywriting și produs.
Livrăm instalații electrice sigure, eficiente și durabile — de la proiectare la mentenanță — care alimentează industria, comunitățile și tranziția către energie curată.
Să fim partenerul tehnic de referință din România pentru infrastructură electrică inteligentă, iluminat public și soluții fotovoltaice.
Siguranță
Conformitate, norme, zero compromis pe protecția oamenilor și a instalațiilor.
Profesionalism
Rigoare tehnică, termene respectate, documentație completă.
Inovație
Iluminat inteligent, EV, fotovoltaic — tehnologii de ultimă generație.
Orientare spre soluții
Ascultăm problema, proiectăm răspunsul, ne asumăm rezultatul.
Energie pusă în ordine.
Constructorul + Expertul
Competent, calm, direct, de încredere — niciodată zgomotos. Vorbește prin lucrări, nu prin superlative.
Un singur partener, tot ciclul
Proiectare, implementare și mentenanță — industrial și public — cu aceeași echipă responsabilă de la releveu la recepție.
Logo
Logo & sistem de mărci.
Wordmark „PHI / EMC” pe două rânduri în sans-serif geometric monoline cu terminații rotunjite, „pro” spațiat dedesubt, flancat de două forme-săgeată care sugerează fluxul de energie.
Recomandare prioritară — sursă vectorială
Variantele de mai jos sunt derivate din sursa rasterizată (fundal decupat, recolorare per variantă) pentru uz imediat pe fundaluri diferite. Înainte de producție: obținerea sursei vectoriale (SVG/AI) și eșantionarea culorilor exacte din vector.
Variante aprobate
Principal — color / alb
Monocrom — grafit
Negativ — pe PHI BlueNegativ — pe fundal închis
Doar wordmark
Doar simbol — săgețiClear space · dimensiuni minime · favicon
Spațiu liber minim = ½ din înălțimea wordmark-ului („PHI”) pe toate laturile. Nimic nu intră în această zonă.
Digital min. 88 px · Print min. 22 mmSub aceste dimensiuni folosește varianta „doar wordmark”.
Icon = wordmark pe PHI Blue, colțuri drepte, fără săgeți.
Utilizări greșite
Ce nu faci niciodată cu logo-ul.
Integritatea mărcii depinde de consecvență. Evită următoarele fără excepție.
SRLElement grafic
Fulgerul, colțarele și numerotarea.
Trei elemente de sistem, toate din linii drepte: fulgerul de energie (din săgețile logo-ului), colțarele tehnice de încadrare și numerotarea mono. Împreună dau ritm și un aer de precizie inginerească, fără să se demodeze.
Fulger — separator & accent
Deschide titluri, delimitează blocuri, marchează CTA-uri. Doar în PHI Blue sau Accent; niciodată colorat altfel.
Colțare tehnice
Două colțare (stânga-sus, dreapta-jos), 2 px PHI Blue, decalate 8 px în afara blocului. Pentru imagini-cheie și plăci de logo.
Numerotare mono
IBM Plex Mono, albastru 18% pe alb, mare și discret — organizează secțiuni și liste fără să concureze titlul.
Culori
Paleta de culori.
PHI Blue este semnătura. Neutrele domină, albastrul structurează, accentul energizează punctual. CMYK/Pantone sunt aproximări de plecare — se confirmă din vectorul oficial.
- RGB
- 0 · 96 · 168
- CMYK
- 100 · 64 · 0 · 16
- Pantone
- 3005 C ≈
- Rol
- Brand, CTA, structură
- RGB
- 0 · 64 · 119
- CMYK
- 100 · 70 · 0 · 40
- Pantone
- 301 C ≈
- Rol
- Hover, profunzime
- RGB
- 30 · 155 · 215
- CMYK
- 78 · 28 · 0 · 0
- Pantone
- 2925 C ≈
- Rol
- Marcaje, fulger, focus
- RGB
- 30 · 42 · 51
- CMYK
- 41 · 18 · 0 · 80
- Pantone
- 432 C ≈
- Rol
- Text, footer
- RGB
- 138 · 145 · 153
- CMYK
- 10 · 5 · 0 · 40
- Pantone
- Cool Gray 8 C
- Rol
- Săgeți, UI secundar
- RGB
- 168 · 168 · 168
- CMYK
- 0 · 0 · 0 · 34
- Pantone
- Cool Gray 6 C
- Rol
- Săgeți, „pro”, decor
- RGB
- 245 · 247 · 249
- CMYK
- 2 · 1 · 0 · 2
- Pantone
- —
- Rol
- Secțiuni alternante
- RGB
- 255 · 255 · 255
- CMYK
- 0 · 0 · 0 · 0
- Pantone
- —
- Rol
- Suprafață principală
Suprafețe derivate (oklch) și proporție 60 / 30 / 10
Tintele de albastru se generează cu color-mix(in oklch, var(--phi-blue) N%, white) — nu se inventează hex-uri noi.
Matrice de contrast & perechi aprobate (WCAG 2.2)
| Prim-plan | Fundal | Exemplu | Raport | Verdict | Utilizare |
|---|---|---|---|---|---|
| Grafit #1E2A33 | Alb | Aa | 14.4 : 1 | AAA | Corp de text implicit |
| Grafit #1E2A33 | Deschis #F5F7F9 | Aa | 13.6 : 1 | AAA | Text pe secțiuni alternante |
| Text soft #5A6771 | Alb | Aa | 5.6 : 1 | AA | Text secundar, lede |
| Alb | PHI Blue #0060A8 | Aa | 6.5 : 1 | AA | Butoane, bandă cifre (AAA la text mare) |
| #D6E6F3 | PHI Blue #0060A8 | Aa | 5.2 : 1 | AA | Text secundar pe albastru |
| Alb | Închis #004077 | Aa | 10.5 : 1 | AAA | Hover, footer |
| PHI Blue #0060A8 | Alb | Aa | 6.5 : 1 | AA | Link-uri, kickere, butoane secundare |
| Grafit | Accent #1E9BD7 | Aa | 4.7 : 1 | AA | Text închis pe accent |
| Alb | Accent #1E9BD7 | Aa | 3.1 : 1 | AA mare | Doar text ≥ 24 px / elemente UI |
| Gri #A8A8A8 | Alb | Aa | 2.3 : 1 | Fail | Doar decorativ — niciodată text |
Tipografie
Sistemul tipografic.
Trei voci: un geometric pentru titluri (apropiat de logo), un sans neutru pentru text și un mono pentru etichete tehnice. Scara este fluidă — clamp() între mobil și desktop.
Google Fonts. Geometric, deschis, apropiat de wordmark. Greutăți 500–700; tracking −0.015 la −0.03 em la display.
Comercial: Gilroy / Neue Haas Grotesk · Fallback: Segoe UI, Arial
Google Fonts. Neutru, x-height mare, excelent pe ecran și în tabele. 17 px / 1.65 pe desktop, max 65 ch.
Alternativă: Roboto · Fallback: Segoe UI, Arial
Google Fonts. Etichete, numerotare, valori, cod. Majuscule cu tracking 0.14–0.2 em; niciodată pentru paragrafe.
Fallback: Consolas, Menlo, monospace
Greutăți Montserrat
Scară tipografică fluidă — specimene live
clamp(42px, 1.5rem + 4.6vw, 88px) · 1.02 · −.03emEnergie pusă în ordine.
clamp(30px, 1.25rem + 2.2vw, 48px) · 1.1Tot ciclul electric, un singur partener.
clamp(18px, 1rem + .5vw, 22px) · 1.2Iluminat public & inteligent
clamp(17px, 1rem + .4vw, 21px) · 1.55 · text-softProiectăm, executăm și întreținem instalații electrice pentru industrie și spațiu public.
17px · 1.65 · max 65chUn singur partener pe tot ciclul de viață al instalației — cu documentație completă, termene asumate și o echipă care răspunde.
13px · caps · +.08emCere o ofertă →
12px · caps · +.2emServicii
14px · text-softContinental Automotive Systems · Stadionul „Ilie Oană”, Ploiești · Cisnădie
Iconografie
Iconografie de serviciu.
Linie 1.6 px pe grilă de 24 px, capete și colțuri drepte (square / miter) — aceeași geometrie ca restul sistemului. O singură culoare: PHI Blue; Accent la hover.
Stil fotografic
Fotografie & imagistică.
Documentar, real, tehnic. Șantiere, instalații, iluminat nocturn, echipe la lucru — tratament cromatic rece, ușor virat spre albastru. Imaginile-cheie primesc colțare.
Da
- Situații reale, echipe și proiecte proprii
- Detalii tehnice curate, cadre ordonate
- Lumină rece, contrast controlat, tentă albastră
- Scară umană care arată amploarea proiectului
Nu
- Stock generic „business handshake”
- Filtre calde/vintage, HDR agresiv
- Cadre dezordonate, cabluri neîngrijite
- Text ilizibil suprapus pe imagine
Tone of voice
Cum vorbește PHI EMC pro.
Tehnic dar accesibil. Sigur pe sine, la obiect, fără jargon inutil. Vindem competență și liniște, nu superlative.
Do
- Direct și clar: „Proiectăm, montăm, întreținem.”
- Concret, cu cifre și referințe verificabile.
- Orientat spre soluție și pe siguranță.
- Explică termenul tehnic o dată, apoi îl folosește.
Don't
- Superlative goale: „cei mai buni din România”.
- Jargon nedefinit care exclude clientul.
- Ton comercial agresiv sau familiar excesiv.
- Promisiuni fără acoperire tehnică.
„Energie pusă în ordine.”
Proiectăm, executăm și întreținem instalații electrice pentru industrie și spațiu public.
„Spune-ne ce ai de rezolvat.”
Îți propunem soluția tehnică și termenul în 48 de ore lucrătoare.
„Construim echipa care ține lumina aprinsă.”
Proiecte reale, echipamente moderne, respect pentru meserie.
Aplicații web
Sistem de componente.
Blocurile de construcție ale phi-emc.ro, randate în stările lor reale. Colțuri drepte, borduri 1 px, umbre plate, focus vizibil. Componentele de mai jos sunt exact cele din propunerea de homepage.
Homepage phi-emc.ro — deschide propunerea
Fișier separat, construit pe aceste tokens: hero, servicii, despre, proiecte, cifre, cariere, contact, footer. Mișcare subtilă, container queries, scroll-driven animations, prefers-reduced-motion.
Butoane
Hover: albastru închis / umplere · Active: translate 1 px · Focus: contur 2 px Accent la 3 px · Font Montserrat 600, 13 px, caps, +.08 em · Padding 16 × 28 px.
Badge-uri & filtre
Card proiect
Modernizare iluminat stradal
— Cisnădie, jud. SibiuSpațiere 8 px
Radius · umbre
Breakpoint-uri
≤600 mobil · ≤900 tabletă · 1200 container max · grilă 12 col, gutter fluid 20–48 px
Ghid pagină · Home
Pagina principală.
Ierarhie: hero → referințe → servicii → despre → proiecte → cifre → cariere → contact → footer. Alternanță alb / fundal deschis, o singură bandă albastră (cifre), footer grafit.
Energie pusăîn ordine.
Proiectăm, executăm și întreținem instalații electrice pentru industrie, administrații publice și dezvoltatori.
© 2026 PHI EMC pro · Sibiu · phi-emc.ro- 01HeroFundal deschis cu grilă 48 px care se stinge spre alb; titlu display cu a doua linie în PHI Blue; foto 4:5 cu colțare; fulger accent desenat la încărcare.
- 02ServiciiGrilă tehnică cu borduri 1 px (gap 1 px pe fundal --line), 6 carduri, numerotare mono, hover --blue-04.
- 03CifreSingura suprafață PHI Blue plină din pagină; contoare tabulare; textul secundar #D6E6F3 (AA). Valorile sunt demonstrative până la confirmare.
- 04ResponsiveGrilele trec la 2 apoi 1 coloană la 900 / 600 px; header cu meniu pliabil sub 900 px; caption-ul cardului lat se suprapune doar când containerul depășește 560 px (container query).
Ghid pagini · Portofoliu · Despre · Servicii · Cariere · Contact
Restul sistemului de pagini.
Portofoliu cu filtrare pe categorii și anatomie fixă a cardului: imagine · categorie · titlu · locație. Pagina de detaliu: galerie, descriere, rol & servicii, rezultate, client.
Stadionul „Ilie Oană”
— PloieștiIluminat arhitectural centru
— CisnădieSistem fotovoltaic on-grid
— Păstrăvăria SaduInstalație electrică hală
— Continental · SibiuHub de încărcare rapidă
— Cluj-NapocaTelegestiune iluminat stradal
— CisnădiePoveste → valori → echipă
Certificări/autorizări (ANRE, ISO — placeholdere), acoperire geografică, cultură: diversitate & incluziune.
Listă + pagini individuale
Descriere, proces, proiecte relevante, CTA ofertă. Iconografia de serviciu deschide fiecare pagină.
Poziții + formular CV
Listă de roluri cu locație în mono, formular cu upload CV și consimțământ GDPR.
Hartă · formular · date
Hartă Sibiu, formular cu răspuns în 48 h, date firmă ca placeholdere marcate.
Semnătură email
Semnătură de email.
Tabele + CSS inline, compatibilă Outlook / Gmail / Apple Mail. Toate datele personale sunt placeholdere marcate [între paranteze]. Excepție de sistem: butonul din email păstrează colțuri rotunjite.
1 · Previzualizare
2 · Cod HTML (inline CSS) — copiază integral
Găzduiește logo-ul, pictogramele (ic-phone.png, ic-mail.png, ic-globe.png, ic-pin.png, ic-shield.png — cercuri albastre 30 px) și decorul circuit.png la URL-uri publice stabile; clienții de email nu afișează imagini locale. În clienții fără suport pentru gradient/rază (ex. Outlook) butonul se afișează albastru plin cu colțuri drepte — comportament acceptabil.
3 · Versiune text simplu
4 · Pași de instalare
Outlook (desktop)
- 01Fișier → Opțiuni → Mail → Semnături.
- 02Creează o semnătură nouă.
- 03Deschide
signature.htmlîn browser, selectează tot (Ctrl+A), copiază (Ctrl+C). - 04Lipește în editorul de semnătură (Ctrl+V) și salvează.
Gmail
- 01Deschide
signature.htmlîn browser, selectează tot și copiază. - 02Gmail → Setări → Vezi toate setările → General.
- 03La „Semnătură” → Creează → lipește conținutul.
- 04Derulează jos și „Salvează modificările”.
Design tokens
Blocul :root pentru website.
Exact setul de variabile pe care rulează acest brandbook și propunerea de homepage. Copiază-l în stratul @layer tokens al site-ului.
:root{
/* Culori brand */
--phi-blue: #0060A8; /* Primar — PHI Blue */
--phi-blue-dark: #004077; /* Hover / profunzime */
--phi-accent: #1E9BD7; /* Accent energie — marcaje, fulger, focus */
--gray-arrow: #8A9199; /* Gri secundar (săgeți) */
--gray-arrow-2: #A8A8A8; /* Gri deschis (săgeți, decor) */
--text: #1E2A33; /* Grafit — text, footer */
--text-soft: #5A6771; /* Text secundar (AA pe alb) */
--bg: #F5F7F9; /* Fundal deschis */
--white: #FFFFFF;
--line: #E2E7EC; /* Borduri 1px */
/* Suprafețe derivate — nu se inventează hex-uri noi */
--blue-04: color-mix(in oklch, var(--phi-blue) 4%, white); /* hover */
--blue-08: color-mix(in oklch, var(--phi-blue) 8%, white); /* badge */
--blue-16: color-mix(in oklch, var(--phi-blue) 18%, white); /* numerale */
--blue-on: #D6E6F3; /* text pe PHI Blue (5.2:1) */
/* Tipografie */
--font-head: "Montserrat","Segoe UI",Arial,sans-serif;
--font-body: "Inter","Segoe UI",Arial,sans-serif;
--font-mono: "IBM Plex Mono","SFMono-Regular",Consolas,Menlo,monospace;
--fs-display: clamp(2.625rem, 1.5rem + 4.6vw, 5.5rem);
--fs-h2: clamp(1.875rem, 1.25rem + 2.2vw, 3rem);
--fs-h3: clamp(1.125rem, 1rem + .5vw, 1.375rem);
--fs-lead: clamp(1.0625rem, 1rem + .4vw, 1.3125rem);
--fs-body: 1.0625rem; --fs-small: .875rem; --fs-mono: .75rem;
/* Spațiere — grilă 8px */
--s1:8px; --s2:16px; --s3:24px; --s4:32px;
--s5:48px; --s6:64px; --s7:96px; --s8:128px;
--gutter: clamp(20px, 4vw, 48px); --maxw: 1200px;
/* Geometrie: colțuri drepte · umbre plate */
--r: 0;
--shadow-sm: 0 1px 2px rgba(30,42,51,.08);
--shadow-md: 0 8px 24px rgba(30,42,51,.08);
--shadow-lg: 0 20px 48px rgba(0,96,168,.12);
/* Mișcare — subtilă, respectă prefers-reduced-motion */
--ease: cubic-bezier(.22,.61,.36,1); --dur: .7s;
}