Punctul IT. Sistem de design.

Manualul de brand transpus în resurse native Bricks. Culori, Muli, scară tipografică și componente sincronizate.

Clase după rol. Valori comune în variabile. Structuri repetate în componente. O singură sursă pentru fiecare regulă.

Paleta din manual

Nuanțe derivate 50–950, generate nativ în Bricks. Treapta 500 păstrează exact culoarea din manual; nuanțele rămân în aceeași paletă.

Alb pe albastrul de brand: 2.83:1. Alegere vizuală cerută explicit, sub pragul WCAG AA pentru text. Negru pe aceeași culoare: 7.41:1. Nuanțele închise rămân disponibile pentru alte combinații.

Muli. Raport 4/3.

Font local, cu greutățile 200, 400, 700 și 800. Textul web de lectură pornește de la 16 px.

Aa ĂÂ Î ȘȚ. Punctul IT. 16 / --text-m

Aa ĂÂ Î ȘȚ. Punctul IT. 21 / --text-l

Aa ĂÂ Î ȘȚ. Punctul IT. 28 / --text-xl

Aa ĂÂ Î ȘȚ. Punctul IT. 37 / --text-2xl

Aa ĂÂ Î ȘȚ. Punctul IT. 50 / --text-3xl

Accente: Playfair Display

Muli construiește structura. Playfair Display evidențiază câteva cuvinte din headinguri, fără să schimbe textul sau nivelul semantic.

De la consumator la creator. Ă Â Î Ș Ț.

Spațieri comune

Padding, margin și gap folosesc scara space-. Treptele sunt fluide, iar rolurile rămân consecvente pe toate paginile.

Buton. Cinci variante, o componentă.

Introducere de secțiune

Card valoare

Card domeniu

Pe cardurile colorate, titlul, descrierea, pictograma și linkurile semantice sunt albe. Linkurile din paragrafe rămân subliniate; butoanele își păstrează stilul propriu. Contextul comun este pit-on-color.

Card contact

Membru echipă

Gabriel Iovu

Franchise Owner București

Portret în ramă de brand, colțuri cromatice, nume proeminent, rol compact și profil social. Componenta extinsă adaugă o biografie fără a schimba ierarhia de bază.

Card articol

Știri

Punctul IT se dezvoltă constant: Oportunități internaționale cu Robert Brezoaie în SUA

2 oct. 2025Robert Brezoaie

Află cum a ajuns fondatorul nostru Robert Brezoaie să exploreze lumea mitică a MIT, Harvard și Villanova University, să schimbe idei cu antreprenori de top...

citește

Eticheta Știri sau Resurse stă pe imagine și are pictogramă semantică. Data și autorul rămân pe un singur rând sub titlu. Rezumatul are maximum 160 de caractere, încheiat cu «...», iar acțiunea este «citește».

Reguli de utilizare

Theme Style setează baza. Clasele pit- descriu rolul. Variabilele text- și space- păstrează valorile. Componentele păstrează structura și expun numai proprietățile necesare.

Fără dimensiuni de font arbitrare și fără padding, margin sau gap repetate în pixeli. Excepții pentru geometrie: borduri, dimensiuni de imagine, lățime maximă și ținte de interacțiune.

Iconuri cu personalitate.

Phosphor Duotone. 52 de SVG-uri locale în Icon Manager-ul nativ, cu același stil în carduri, butoane și legături sociale. Pictogramele decorative nu dublează etichetele pentru cititoarele de ecran. Iconurile sociale folosesc accentele platformelor din paleta separată „Platforme sociale”.

Cele 52 de pictograme rămân o singură bibliotecă Phosphor Duotone. Se aleg după sens: contact, calendar, locație, video, programare, colaborare, resurse sau știri. Iconurile decorative au aria-hidden; linkurile numai cu icon au nume accesibil.

Mișcare cu intenție.

Butoane: contur desenat la hover și focus vizibil. Săgeată numai la CTA-ul principal. Iconuri: rotație scurtă. Locații: de la gri la culoare la hover sau focus; pe ecranele tactile, culoarea rămâne vizibilă. Articole: zoom discret al fotografiei. Introduceri și compoziții: intrare o singură dată în viewport. Header: sticky nativ, logo compact de 36 px pe desktop și 44 px pe mobil. Module grafice: parallax nativ și plutire continuă în cicluri de 12,6 sau 16,8 secunde. Umbre: două niveluri comune, soft și raised.

Preferința «reducerea mișcării» oprește tranzițiile, deplasările, rotațiile, zoom-ul, intrările, plutirea continuă și parallaxul. Parallaxul este oprit sub 992 px. Conținutul rămâne vizibil și utilizabil fără animație. Fără scroll-jacking sau biblioteci JavaScript suplimentare.

Card locație. Aceeași structură, trei destinații.

Componentă nativă sincronizată: ilustrație, text alternativ, destinație și accent cromatic. Fără duplicarea structurii.

Ilustrațiile trec din gri în culoare la hover și focus pe desktop. Pe mobil se afișează direct color; când reducerea mișcării este activă, schimbarea nu folosește tranziție.