SC STEEL SRL · Ghid de identitate vizuală

Ideea semnului

Semnul grafic este o scară cu balustradă văzută din profil: treptele ascendente, trei montanți și mâna curentă continuă, desenate cu aceeași grosime de linie și capete rotunjite, ca o țeavă de inox îndoită. Spune exact ce face fabrica, fără ornamente, și rămâne lizibil de la 16 px (favicon) până la firma luminoasă.

icon/steel-icon-blue.svg

icon/steel-icon-white.svg

icon/steel-icon-dark.svg

Logo

Varianta principală este cea orizontală, color (semn albastru-oțel, text grafit). Pe fundal închis se folosește varianta albă; pentru gravură, ștampilă sau fax, varianta monocromă.

logo/steel-logo-horizontal-color.svg · principal, fundal deschis

logo/steel-logo-horizontal-white.svg · fundal închis

logo/steel-logo-horizontal-dark.svg · monocrom (gravură, ștampilă)

varianta albă pe albastrul de brand

logo/steel-logo-vertical-color.svg · vertical, pentru avatar, etichete, spații înguste

logo/steel-logo-vertical-white.svg

Spațiu de protecție și dimensiuni minime

Spațiu de protecție

În jurul logo-ului se păstrează liber cel puțin înălțimea literei „S” din nume (x). Nimic nu intră în această zonă: text, poze, margini.

Dimensiuni minime

Orizontal: minimum 120 px lățime pe ecran / 30 mm la tipar. Vertical: 70 px / 20 mm. Sub aceste dimensiuni se folosește doar semnul grafic (icon) sau favicon-ul.

240 px

120 px (minim)

icon 32 px

favicon 16 px

Favicon și iconițe de aplicație

La 16–32 px liniile subțiri dispar, de aceea favicon-ul este o variantă îngroșată a semnului, albă pe fundal albastru cu colțuri rotunjite. Toate formatele sunt generate în favicon/, iar codul pentru <head> este în favicon/head-snippet.html.

16 px

32 px

48 px

Apple touch 180 px

Android 192 / 512 px

favicon.svg (vector)

Paleta cromatică

Culorile vin din materialele fabricii: grafit pentru text și fundaluri închise, albastru-oțel (reflexia inoxului) ca unic accent, gri-inox pentru fundaluri deschise și un stejar folosit rar, ca linie sau detaliu.

Grafit#1B1F23 · RGB 27 31 35 · CMYK 78 68 60 78
text, fundal închis, logo monocrom

Albastru-oțel#1E4D8C · RGB 30 77 140 · CMYK 92 70 12 2
semnul grafic, butoane, linkuri, favicon

Grafit deschis#2B3036 · RGB 43 48 54
text curent

Zinc#6F7982 · RGB 111 121 130
text secundar, tagline-ul din logo

Inox mat#EEF1F3 · RGB 238 241 243
fundaluri deschise, secțiuni alternate

Albastru pal#E1E9F4 · RGB 225 233 244
stări active, focus, etichete

Stejar#9A6A32 · RGB 154 106 50
accent rar (linii, detalii de lemn)

Alb#FFFFFF
fundal principal, logo pe fundal închis

Tipografie

Big Shoulders Display

Titluri și numele din logo. Grotesc condensat, industrial, greutate 800 (Black) pentru titluri mari și 700 pentru subtitluri. Majuscule doar în logo; în text, titlurile se scriu normal, cu diacritice. Gratuit, Google Fonts / SIL Open Font License.

Montserrat

Text, meniu, butoane, tagline. Geometric, sobru, foarte lizibil pe ecran și la dimensiuni mici. 400 pentru text, 500 pentru tagline, 600–700 pentru butoane și etichete. Gratuit, Google Fonts / SIL OFL.

Fișierele font (variabile, .ttf) sunt livrate în fonts/. Fonturile de rezervă, dacă nu se pot încărca: Arial Narrow pentru titluri, Arial pentru text.

Reguli de utilizare

Așa da

Logo color pe alb sau pe inox mat; logo alb pe grafit, pe albastru sau pe fotografii întunecate.
Semnul grafic singur pentru avatar, favicon, ștampilă, gravură laser pe inox.
Se scalează proporțional, din fișierele SVG (vector), nu din capturi de ecran.
Pe fotografii, numai varianta albă, pe zone liniștite ale imaginii.

Așa nu

Nu se schimbă culorile, nu se adaugă umbre, gradient, contur sau efect de crom.
Nu se întinde, nu se rotește, nu se așază în cerc sau în scut.
Nu se rescrie numele cu alt font și nu se separă tagline-ul de logo la altă mărime.
Nu se folosește logo-ul color pe fundaluri închise sau pe albastru (contrast insuficient).

Rețele sociale

Formate gata de urcat: avatar pătrat (semn alb pe albastru), imagine de partajare (Open Graph), copertă Facebook și LinkedIn. Toate sunt și în SVG, pentru modificări ulterioare.

social/avatar-1080.png · profil Facebook, Instagram, Google Business, WhatsApp Business

social/og-image-1200x630.png · imaginea afișată la partajarea site-ului

social/facebook-cover-1640x624.png · copertă Facebook

Fișiere livrate

Folder	Conținut	Când se folosește
`logo/`	SVG vectorial: orizontal și vertical, în color / dark (monocrom grafit) / white, plus variante cu fundal grafit inclus	site, documente, print, firme, autocolante auto; se deschid în Illustrator, Figma, Canva, CorelDRAW
`icon/`	semnul grafic singur, SVG: albastru, grafit, alb, alb pe grafit, alb pe albastru	avatar, ștampilă, gravură, aplicații, watermark
`favicon/`	favicon.svg, favicon.ico (16/32/48), PNG 16–512, apple-touch-icon, site.webmanifest, head-snippet.html	site WordPress (Customizer → Site Icon sau prin head-snippet)
`png/`	PNG cu fundal transparent: logo 2000 px lățime, icon 1024 px, în toate cele trei culori	Word, PowerPoint, e-mail, platforme care nu acceptă SVG
`social/`	avatar 1080, OG image 1200×630, coperți Facebook și LinkedIn (PNG + SVG)	rețele sociale, Google Business Profile
`fonts/`	Big Shoulders Display și Montserrat (variabile, .ttf, licență SIL OFL)	instalare pe calculatoarele firmei pentru documente
`_src/`	scriptul care generează toate fișierele de mai sus	doar pentru dezvoltator, la modificări ulterioare