Colours
We use colours purposefully to communicate how things function in the interface and express uniqure branding
Primary colours
The maroon colours serve as the primary colours serve as the primary action colour, bringing the boldness to the brand, it is used in logical ways through the website to highlight the important bits such as call to action. We use Primary for actions, buttons and text links wherever necessary.
Primary #751c24
Primary Light #a02842
Secondary colours
Our secondary colour is navy blue, making the visual look professional and authoritative, at the same time balancing the intensity of the primary colour. We use the secondary colour for components and headers. As dark colour may grab attention, use it sparingly and purposefully.
Secondary #283c61
Tertiary colours
Our tertiary colour is royal gold, the colour creates a sense of prestige and elegance to the design. Use this colour on small design elements only, such as icons, as using it too much may cause the design to look unapproachable and exclusive.
Tertiary #c4ad89
Supplementary colours
Supplementary colours are used as backgroud colours to divide different sections within a page. The light beige colour creates a sense of calmness and softness when use as background colour. Supplentary colour 1
Supp. 1 Light #faf7f7
Supp. 1 #d1cfcf
Supplentary colour 2
Supp. 2 #0e1524
Extended colours
The extended colours have varying degree of saturation tot cater to various use case. Typically they are used for text and border colour.
Black #282624
Grey Darkest
#51565f
Grey Dark
#939599
Grey #d4d6d9
Grey light
#eaecef
Grey Lighter
#f7f7f9
White
#ffffff
System colours
When we need to communicate an information to digest or the status of an update, we use this palette of colors.
Info
Blue is used to highlight important piece of information. You'll find blue in a "Note" tooltip components.
Info #283c61
Info Light
#eeeff2
Success
We use green to indicate success. It is also used in a comparison table to help users to differentiate the information better (i.e. do’s and don’ts, yes’s and no’s).
Success #01b99d
Success Light
#e6f8f5
Success Dark
#016f5e
Warning
Warning colours indicate a warning or important tip. It is used to in "Tip" tooltip components.
Warning #ffd975
Warning Light
#fdf6e6
Error
Error colours are mainly used for backgrounds in messages and in error states to draw attention to important information. You'll find red used in component such as alert.
Error #b00020
Error Light
#f8d7da
Error Dark
#7b0016
Example
Purple indicates example and is used in "Example" tooltip components. It is also used to display visited links in web typography.
Example #a57cb8
Example Light
#eee9f3
Example Dark
#4c2c92
SJC colours
The following colours are SJC brand palette, and is only applicable for the SJC section under the Singapore Courts website.
SJC Green #98d0a1
SJC Dark Turquoise
#074d80
SJC Teal
#56b1aa
Last updated
