# Colour Pallete

The DIGIT Colour palette provides a flexible and accessible range of colours designed to enhance digital experiences across platforms. These colours ensure consistency and usability across applications while supporting a wide range of use cases.

## DIGIT Colours

***

This colour palette picker only shows the latest version (6.0.0) of DIGIT Colours. For now, the available Colours are only for the light theme.

| Name               | Hex Code  | Preview                                                                                                                                                                                                                          |
| ------------------ | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Primary1           | `#C84C0E` | ![](https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FtqKqoFsa7mhxSa502C4t%2FPrimary1.png?alt=media\&token=8558408d-5c43-4c76-9b2a-2a669e62ce69)           |
| Primary2           | `#0B4B66` | ![](https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2F3p41zFkMB8KkJxbKUH8X%2FPrimary2.png?alt=media\&token=fa84d02c-d5e5-400f-9a0a-8b955d5d9b34)           |
| PrimaryBG          | `#FBEEE8` | ![](https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FmwxB3BidsHMMcD9bWCfA%2FPrimaryBG.png?alt=media\&token=fa5c5412-f064-4dea-a89d-f3fe288b6473)          |
| textPrimary        | `#363636` | ![](https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FNzAbIVHittwJASTlKll3%2FtextPrimary.png?alt=media\&token=c9bc0e93-961e-4f44-98cb-a7a392d94888)        |
| textSecondary      | `#787878` | ![](https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FXRyYgvNGVABfK2UTzluD%2FtextSecondary.png?alt=media\&token=463bedda-03d3-4bf0-a60c-6f71bd294621)      |
| textDisabled       | `#C5C5C5` | ![](https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FwKyoNQRLVfd1wiIuUxIg%2FtextDisabled.png?alt=media\&token=90f042de-5734-48cc-b377-885f518c111e)       |
| paperPrimary       | `#FFFFFF` | ![](https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FXsqCTpUG6ImEVwOlc5CO%2FpaperPrimary.png?alt=media\&token=b3f85f80-4c92-4fb8-966b-37b0a13d4f27)       |
| paperSecondary     | `#FAFAFA` | ![](https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FSTyxAnWvHw50bTfbdopB%2FpaperSecondary.png?alt=media\&token=0803b031-602d-4078-8ce1-76d4223db15f)     |
| alertSuccess       | `#00703C` | ![](https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FABtNgMaimpc857TZlWu8%2FalertSuccess.png?alt=media\&token=630b43d3-cfbb-4c07-96a8-c6f3b7238c63)       |
| alertSuccessBg     | `#F1FFF8` | ![](https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FzeUCnS9Pt8Uv22zKldsj%2FalertSuccessBG.png?alt=media\&token=40af6280-d41f-458f-95cb-a509dee4e74e)     |
| alertError         | `#B91900` | ![](https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FCpYNFYl3J82WxsEe1hdb%2FalertError.png?alt=media\&token=e7da80f2-0074-4ac8-9b07-7806165ab6cc)         |
| alertErrorBg       | `#FFF5F4` | ![](https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FOIgYRnq3shBdxSr9sxdh%2FalertErrorBG.png?alt=media\&token=aeb8d633-8a87-40de-ac7e-a9dcac87247b)       |
| alertWarning       | `#EA8D00` | ![](https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FHWd0NSv9X9vztFxN8Qch%2FalertWarning.png?alt=media\&token=a00656a0-44af-41de-8265-0b7ab625ce24)       |
| alertWarningBg     | `#FFF9F0` | ![](https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FOOvCZg99SH03JnRMGy9N%2FalertWarningBG.png?alt=media\&token=f28b19b0-eeca-433e-a475-7b0ef000761c)     |
| alertInfo          | `#0057BD` | ![](https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FY1n1wQMjEYrJTszQN45l%2FalertInfo.png?alt=media\&token=01c93810-c0e2-45c9-8d46-10fed16cd3e0)          |
| alertInfoBg        | #`DEEFFF` | ![](https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FXl6oakEpSQrnOFGIZrcy%2FalertInfoBG.png?alt=media\&token=dbddc9af-0564-456a-abf6-6fcd52daf8bc)        |
| genericDivider     | `#D6D5D4` | ![](https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FHhBrQcKddT6l61uP5iSC%2FgenericDivider.png?alt=media\&token=80fd9881-6fbf-4695-a0ec-eb4576da6fdb)     |
| genericBackground  | `#EEEEEE` | ![](https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2F88SLNrQVwNvNAETaUjFJ%2Fgenericbackground.png?alt=media\&token=08966150-c7a0-4b97-a68d-de1633334daa)  |
| genericInputBorder | `#505A5F` | ![](https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FcKm8jsHSqASNBD2Pbn8c%2FgenericInputBorder.png?alt=media\&token=24fd3d16-6eda-4bc6-93ec-875e7660d5af) |

## Usages Guidelines

***

| <p><strong>Consistent Palette</strong></p><p>Always use colours defined in the library to ensure consistency across the application. </p><p></p><p>Avoid using custom colours unless necessary and approved by the design system.</p>                            | ![](https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2F63YwsIKFcoaUJoJ8v6BV%2FConsistent%20Palette.png?alt=media\&token=3b319acd-e1a3-4ff8-98fb-496318dea1ce)           |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>Purpose-Driven Colours</strong></p><p>Apply colours based on their intended purpose. For instance, use primary colours for buttons and links, secondary colours for accents, and background colours for general layout sections.</p>                  | ![](https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FtEEZ8vni8SCKaFIPMLhV%2FPurpose-Driven%20Colors.png?alt=media\&token=c7eb1e3f-b735-4e53-897b-127e33232048)        |
| <p><strong>Contrast & Accessibility</strong></p><p>Ensure that text and important elements have enough contrast against their background. This guarantees readability and accessibility for all users, especially those with visual impairments.</p>             | ![](https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2F73VCVRSASYxJSlUek7OR%2FContrast%20%26%20Accessibility.png?alt=media\&token=de63d7b5-6a1f-4860-ac6e-dcaa673209c6) |
| <p><strong>Limit Colour Usage</strong></p><p>Avoid excessive use of bright or bold colours, particularly in the body text or background areas. Stick to a clean, minimalist design by using a maximum of 3 to 4 main colours in a given layout or component.</p> | ![](https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FFrOG3p9ZdvpGjeIME1cM%2FLimit%20Color%20Usage.png?alt=media\&token=06183a75-3ecc-4c71-8740-07fe4de02a4d)          |