Hive Home Living Style Guide

Colours

Main colours

Cranberry - [ Red ]
#e12948
Orange - [ Orange ]
#ff7a00
Merigold - [ Gold ]
#ffb936
Butter - [ Yellow Dark ]
#ffd536
Lemon - [ Yellow ]
#fee933
Lime - [ Lime ]
#b4d627
Emerald - [ Green ]
#3de8ab
Sapphire - [ Blue ]
#3d61e8
Violet - [ Purple ]
#8936ff

Neutral colours

Midnight - [ Gray darkest ]
#293d48
Slate - [ Gray dark ]
#33495b
Evening - [ Gray ]
#5c6d7c
Graphite - [ Gray light ]
#ccd2d6
Stone - [ Gray lightest ]
#e0e4e6
Chalk - [ Gray white ]
#f4f5f6
White - [ White ]
#fff

* [ ... ] Denotes code-based naming

Typography

This is Bariol font.
Our brand typeface.

We have amazing products and services for the connected home – and now we have a connected identity system. We’ve updated our brand elements so that they work together – a design system that will work flexibly and consistently in digital and physical environments. They help our brand to reflect our brand position ‘Hive helps you live brilliantly’.

Bariol Regular

60 Bariol Regular .display-1

48 Bariol Regular

36 Bariol Regular

28 Bariol Regular

24 Bariol Regular

20 Bariol Regular
18 Bariol Regular

16 Bariol Regular

14 Bariol Regular

36 Bariol Regular

28 Bariol Regular

24 Bariol Regular

20 Bariol Regular
18 Bariol Regular

16 Bariol Regular

14 Bariol Regular

36 Bariol Regular

28 Bariol Regular

24 Bariol Regular

20 Bariol Regular
18 Bariol Regular

16 Bariol Regular

14 Bariol Regular

36 Bariol Regular

28 Bariol Regular

24 Bariol Regular

20 Bariol Regular
18 Bariol Regular

16 Bariol Regular

14 Bariol Regular

36 Bariol Regular

28 Bariol Regular

24 Bariol Regular

20 Bariol Regular
18 Bariol Regular

16 Bariol Regular

14 Bariol Regular

36 Bariol Regular

28 Bariol Regular

24 Bariol Regular

20 Bariol Regular
18 Bariol Regular

16 Bariol Regular

14 Bariol Regular

36 Bariol Regular

28 Bariol Regular

24 Bariol Regular

20 Bariol Regular
18 Bariol Regular

16 Bariol Regular

14 Bariol Regular

36 Bariol Regular

28 Bariol Regular

24 Bariol Regular

20 Bariol Regular
18 Bariol Regular

16 Bariol Regular

14 Bariol Regular

36 Bariol Regular

28 Bariol Regular

24 Bariol Regular

20 Bariol Regular
18 Bariol Regular

16 Bariol Regular

14 Bariol Regular

36 Bariol Regular

28 Bariol Regular

24 Bariol Regular

20 Bariol Regular
18 Bariol Regular

16 Bariol Regular

14 Bariol Regular

36 Bariol Regular

28 Bariol Regular

24 Bariol Regular

20 Bariol Regular
18 Bariol Regular

16 Bariol Regular

14 Bariol Regular

36 Bariol Regular

28 Bariol Regular

24 Bariol Regular

20 Bariol Regular
18 Bariol Regular

16 Bariol Regular

14 Bariol Regular

36 Bariol Regular

28 Bariol Regular

24 Bariol Regular

20 Bariol Regular
18 Bariol Regular

16 Bariol Regular

14 Bariol Regular

36 Bariol Regular

28 Bariol Regular

24 Bariol Regular

20 Bariol Regular
18 Bariol Regular

16 Bariol Regular

14 Bariol Regular

36 Bariol Regular

28 Bariol Regular

24 Bariol Regular

20 Bariol Regular
18 Bariol Regular

16 Bariol Regular

14 Bariol Regular

36 Bariol Regular

28 Bariol Regular

24 Bariol Regular

20 Bariol Regular
18 Bariol Regular

16 Bariol Regular

14 Bariol Regular

36 Bariol Regular

28 Bariol Regular

24 Bariol Regular

20 Bariol Regular
18 Bariol Regular

16 Bariol Regular

14 Bariol Regular

36 Bariol Regular

28 Bariol Regular

24 Bariol Regular

20 Bariol Regular
18 Bariol Regular

16 Bariol Regular

14 Bariol Regular


Bariol Medium

60 Bariol Medium .display-1

48 Bariol Medium

36 Bariol Medium

28 Bariol Medium

24 Bariol Medium

20 Bariol Medium
18 Bariol Medium

16 Bariol Medium

14 Bariol Medium

36 Bariol Medium

28 Bariol Medium

24 Bariol Medium

20 Bariol Medium
18 Bariol Medium

16 Bariol Medium

14 Bariol Medium

36 Bariol Medium

28 Bariol Medium

24 Bariol Medium

20 Bariol Medium
18 Bariol Medium

16 Bariol Medium

14 Bariol Medium

36 Bariol Medium

28 Bariol Medium

24 Bariol Medium

20 Bariol Medium
18 Bariol Medium

16 Bariol Medium

14 Bariol Medium

36 Bariol Medium

28 Bariol Medium

24 Bariol Medium

20 Bariol Medium
18 Bariol Medium

16 Bariol Medium

14 Bariol Medium

36 Bariol Medium

28 Bariol Medium

24 Bariol Medium

20 Bariol Medium
18 Bariol Medium

16 Bariol Medium

14 Bariol Medium

36 Bariol Medium

28 Bariol Medium

24 Bariol Medium

20 Bariol Medium
18 Bariol Medium

16 Bariol Medium

14 Bariol Medium

36 Bariol Medium

28 Bariol Medium

24 Bariol Medium

20 Bariol Medium
18 Bariol Medium

16 Bariol Medium

14 Bariol Medium

36 Bariol Medium

28 Bariol Medium

24 Bariol Medium

20 Bariol Medium
18 Bariol Medium

16 Bariol Medium

14 Bariol Medium

36 Bariol Medium

28 Bariol Medium

24 Bariol Medium

20 Bariol Medium
18 Bariol Medium

16 Bariol Medium

14 Bariol Medium

36 Bariol Medium

28 Bariol Medium

24 Bariol Medium

20 Bariol Medium
18 Bariol Medium

16 Bariol Medium

14 Bariol Medium

36 Bariol Medium

28 Bariol Medium

24 Bariol Medium

20 Bariol Medium
18 Bariol Medium

16 Bariol Medium

14 Bariol Medium

36 Bariol Medium

28 Bariol Medium

24 Bariol Medium

20 Bariol Medium
18 Bariol Medium

16 Bariol Medium

14 Bariol Medium

36 Bariol Medium

28 Bariol Medium

24 Bariol Medium

20 Bariol Medium
18 Bariol Medium

16 Bariol Medium

14 Bariol Medium

36 Bariol Medium

28 Bariol Medium

24 Bariol Medium

20 Bariol Medium
18 Bariol Medium

16 Bariol Medium

14 Bariol Medium

36 Bariol Medium

28 Bariol Medium

24 Bariol Medium

20 Bariol Medium
18 Bariol Medium

16 Bariol Medium

14 Bariol Medium

36 Bariol Medium

28 Bariol Medium

24 Bariol Medium

20 Bariol Medium
18 Bariol Medium

16 Bariol Medium

14 Bariol Medium

36 Bariol Medium

28 Bariol Medium

24 Bariol Medium

20 Bariol Medium
18 Bariol Medium

16 Bariol Medium

14 Bariol Medium

Alerts

Breadcrumb

Buttons

Primary

Secondary

Sapphire

Cranberry

White

Destructive

Cards

H1-1

What's right for you?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consequat orci eget erat ullamcorper, eget rutrum dui malesuada.

Start Quiz What to cover Btn-play-gray
20% off
H1-2

Save 20% off Hive View cameras

Get peace of mind that your home's protected this Christmas with our Outdoor Camera, now includes Video Playback.

20% off
H1-2

Save 20% off Hive View cameras

Get peace of mind that your home's protected this Christmas with our Outdoor Camera, now includes Video Playback.

Forms


5




Hero

Hero desktop style

Hero-placeholder

Title goes here

Subtitle goes Here

Unlock our Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Hero mobile style

Hero-placeholder-sm

Title goes here

Subtitle goes Here

Unlock our Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Icons

Default SVG icons

icon-actions
icon-actions
icon-advance
icon-advance
icon-alert
icon-alert
icon-call
icon-call
icon-away
icon-away
icon-back
icon-back
icon-bathroom
icon-bathroom
icon-battery-empty
icon-battery-empty
icon-battery-full
icon-battery-full
icon-battery-quarter
icon-battery-quarter
icon-battery-three quarters
icon-battery-three-quarters
icon-bluetooth
icon-bluetooth
icon-boiler-iq
icon-boiler-iq
icon-boost
icon-boost
icon-button
icon-button
icon-call
icon-call
icon-camera
icon-camera
icon-clear
icon-clear
icon-clock
icon-clock
icon-close
icon-close
icon-coffee
icon-coffee
icon-colour
icon-colour
icon-compose
icon-compose
icon-connected
icon-connected
icon-controls
icon-controls
icon-copy
icon-copy
icon-cupboard
icon-cupboard
icon-cuttlery-drawer
icon-cuttlery-drawer
icon-dashboard
icon-dashboard
icon-decreased
icon-decreased
icon-delete
icon-delete
icon-deliver
icon-deliver
icon-device-page
icon-device-page
icon-dimmer
icon-dimmer
icon-dog-barking
icon-dog-barking
icon-door-back
icon-door-back
icon-door-front
icon-door-front
icon-door-sensor
icon-door-sensor
icon-down
icon-down
icon-forward
icon-down-arrow
icon-download
icon-download
icon-email
icon-email
icon-explore
icon-explore
icon-ext-link
icon-ext-link
icon-falling
icon-falling
icon-fan-off
icon-fan-off
icon-film-quality
icon-film-quality
icon-filter
icon-filter
icon-fingerprint
icon-fingerprint
icon-flow-high
icon-flow-high
icon-flow-low
icon-flow-low
icon-forward-video
icon-forward-video
icon-forward
icon-forward
icon-fridge-door
icon-fridge-door
icon-frost-protect
icon-frost-protect
icon-full-access
icon-full-access
icon-fullscreen
icon-fullscreen
icon-glass-breaking
icon-glass-breaking
icon-group
icon-group
icon-hallway
icon-hallway
icon-heating-na
icon-heating-na
icon-heating
icon-heating
icon-help
icon-help
icon-hive
icon-hive
icon-hive
icon-hive-white
icon-holidaymode
icon-holidaymode
icon-home
icon-home
icon-hot-water
icon-hot-water
icon-hub-360
icon-hub-360
icon-hub-nano
icon-hub-nano
icon-hub-nano2
icon-hub-nano2
icon-humidity
icon-humidity
icon-incorrect-sound
icon-incorrect-sound
icon-increased
icon-increased
icon-info
icon-info
icon-insights
icon-insights
icon-install-devices
icon-install-devices
icon-kettle
icon-kettle
icon-kitchen
icon-kitchen
icon-lamp
icon-lamp
icon-leak
icon-leak
icon-left
icon-left
icon-left-gray-lightest
icon-light
icon-light
icon-link-broken
icon-link-broken
icon-link
icon-link
icon-list
icon-list
icon-liveingroom
icon-livingroom
icon-lock
icon-lock
icon-logout
icon-logout
icon-mastercard
icon-mastercard
icon-menu
icon-menu
icon-microphone-off
icon-microphone-off
icon-microphone
icon-microphone
icon-microwave
icon-microwave
icon-mimic
icon-mimic
icon-minimisescreen
icon-minimisescreen
icon-minus
icon-minus
icon-mode-settings
icon-mode-settings
icon-monitor off
icon-monitor-off
icon-monitor on
icon-monitor-on
icon-motion-detected
icon-motion-detected
icon-motion-man
icon-motion-man
icon-motion-sensor
icon-motion-sensor
icon-multi-choice-off
icon-multi-choice-off
icon-multi-choice-on
icon-multi-choice-on
icon-multi-user
icon-multi-user
icon-night-vision
icon-night-vision
icon-not-flowing
icon-not-flowing
icon-notifications-off
icon-notifications-off
icon-notifications-on
icon-notifications-on
icon-notifications-settings
icon-notifications-settings
icon-order-placed
icon-order-placed
icon-orders
icon-orders
icon-overflow
icon-overflow
icon-password-hide
icon-password-hide
icon-password-show
icon-password-show
icon-pause
icon-pause
icon-payment
icon-payment
icon-paypal
icon-paypal
icon-philips-hue-bridge
icon-philips-hue-bridge
icon-photo
icon-photo
icon-play
icon-play
icon-plug-eu
icon-plug-eu
icon-plug-in
icon-plug-in
icon-plug-na
icon-plug-na
icon-plug-uk
icon-plug-uk
icon-plus
icon-plus
icon-power
icon-power
icon-previous-video
icon-previous-video
icon-push-notifications
icon-push-notifications
icon-question
icon-question
icon-quick-actions
icon-quick-actions
icon-reassurance
icon-reassurance
icon-receiver-dual
icon-receiver-dual
icon-receiver
icon-receiver
icon-record
icon-record
icon-refer-a-friend
icon-refer-a-friend
icon-reload
icon-reload
icon-reorder
icon-reorder
icon-right
icon-right
icon-right
icon-right-gray-lightest
icon-sales
icon-sales
icon-schedule
icon-schedule
icon-search
icon-search
icon-security-away
icon-security-away
icon-security-away
icon-security-away-white
icon-security-home
icon-security-home
icon-security-privacy
icon-security-privacy
icon-send
icon-send
icon-service-status
icon-service-status
icon-settings
icon-settings
icon-shop
icon-shop
icon-signal-1bar
icon-signal-1bar
icon-signal-2bar
icon-signal-2bar
icon-signal-3bar
icon-signal-3bar
icon-signal-4bar
icon-signal-4bar
icon-signal-booster-plug
icon-signal-booster-plug
icon-signal-booster-uk
icon-signal-booster-uk
icon-single-choice-off
icon-single-choice-off
icon-single-choice-on
icon-single-choice-on
icon-smoke
icon-smoke
icon-sound-detected
icon-sound-detected
icon-sound-off
icon-sound-off
icon-sound-on
icon-sound-on
icon-spinner
icon-spinner
icon-star
icon-star-half
icon-stop
icon-stop
icon-sunrise
icon-sunrise
icon-tanks
icon-tanks
icon-television
icon-television
icon-temp
icon-temp
icon-text-size
icon-text-size
icon-text
icon-text
icon-thermostat-gen-1
icon-thermostat-gen-1
icon-thermostat-gen-2
icon-thermostat-gen-2
icon-thermostat-gen-3
icon-thermostat-gen-3
icon-thermostat-gen-4
icon-thermostat-gen-4
icon-thumb-down
icon-thumb-down
icon-thumb-up
icon-thumb-up
icon-tick
icon-tick
icon-toaster
icon-toaster
icon-toilet
icon-toilet
icon-tone
icon-tone
icon-trv
icon-trv
icon-unavailable
icon-unavailable
icon-up
icon-up
icon-forward
icon-down-arrow
icon-user
icon-user
icon-view-outdoor
icon-view-outdoor
icon-view
icon-view
icon-visa
icon-visa
icon-white-label-camera
icon-white-label-camera
icon-white
icon-white
icon-wifi-active-full
icon-wifi-active-full
icon-wifi-locked-full
icon-wifi-locked-full
icon-window
icon-window

Stroke width 1px SVG icons

icon-actions
icon-actions
icon-advance
icon-advance
icon-alert
icon-alert
icon-call
icon-call
icon-away
icon-away
icon-back
icon-back
icon-bathroom
icon-bathroom
icon-battery-empty
icon-battery-empty
icon-battery-full
icon-battery-full
icon-battery-quarter
icon-battery-quarter
icon-battery-three quarters
icon-battery-three-quarters
icon-bluetooth
icon-bluetooth
icon-boiler-iq
icon-boiler-iq
icon-boost
icon-boost
icon-button
icon-button
icon-call
icon-call
icon-camera
icon-camera
icon-clear
icon-clear
icon-clock
icon-clock
icon-close
icon-close
icon-coffee
icon-coffee
icon-colour
icon-colour
icon-compose
icon-compose
icon-connected
icon-connected
icon-controls
icon-controls
icon-copy
icon-copy
icon-cupboard
icon-cupboard
icon-cuttlery-drawer
icon-cuttlery-drawer
icon-dashboard
icon-dashboard
icon-decreased
icon-decreased
icon-delete
icon-delete
icon-deliver
icon-deliver
icon-device-page
icon-device-page
icon-dimmer
icon-dimmer
icon-dog-barking
icon-dog-barking
icon-door-back
icon-door-back
icon-door-front
icon-door-front
icon-door-sensor
icon-door-sensor
icon-down
icon-down
icon-forward
icon-down-arrow
icon-download
icon-download
icon-email
icon-email
icon-explore
icon-explore
icon-ext-link
icon-ext-link
icon-falling
icon-falling
icon-fan-off
icon-fan-off
icon-film-quality
icon-film-quality
icon-filter
icon-filter
icon-fingerprint
icon-fingerprint
icon-flow-high
icon-flow-high
icon-flow-low
icon-flow-low
icon-forward-video
icon-forward-video
icon-forward
icon-forward
icon-fridge-door
icon-fridge-door
icon-frost-protect
icon-frost-protect
icon-full-access
icon-full-access
icon-fullscreen
icon-fullscreen
icon-glass-breaking
icon-glass-breaking
icon-group
icon-group
icon-hallway
icon-hallway
icon-heating-na
icon-heating-na
icon-heating
icon-heating
icon-help
icon-help
icon-hive
icon-hive
icon-hive
icon-hive-white
icon-holidaymode
icon-holidaymode
icon-home
icon-home
icon-hot-water
icon-hot-water
icon-hub-360
icon-hub-360
icon-hub-nano
icon-hub-nano
icon-hub-nano2
icon-hub-nano2
icon-humidity
icon-humidity
icon-incorrect-sound
icon-incorrect-sound
icon-increased
icon-increased
icon-info
icon-info
icon-insights
icon-insights
icon-install-devices
icon-install-devices
icon-kettle
icon-kettle
icon-kitchen
icon-kitchen
icon-lamp
icon-lamp
icon-leak
icon-leak
icon-left
icon-left
icon-left-gray-lightest
icon-light
icon-light
icon-link-broken
icon-link-broken
icon-link
icon-link
icon-list
icon-list
icon-liveingroom
icon-livingroom
icon-lock
icon-lock
icon-logout
icon-logout
icon-mastercard
icon-mastercard
icon-menu
icon-menu
icon-microphone-off
icon-microphone-off
icon-microphone
icon-microphone
icon-microwave
icon-microwave
icon-mimic
icon-mimic
icon-minimisescreen
icon-minimisescreen
icon-minus
icon-minus
icon-mode-settings
icon-mode-settings
icon-monitor off
icon-monitor-off
icon-monitor on
icon-monitor-on
icon-motion-detected
icon-motion-detected
icon-motion-man
icon-motion-man
icon-motion-sensor
icon-motion-sensor
icon-multi-choice-off
icon-multi-choice-off
icon-multi-choice-on
icon-multi-choice-on
icon-multi-user
icon-multi-user
icon-night-vision
icon-night-vision
icon-not-flowing
icon-not-flowing
icon-notifications-off
icon-notifications-off
icon-notifications-on
icon-notifications-on
icon-notifications-settings
icon-notifications-settings
icon-order-placed
icon-order-placed
icon-orders
icon-orders
icon-overflow
icon-overflow
icon-password-hide
icon-password-hide
icon-password-show
icon-password-show
icon-pause
icon-pause
icon-payment
icon-payment
icon-paypal
icon-paypal
icon-philips-hue-bridge
icon-philips-hue-bridge
icon-photo
icon-photo
icon-play
icon-play
icon-plug-eu
icon-plug-eu
icon-plug-in
icon-plug-in
icon-plug-na
icon-plug-na
icon-plug-uk
icon-plug-uk
icon-plus
icon-plus
icon-power
icon-power
icon-previous-video
icon-previous-video
icon-push-notifications
icon-push-notifications
icon-question
icon-question
icon-quick-actions
icon-quick-actions
icon-reassurance
icon-reassurance
icon-receiver-dual
icon-receiver-dual
icon-receiver
icon-receiver
icon-record
icon-record
icon-refer-a-friend
icon-refer-a-friend
icon-reload
icon-reload
icon-reorder
icon-reorder
icon-right
icon-right
icon-right
icon-right-gray-lightest
icon-sales
icon-sales
icon-schedule
icon-schedule
icon-search
icon-search
icon-security-away
icon-security-away
icon-security-away
icon-security-away-white
icon-security-home
icon-security-home
icon-security-privacy
icon-security-privacy
icon-send
icon-send
icon-service-status
icon-service-status
icon-settings
icon-settings
icon-shop
icon-shop
icon-signal-1bar
icon-signal-1bar
icon-signal-2bar
icon-signal-2bar
icon-signal-3bar
icon-signal-3bar
icon-signal-4bar
icon-signal-4bar
icon-signal-booster-plug
icon-signal-booster-plug
icon-signal-booster-uk
icon-signal-booster-uk
icon-single-choice-off
icon-single-choice-off
icon-single-choice-on
icon-single-choice-on
icon-smoke
icon-smoke
icon-sound-detected
icon-sound-detected
icon-sound-off
icon-sound-off
icon-sound-on
icon-sound-on
icon-spinner
icon-spinner
icon-star
icon-star-half
icon-stop
icon-stop
icon-sunrise
icon-sunrise
icon-tanks
icon-tanks
icon-television
icon-television
icon-temp
icon-temp
icon-text-size
icon-text-size
icon-text
icon-text
icon-thermostat-gen-1
icon-thermostat-gen-1
icon-thermostat-gen-2
icon-thermostat-gen-2
icon-thermostat-gen-3
icon-thermostat-gen-3
icon-thermostat-gen-4
icon-thermostat-gen-4
icon-thumb-down
icon-thumb-down
icon-thumb-up
icon-thumb-up
icon-tick
icon-tick
icon-toaster
icon-toaster
icon-toilet
icon-toilet
icon-tone
icon-tone
icon-trv
icon-trv
icon-unavailable
icon-unavailable
icon-up
icon-up
icon-forward
icon-down-arrow
icon-user
icon-user
icon-view-outdoor
icon-view-outdoor
icon-view
icon-view
icon-visa
icon-visa
icon-white-label-camera
icon-white-label-camera
icon-white
icon-white
icon-wifi-active-full
icon-wifi-active-full
icon-wifi-locked-full
icon-wifi-locked-full
icon-window
icon-window

Lists

list-group

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

list-group-item

list-group-flush

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

list-group-horizontal

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus

list-group-item-*

  • Dapibus ac facilisis in
  • A simple primary list group item
  • A simple secondary list group item
  • A simple success list group item
  • A simple danger list group item
  • A simple warning list group item
  • A simple info list group item
  • A simple light list group item
  • A simple dark list group item

list-group-item-action

Modal

Dev Tools
AB tests
AB.bnaUpsell
Environments