HSE webshop
Scalable Design System
HSE, formerly known as HSE24, is a German teleshopping company. In 2020, as part of the design team, I developed a comprehensive design system for the website as part of the rebranding process.
HSE webshop
Scalable Design System
HSE, formerly known as HSE24, is a German teleshopping company. In 2020, as part of the design team, I developed a comprehensive design system for the website as part of the rebranding process.
Colors
Primary colors
Brand-orange
#FF3C28
Primary colors
Brand-orange
#FF3C28
Primary colors
Brand-orange
#FF3C28
Title
Sale-red
#BE0A14
Title
Sale-red
#BE0A14
Title
Sale-red
#BE0A14
Font colors
Dark
#252525
Font colors
Dark
#252525
Font colors
Dark
#252525
Title
Iron
#646c84
Title
Iron
#646c84
Title
Iron
#646c84
Title
White
#ffffff
Title
White
#ffffff
Title
White
#ffffff
Lightgray scale
Lightgrey
#DCE6EB
Lightgray scale
Lightgrey
#DCE6EB
Lightgray scale
Lightgrey
#DCE6EB
Title
Lightgrey-mid
#E9EFF2
Title
Lightgrey-mid
#E9EFF2
Title
Lightgrey-mid
#E9EFF2
Title
Lightgrey-light
#EAF0F3
Title
Lightgrey-light
#EAF0F3
Title
Lightgrey-light
#EAF0F3
Title
Lightgrey-lightest
#F4F7F9
Title
Lightgrey-lightest
#F4F7F9
Title
Lightgrey-lightest
#F4F7F9
Title
Lightgrey-lightest
#F4F7F9
Title
Lightgrey-lightest
#F4F7F9
Nightblue scale
Nightblue
#081F3E
Nightblue scale
Nightblue
#081F3E
Nightblue scale
Nightblue
#081F3E
Title
Nightblue-mid
#46576F
Title
Nightblue-mid
#46576F
Title
Nightblue-mid
#46576F
Title
Nightblue-light
#838F9E
Title
Nightblue-light
#838F9E
Title
Nightblue-light
#838F9E
Title
Nightblue-lightest
#C1C7CF
Title
Nightblue-lightest
#C1C7CF
Title
Nightblue-lightest
#C1C7CF
Title
Nightblue-lightest
#C1C7CF
Title
Nightblue-lightest
#C1C7CF
Typography
The typography features Lato, chosen for its clean and clear design. Font styles vary between mobile and desktop views, but text sizes below 16px remain consistent across both platforms.
Typography
The typography features Lato, chosen for its clean and clear design. Font styles vary between mobile and desktop views, but text sizes below 16px remain consistent across both platforms.
Typography
The typography features Lato, chosen for its clean and clear design. Font styles vary between mobile and desktop views, but text sizes below 16px remain consistent across both platforms.
Headline for mobile
B4 Headline
Font size 24px Line height 32px
B3 Headline
Font size 24px Line height 32px
B2 Headline
Font size 20px Line height 28px
B1 Headline
Font size 18px Line height 24px
Headline for mobile
B4 Headline
Font size 24px Line height 32px
B3 Headline
Font size 24px Line height 32px
B2 Headline
Font size 20px Line height 28px
B1 Headline
Font size 18px Line height 24px
Headline for desktop
B4 Headline
Font size 28px Line height 32px
B3 Headline
Font size 24px Line height 32px
B2 Headline
Font size 20px Line height 28px
B1 Headline
Font size 18px Line height 24px
Headline for desktop
B4 Headline
Font size 28px Line height 32px
B3 Headline
Font size 24px Line height 32px
B2 Headline
Font size 20px Line height 28px
B1 Headline
Font size 18px Line height 24px
Body for mobile and desktop
Body default regular
Font size 16px Line height 24px
Body default narrow regular
Font size 16px Line height 20px
Body small regular
Font size 14px Line height 21px
Body small narrow regular
Font size 14px Line height 18px
Body smaller regular
Font size 12px Line height 18px
Body smaller narrow regular
Font size 12px Line height 15px
Body for mobile and desktop
Body default regular
Font size 16px Line height 24px
Body default narrow regular
Font size 16px Line height 20px
Body small regular
Font size 14px Line height 21px
Body small narrow regular
Font size 14px Line height 18px
Body smaller regular
Font size 12px Line height 18px
Body smaller narrow regular
Font size 12px Line height 15px
Body bold for mobile and desktop
Body default bold
Font size 16px Line height 24px
Body default narrow bold
Font size 16px Line height 20px
Body small narrow bold
Font size 14px Line height 18px
body smaller narrow bold
Font size 12px Line height 15px
Body small bold
Font size 14px Line height 21px
body smaller bold
Font size 12px Line height 18px
Body bold for mobile and desktop
Body default bold
Font size 16px Line height 24px
Body default narrow bold
Font size 16px Line height 20px
Body small narrow bold
Font size 14px Line height 18px
body smaller narrow bold
Font size 12px Line height 15px
Body small bold
Font size 14px Line height 21px
body smaller bold
Font size 12px Line height 18px
User
Logged in
User Data
Menu
Log Out
Bag
Address
Pack Station
Truck
Invoice
Delivered
Packed
House
TV
Website
Cellphone
Shield
Lock
Lupe
Zoom Lupe
Tracking
Zoom Finger
Click Finger
Image
Info
Warning
Bell
Video
Heart
Home
Loading
Clock
Sale
Euro
Yes
No
Dead
Unhappy
Poker Face
Smile
Laugh
Sorry
Order
Order Check
Autofilled
Direct Debit
Installment
Wallet
Telephone
Telephonebook
Customer Service
E-Mail in
Trashbin
30Days Exchange
E-Product Return
Exchange
Treuabo
Salute
Label
Sorry Image
No Internet
Play
Chat Box
Download
Share
Medal
Spedition
Filter
Bubble
Voucher
Calendar
Fashion
Cosmetic
Jewelly
Wellness
Household
Deko
Icons
Forms
Forms
Forms
Label
Label
Label
Please fill in the value.
Label
|
Label
Value
Label
Value
Label
Value
The value is wrong.
Label
Value|
Unselected
Selected
Selected & disabled
Unselected & disabled
Error
Unselected
Selected
Unselected & disabled
Label
Label
Label
Please fill in the value.
Label
|
Label
Value
Label
Value
Label
Value
The value is wrong.
Label
Value|
Unselected
Selected
Selected & disabled
Unselected & disabled
Error
Unselected
Selected
Unselected & disabled
Label
Label
Label
Please fill in the value.
Label
|
Label
Value
Label
Value
Label
Value
The value is wrong.
Label
Value|
Unselected
Selected
Selected & disabled
Unselected & disabled
Error
Unselected
Selected
Unselected & disabled
Primary default
Primary hover
Primary disabled
Secondary default
Secondary hover
Secondary disabled
Label Active
Label Hover
Label default
Regular text link default
Dark bold text on color frame
White bold text on image
Selected
Unselected
Primary default
Primary hover
Primary disabled
Secondary default
Secondary hover
Secondary disabled
Label Active
Label Hover
Label default
Regular text link default
Dark bold text on color frame
White bold text on image
Selected
Unselected
Primary default
Primary hover
Primary disabled
Secondary default
Secondary hover
Secondary disabled
Label Active
Label Hover
Label default
Regular text link default
Dark bold text on color frame
White bold text on image
Selected
Unselected
Buttons
Buttons
Buttons
Next project
HSE call center
Internal Order Management System for Agents
Next project
HSE call center
Internal Order Management System for Agents
Next project
HSE call center
Internal Order Management System for Agents