Colour
The Orbit colour system — eight ramps, contrast ratios, and accessibility guidance.
Colour in Open Point carries meaning. Green communicates action and positivity; red signals problems; neutral sets the page surface and provides text contrast. The palette is built on perceptual consistency — each ramp follows a lightness curve that makes contrast ratios predictable and accessible choices straightforward.
Seven chromatic ramps (green through yellow) each have eleven steps from 05 to 95
(05 is darkest, matching Web Awesome's own convention).
The Neutral ramp has twelve steps from 05 to 100 and covers most
backgrounds, borders, text, and icons. Token names follow the pattern --op-color-[ramp]-[step].
Semantic alias tokens map ramp values to their intended UI roles and are documented on the
Tokens page.
Primitive colour ramps
Seven chromatic ramps (steps 05–95) and one neutral ramp, Neutral (steps 05–100). Contrast ratios shown against the page background (neutral-100, #FDFCFB) and the dark surface (neutral-10, #211F1B). Click any token name or hex value to copy it to your clipboard.
Green
Primary brand ramp. Light lime through deep forest. Use for interactive elements, positive states, and brand applications.
Teal
Secondary ramp — trust and calm. Use for secondary UI elements, scheduled status, and supplementary information.
Blue
Informational states. Use for informational messages, links on dark backgrounds, and data visualisation informational sequences.
Purple
Accent and discovery. Use for tags, badges, and features that introduce something new or exploratory.
Red
Error and destructive states. Use exclusively for errors, validation failures, and destructive action confirmation.
Orange
Pending-approval and in-progress states. Use where something requires attention or a decision but isn’t an error.
Yellow
Warning and mild caution. Use for warnings, cautions, data visualisation annotations, and highlights.
Neutral
Gray ramp for backgrounds, borders, text, and icons. Neutral-100 is the primary page background; neutral-10 (#211F1B) is the primary text colour.
Semantic colour tokens
Semantic tokens map primitive ramp values to their intended role — background, text, border, status, brand, and interactive states. Names describe intent, not appearance, and the same name can resolve to a different primitive value per product. Contrast ratios shown against the page background (neutral-100, #FDFCFB) and the dark surface (neutral-10, #211F1B).
Brand
Faint brand-tinted fill, non-WA surfaces only — selected rows, highlighted cards, subtle brand accents in custom components. Not a solid brand fill. Do not use on a WA component; use --wa-color-brand-95 there instead.
Medium brand tint, non-WA surfaces only — hover/active state on a brand.fill-quiet background. Not a base fill on its own.
Solid brand fill, non-WA surfaces only — primary CTAs and key brand moments in custom (non-WA) components. For a WA button use wa-button[variant='brand'] instead of applying this token directly.
Subtle brand-coloured border, non-WA surfaces only. Currently identical to border.normal/loud since the brand border ramp isn't differentiated yet — treat as a placeholder, not a deliberate design choice, until Figma defines a distinct light step.
Standard brand-coloured border, non-WA surfaces only — outlines and dividers that need brand emphasis without implying selection or focus.
Strong brand-coloured border, non-WA surfaces only — selected or active states, e.g. a selected custom card.
Text/icon colour for content on a brand.fill-quiet background, non-WA surfaces only.
Text/icon colour for content on a brand.fill-normal background, non-WA surfaces only.
Text/icon colour for content on a brand.fill-loud background, non-WA surfaces only — e.g. the label inside a custom brand-filled button.
Text
Primary body text colour on custom surfaces — headings and most readable content. Default choice unless a more specific text token applies.
Secondary text colour on custom surfaces — placeholder text, helper text, and metadata. Not for disabled text — use text.disabled for that.
Disabled text colour on custom surfaces — inactive labels and non-interactive content. Not for de-emphasised-but-active text — use text.quiet for that.
Text colour for custom content sitting on surface.inverse or another dark fill. Do not use on a light background — it will fail contrast.
Inline hyperlink and navigational-link text colour in custom content. Reserve for actual links, not for drawing attention to non-interactive text.
Border
General-purpose strong border, non-WA surfaces only — selected states, focused inputs (non-brand), and prominent outlines. If the emphasis should read as brand-coloured, use color.brand.border.loud instead.
Default general-purpose border, non-WA surfaces only — card outlines, input fields, and standard dividers on custom components.
Subtle general-purpose border, non-WA surfaces only — light dividers, table row separators, and section breaks.
Subtle general-purpose border, non-WA surfaces only — light dividers, table row separators, and section breaks.
Brand-coloured general-purpose border, non-WA surfaces only — brand-coloured outlines, selected card borders, and active tab indicators. Aliases color.brand.border.loud; use that token directly if you're already inside the brand.* group.
Focus-ring border, non-WA surfaces only — the outline drawn around focused interactive custom elements. Aliases color.state.focus.
Accessibility and colour
Why it matters
Contrast ratios are a baseline, not a ceiling
WCAG 2.1 AA requires a 4.5:1 contrast ratio for normal text and 3:1 for large text and UI components. These numbers are derived from research into how people with low vision — including around 1 in 12 men and 1 in 200 women who have some form of colour vision deficiency — can reliably distinguish content from its background.
Meeting AA isn't enough on its own. Someone using a phone screen in bright sunlight, someone with early-stage cataracts, or someone with a screen set to reduced brightness will all struggle with contrast that just barely passes. Where practical, aim for AAA (7:1) for body text, especially in community-facing Social Point contexts where you can't predict your audience's conditions.
How to apply it
Use semantic tokens in components, not ramp values
Semantic alias tokens are built around the constraint that the values they reference
meet contrast requirements for their intended use. --op-color-text-primary
(neutral-10, #211F1B) achieves AAA against the neutral-100 page background.
--op-color-interactive-default (green-60, #BACE42) achieves AAA contrast
against the neutral-10 dark surface (#211F1B) used for inverse and dark UI contexts.
When you use --op-color-interactive-default instead of --op-color-green-60
directly, you're not just naming a value — you're using a token that has been verified to
work in its intended context. If the ramp value ever changes, the alias and its verified
contrast relationship change together.
Watch out
green-60 on light backgrounds — the most common mistake
--op-color-green-60 (#BACE42) has a contrast ratio of approximately 1.76:1
against the neutral-100 page background. This fails WCAG AA for all text sizes and UI
components. It's the primary brand green, which makes it tempting to use everywhere —
but it is only accessible on dark backgrounds. On neutral-10 (#211F1B), it achieves
approximately 9.1:1, which is AAA.
Never use green-60 as a text colour on any light or neutral background. Use
--op-color-text-link (blue-50, #2684D5) for links on light surfaces instead.
Was this page helpful?