Buttons

Buttons guideline is updated on 18 Feb 2018 (Style [email protected])

Overview

Buttons are triggers that help our users move from point A to point B. The size of a button should be big enough for a user to recognize and small enough to help the user focus on important tasks first. Table of contents:

Buttons

RGB
255 144 0
HEX
#FF9000
TEXT RGB
255 255 255
TEXT HEX
#FFFFFF
RGB
255 242 0
HEX
#FFF200
TEXT RGB
51 51 51
TEXT HEX
#333333
RGB
41 142 185
HEX
#298EB9
TEXT RGB
255 255 255
TEXT HEX
#FFFFFF
RGB
221 241 250
HEX
#DDF1FA
TEXT RGB
41 142 185
TEXT HEX
#298EB9
RGB
255 255 255
HEX
#FFFFFF
TEXT RGB
14 126 139
TEXT HEX
#0E7E8B
RGB
255 255 255
HEX
#FFFFFF
TEXT RGB
27 149 62
TEXT HEX
#1B953E
RGB
204 204 204
HEX
#CCCCCC
TEXT RGB
238 238 238
TEXT HEX
#EEEEEE
RGB
255 255 255
HEX
#FFFFFF
TEXT RGB
204 204 204
TEXT HEX
#CCCCCC

Buttons - Hover State

To indicate a button can be pressed, apply the following styling to button's hover states. However, there is no hover state for disabled button.
BACKGROUND OVERLAY 5% Darken
BACKGROUND OVERLAY 2% Darken
BACKGROUND OVERLAY Blue 3
BACKGROUND OVERLAY Blue 5
BACKGROUND OVERLAY 10% opacity of DB Hirer swatch
BACKGROUND OVERLAY 10% opacity of JS Hirer swatch
No hover state for disabled button
No hover state for disabled button

Mobile Sizing

On iOS and Android, buttons will have a minimum width of 128px. The maximum width will be the screen size minus the page padding to align with the overall aesthetics. All mobile buttons will be using 40px as the height.

Job Description

  • Digital and Retail marketing
  • Multiple stores in Hong Kong and region
  • Attractive remuneration

Job Overview

Our chient is a retail chain with multiple stores in Hong Kong and region. Currently they are recruiting a Marketing Manager to handle overall marketing for the company (Digital, social media, retail, CRM / loyalty

Example: 8px padding on all sides

Web Sizing

There are four types of button sizes when it comes to web use.