Colour System
Colour plays a key role in creating intuitive, accessible, and recognisable interfaces. These guidelines define how colours should be applied consistently throughout the Sharjah Design System.
Colour System
A carefully crafted colour palette that ensures consistency, accessibility, and visual harmony across all government digital services. The system includes core neutrals, support colours, semantic tokens, and gradients—all tested for WCAG compliance.
Building semantic colours
Semantic colour tokens that convey meaning and purpose. These tokens ensure consistent application across different contexts and components.
Main brand colour used for primary actions and key elements
Main brand colour used for primary actions and key elements
Main brand colour used for primary actions and key elements
Supporting brand colour for secondary actions
Secondary text colour for backgrounds
Primary text colour for headings and important content
The support palettes
Extended colour palettes for data visualisation, status indicators, and accent colours. Each palette includes 10 shades for maximum flexibility.
Brand
Slate
Gray
Zinc
Neutral
Stone
Red
Orange
Amber
Yellow
Lime
Green
Emerald
Teal
Cyan
Sky
Indigo
Violet
Purple
Fuchsia
Pink
Rose
Environment colours
Colours adapt to different environments and themes while maintaining visual hierarchy and accessibility standards.
Light Theme
Dark Theme
Feedback colours
System feedback colours that communicate status, validation states, and important messages to users.
Success
This is a success message example showing proper colour application.
Error
This is an error message example showing proper colour application.
Warning
This is a warning message example showing proper colour application.
Info
This is an info message example showing proper colour application.
Gradient colours
Carefully designed gradients for visual interest, emphasis, and decorative elements. Use sparingly to maintain visual hierarchy.
Official Green Gradient
#58B786 → #009247
Official Red Gradient
#F2767B → #ED1C24
Official Brown Gradient
#B8846D → #924C2D
Digital Grey Gradient
#656565 → #353535
Accessibility & Contrast
All colour combinations are tested to meet WCAG AA standards for text contrast. The contrast checker below shows approved pairings.
Best practice: Always ensure text has a contrast ratio of at least 4.5:1 (AA) for normal text and 3:1 for large text (18px+ or 14px+ bold).