Shoprenter Arculati Útmutató

Összegyűjtöttük egy helyre azokat az arculati elemeket és sajátosságokat, amelyek tükrözik a Shoprenter és a mögötte álló csapat értékeit és kultúráját.

Ezeket bátran használhatod a velünk való együttműködés során.

Név

A Shoprenter egy szó, leírva nagy "S"-sel és kis "r"-rel. Korábban nagy "S"-sel és nagy "R"-rel írtuk, de az idők változnak.

ÚJ
Shoprenter
RÉGI
ShopRenter

Színek

Fő színek

Másodlagos színek

Kiegészítő színek

Betűtípusok

A Shoprenter webes és print megjelenésében a Poppins és a Gilroy stílusok számítanak elfogadottnak. Websafe betűtípusnak a Verdana-t használhatjuk. A készleteket a következő linkeken tudjátok letölteni.

Poppins Gilroy
Poppins
Poppins Light 300
Poppins Regular 400
Poppins Medium 500
Poppins SemiBold 600
Poppins Bold 700
Poppins ExtraBold 800
Poppins Light 300 Italic
Poppins Regular 400 Italic
Poppins Medium 500 Italic
Poppins SemiBold 600 Italic
Poppins Bold 700 Italic
Poppins ExtraBold 800 Italic

Font size

Line height

H1 60px

Heading 1 Bold

72px
H2 48px

Heading 2 Bold

60px
H3 30px

Heading 3 Bold

38px
H3 30px

Heading 3 Regular

38px
H4 20px

Heading 4 Bold

28px
H5 20px
Heading 5 Regular
28px
H6 16px
Heading 6 Bold
28px
P 20px Body Regular Highlighted 28px
P 16px Body Light 24px
P 16px Body Regular 24px
P 16px Body Medium 24px
P 14px Small Regular 20px
P 12px Extra Small Regular 20px
P 12px Caption Medium 16px

Grid rendszer

A Shoprenteres látványtervek elkészítéséhez 12 oszlops Grid systemt használunk. Használhatjuk Figmában vagy a Figma fileban lévő Grid rendszer kiexportálásával Photoshopban.

Figma Grid rendszer

Komponensek

Gombok

Elsődleges gomb stílusnak használjuk a Shoprenter Zöld szín gradiens változatát.

Button 63 px
Button 54 px
Button 45 px
Kicsi
Másol
Button 36 px
Nagyon kicsi
Másol
Állapotok
Inaktív
Másol
Gomb ikonnal
Másol
Button 63 px
Button 54 px
Button 45 px
Kicsi
Másol
Button 36 px
Nagyon kicsi
Másol
Állapotok
Inaktív
Másol
Gomb ikonnal
Másol
Gomb csoport
Másol

Űrlapok

Input
Másol
Inaktív
Másol
Valid
Másol
Hiba szövege
Input gombbal
Másol
Select
Másol
Inaktív
Másol
Checkbox
Másol
Inaktív
Másol
Kiválasztott checkbox
Másol
Radio
Másol
Kiválasztott radio
Másol
Lapozó
Másol

Egyéb elemek

  1. Lorem ipsum dolor sit amet.
  2. Lorem ipsum dolor sit amet, consectetur adipisicing.
  3. Lorem ipsum dolor sit amet.
  4. Lorem ipsum dolor sit amet.
Számozott lista
Másol
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
Pontozott lista
Másol
Tab1 tartalom
Tab2 tartalom
Tab3 tartalom

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At commodi facere iure quae quos! Aut blanditiis deserunt ipsa reiciendis sit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, sapiente.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, vero voluptatum! Maxime.

Anim pariatur cliche reprehenderit, eunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, eunt you probably haven't heard of them accusamus labore sustainable VHS.
Accordion
Másol
Sikeres foglalás!
Siker
Másol
Sikeres foglalás!
Figyelmeztetés
Másol
Érvénytelen dátum
Információ
Információ
Másol
Alert
Másol
Felugró ablak
Másol

Slider
Másol
Videó
Másol
Oszlop 1 Oszlop 2 Oszlop 3 Oszlop 4 Oszlop 5
Lorem consectetur 2.25 2200 4000
Ipsum adipiscing 4.0 1200 2000
Dolor suspendisse 3.5 2000 3400
Sit enim 2.5 1000 1000
Amet malesuada 1.25
Táblázat
Másol

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."

Idézet
Másol