Alapok
A HR Portál designrendszer alapvető elemei, amelyek biztosítják az egységes megjelenést minden felületen.
Színpaletta
Színpalettánk az Audi márka színeit követi, kiegészítve specifikus HR-témájú színekkel.
Elsődleges színek
Audi HR Zöld
Elsődleges CTA-khoz, kiemelésekhez
Audi Red
Audi márkaidentitás, másodlagos elemek
Black
Fő szövegek, címsorok
White
Háttér, kártyák
Szürke árnyalatok
Dark Gray
Másodlagos szövegek
Medium Gray
Leírások, metaadatok
Light Gray
Elválasztók, keret
Állapot színek
Info Blue
Információs állapot
Warning Yellow
Figyelmeztetés, folyamatban
Success Green
Sikeres műveletek
Error Red
Hibaüzenetek
HR specifikus színek
Approved Green
Jóváhagyott kérelmek
Process Indigo
Folyamatábrák, HR folyamatok
Document Brown
Dokumentumok, szerződések
Tipográfia
Az Audi Type betűtípust használjuk elsődleges fontként a HR Portálon, fallback fontként pedig a Helvetica Neue / Arial családot.
Címsorok
H1 – 40px / Bold / 48px sormagasság
Az Audi innovatív HR megoldásai
H2 – 32px / Medium / 40px sormagasság
Munkavállalói juttatások
H3 – 24px / Regular / 32px sormagasság
Belső kommunikációs platformok
H4 – 20px / Medium / 28px sormagasság
Dokumentáció és folyamatok
Szövegtörzs
Body – 16px / Regular / 24px sormagasság
Az Audi Hungaria belső HR portálja a mindennapi munkavégzéshez szükséges információkat és eszközöket biztosítja. Itt találhatók a szabadságigényléshez, juttatások kezeléséhez, és a belső kommunikációhoz szükséges funkciók. Kollégáink számára átlátható és hatékony munkakörnyezetet teremtünk, ahol a belső folyamatok könnyen kezelhetők.
Small – 14px / Regular / 20px sormagasság
A platformon keresztül elérhetők a legfrissebb HR hírek, események, és tréningek. Minden munkavállaló számára egyénre szabott tartalmak jelennek meg, könnyítve a releváns információk elérését.
Extra Small – 12px / Regular / 16px sormagasság
Jogi nyilatkozatok, lábjegyzetek, és metaadatok megjelenítésére használjuk. Ezek az információk általában kiegészítő jellegűek, és nem képezik a fő tartalmi elemek részét.
Típusfont mintaként
Regular
Aaabcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789.,;:?!@#$%^&*()
Medium
Aaabcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789.,;:?!@#$%^&*()
Bold
Aaabcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789.,;:?!@#$%^&*()
Rács & térköz
A HR Portál egy rugalmas 12 oszlopos rácsrendszert használ, amely biztosítja a tartalmak következetes elrendezését és reszponzivitását.
12 oszlopos rács
A 12 oszlopos rács lehetővé teszi a rugalmas elrendezést és alkalmazkodik a különböző képernyőméretekhez. Minden elem elhelyezése ezen a rácson alapul, biztosítva a konzisztens megjelenést az egész portálon.
Elrendezési példák
Térközök és margók
16px / 1rem térköz
32px / 2rem térköz
Árnyékok & rétegek
Az árnyékok a felhasználói felület elemeinek térbeli rétegzését támogatják, segítve a hierarchia vizuális megjelenítését.
Alacsony árnyék
shadow-sm
Közepes árnyék
shadow
Magas árnyék
shadow-lg
Használati irányelvek
Alacsony árnyék (shadow-sm)
- Alapelemekhez, kártyákhoz, konténerekhez
- Enyhe vizuális elválasztás az alap felülettől
Közepes árnyék (shadow)
- Interaktív komponensekhez, mint a dropdown menük
- Hover állapotokhoz, kiemelésekhez
Magas árnyék (shadow-lg)
- Modálokhoz, dialógus ablakokhoz
- Kiemelt, lebegő UI elemekhez
Általános szabályok
- Az árnyékok mélysége jelzi az elem hierarchiáját
- Következetesen használd az árnyékokat a teljes felületen