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. Trei variante, o componentă.

Introducere de secțiune

Card valoare

Card domeniu

Card contact

Membru echipă

Gabriel Iovu

Franchise Owner București

Card articol

Blog2 oct. 2025Robert Brezoaie

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

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 din SUA și cum se vor traduce cercetările lui în experiența copiilor la Punctul IT!

Read more

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. 22 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”. Săgețile CTA sunt orizontale.

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: deplasare ușoară. Articole: zoom mic al fotografiei. Introduceri și compoziții: intrare o singură dată în viewport. Header: sticky nativ, logo 64 → 44 px la scroll și meniu mobil cu panou lateral. Module grafice: parallax nativ discret, plutire de 4,2 secunde la intrare și difuzie opțională. 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 și parallaxul. Plutirea decorativă se încheie după 4,2 secunde. Parallaxul este oprit sub 992 px. Fără scroll-jacking sau librării 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.