Colour
Colour is one of the fastest ways to communicate brand, hierarchy and state. In building the APPEX NOW colour system I balanced a bold brand voice with practical, accessible choices so every interface is recognizable, legible and reliable across contexts. Below I explain what I created, the design decisions behind it, and how teams should use the palette.
Overview
A single brand Primary colour for identity and primary actions.
A neutral tint scale (dark → light) that provides clear hierarchy for text, surfaces and dividers.
A set of semantic alert colors for error, info, warning and success.
A charts palette tuned for categorical and sequential visualization.
Naming and token guidance so designers can apply colours consistently and safely.
Best Practices
Colour is powerful, used well it clarifies, guides, and delights; used poorly it confuses and excludes. These best practices capture the rules I followed when building the APPEX NOW palette and how teams should apply it day-to-day.
Use Systematic Tokens, Not Raw Hex:
Always apply colour by intent, colour-primary, colour-error, surface-100, not #0033FD in component canvases.
Semantic tokens make it safe to adjust tones globally without breaking UI intent.
One Meaning, One Colour:
Avoid using the same hue for different meanings. If brand blue indicates primary action, don’t reuse it for passive labels or decorative text.
Reserve semantic colours for their roles (error = error, success = success, etc.).
Don't Rely On Colour Alone:
Wherever colour conveys state or meaning, add a redundant cue. Iconography, shape, label, pattern, or text.
This is essential for color-blind users and for low-vision contexts.
Prioritise Contrast And Legibility:
Verify all common text/background combinations meet WCAG targets (body ≥ 4.5:1; large ≥ 3:1).
Use the neutral/tint scale for text and surfaces so contrast is predictable across the product.
States Must Be Distinct Beyond Hue:
Hover, focus, active, disabled states should differ in more than just colour. Elevation, outline, fill, opacity, or icon change.
Focus states must be clearly visible and not rely on subtle colour shifts.
Chart accessibility:
Choose highly separable hues for adjacent categories and include labels.
Add non-color encodings (patterns, markers, shapes) for accessibility and print cases.
Maintain consistent ordering of chart colors across dashboards to reduce cognitive load.
System Colours
Core Band
Token
Hex
Usage
Primary Colour
#0033FD
CTAs, primary buttons, links, key accents
Semantic / Alerts
Token
Hex
Meaning
Colour - Error
#FF3333
Errors, destructive actions
Colour - Info
#007BFF
Informational notices, links (alternate)
Colour - Warning
#FFCC00
Warnings, attention states
Colour - Success
#33CC59
Success, completed states
Designer Note:
Always pair a semantic colour with a non-colour cue (icon, label, pattern) so meaning doesn’t rely on hue alone.
Neutral / Tint scale
Token
Hex
Usage
Neutral - 900
#000000
Body text (strong), high-emphasis text
Neutral - 800
#12131A
Heading text, strong emphasis
Neutral - 700
#1C1E26
Primary UI text, active text
Neutral - 600
#303340
Secondary text, icons
Neutral - 500
#474A59
Muted text, labels
Neutral - 400
#5E6273
Helper text, placeholders
Neutral - 300
#777B8C
Low emphasis text, disabled hints
Neutral - 200
#9295A6
Subtle dividers, subtle labels
Neutral - 100
#AEB1BF
Surfaces, cards (light)
Neutral - 50
#CCCED9
Background tints
Neutral - 25
#EBECF2
Very light surfaces
Neutral - 0
#FFFFFF
Success, completed states
Designer Note:
Use darker neutrals for primary content and lighter neutrals for surfaces and subtle separators. The scale is intentionally broad so every level of emphasis has a reliable value.
Charts / Data palette
A curated set for categorical and sequential charts:
Usage:
Use the first 5 - 6 colours for primary categories; use the rest for secondary categories.
For sequential or diverging scales, derive lighter/darker tints of a single hue from the core set.
Always include discrete labels and consider textures or shapes for color-blind accessibility.
How To Use The Colours
Primary:
Use
Primary-Colourfor primary CTAs, active links, key highlights.On
Primary-Coloursurfaces, use white (Neutral-0) or very light neutral for legibility.
Text & Surfaces:
Neutral-700/Neutral-800for headings and body copy.Neutral-100–Neutral-25for cards and page background layers to create depth.Use
Neutral-200/Neutral-300for borders & dividers.
States:
Hover/focus states should be visually distinct (e.g., brighter tint, subtle elevation), not just colour changes.
Disabled UI uses
Neutral-300/Neutral-200with reduced contrast.
Semantic:
Use semantic tokens for status UI (toasts, badges, alerts). For example,
badge-error-bg/badge-error-textderived fromColor-Errorensure consistent application across components.
Charts:
Prefer highly distinguishable hues for adjacent categories.
Avoid using only red/green contrast for critical data; add patterns, labels or icons.
Visual Documentation To Include
Palette Swatches: Primary, Neutral scale, Semantic, Charts.
Token Table: Mapping token names → hex → recommended use.
Contrast Matrix: Showing common text/background pairs with Pass/Fail.
Component Examples: Primary button, secondary button, alert banners, badges and charts rendered using tokens.
Chart Examples: Categorical and sequential examples with accessibility annotations.
Do/Don't Pairs: Correct use of brand colour vs. incorrect use (e.g., brand used for non-interactive decorative text).