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.
Status
Info-status background tint, non-WA surfaces only — informational alert backgrounds and highlighted rows. Not a solid banner fill; pair with info.border/info.on at the same tier (quiet/normal/loud).
Info-status fill, medium intensity, non-WA surfaces only — filled info badges/tags at rest.
Solid info-status fill, non-WA surfaces only — informational banners, help indicators, and neutral (non-urgent) notifications. Use success/warning/danger instead if the message implies a specific outcome rather than general information.
Subtle info-status border, non-WA surfaces only — pairs with info.fill-quiet backgrounds.
Standard info-status border, non-WA surfaces only — pairs with info.fill-normal badges/tags.
Strong info-status border, non-WA surfaces only — pairs with info.fill-loud banners and alerts.
Info-status text/icon colour on an info.fill-quiet background, non-WA surfaces only.
Info-status text/icon colour on an info.fill-normal badge/tag, non-WA surfaces only.
Info-status text/icon colour on an info.fill-loud banner, non-WA surfaces only — must contrast against the solid blue fill.
Success-status background tint, non-WA surfaces only — success alert backgrounds and highlighted rows. Not a solid banner fill.
Success-status fill, medium intensity, non-WA surfaces only — filled success badges/tags at rest.
Solid success-status fill, non-WA surfaces only — success banners, confirmation icons, and completion indicators.
Subtle success-status border, non-WA surfaces only — pairs with success.fill-quiet backgrounds.
Standard success-status border, non-WA surfaces only — pairs with success.fill-normal badges/tags.
Strong success-status border, non-WA surfaces only — pairs with success.fill-loud banners and alerts.
Success-status text/icon colour on a success.fill-quiet background, non-WA surfaces only.
Success-status text/icon colour on a success.fill-normal badge/tag, non-WA surfaces only.
Success-status text/icon colour on a success.fill-loud banner, non-WA surfaces only — labels inside filled success alerts.
Warning-status background tint, non-WA surfaces only — warning alert backgrounds and highlighted rows. Not a solid banner fill.
Warning-status fill, medium intensity, non-WA surfaces only — filled warning badges/tags at rest.
Solid warning-status fill, non-WA surfaces only — warning banners, cautionary icons, and attention-needed indicators. Use danger instead if the situation is already an error, not just a caution.
Subtle warning-status border, non-WA surfaces only — pairs with warning.fill-quiet backgrounds.
Standard warning-status border, non-WA surfaces only — pairs with warning.fill-normal badges/tags.
Strong warning-status border, non-WA surfaces only — pairs with warning.fill-loud banners and alerts.
Warning-status text/icon colour on a warning.fill-quiet background, non-WA surfaces only.
Warning-status text/icon colour on a warning.fill-normal badge/tag, non-WA surfaces only.
Warning-status text/icon colour on a warning.fill-loud banner, non-WA surfaces only — must stay dark; yellow doesn't have enough contrast against light text.
Danger/error-status background tint, non-WA surfaces only — error alerts and invalid-field backgrounds. Not a solid banner fill.
Danger/error-status fill, medium intensity, non-WA surfaces only — filled error badges/tags at rest.
Solid danger/error-status fill, non-WA surfaces only — error states, destructive-action emphasis, and validation failures. Use warning instead if the situation is a caution rather than an actual error.
Subtle danger/error-status border, non-WA surfaces only — e.g. an invalid field outline.
Standard danger/error-status border, non-WA surfaces only — pairs with danger.fill-normal badges/tags.
Strong danger/error-status border, non-WA surfaces only — pairs with danger.fill-loud banners and destructive actions.
Danger/error-status text/icon colour on a danger.fill-quiet background, non-WA surfaces only.
Danger/error-status text/icon colour on a danger.fill-normal badge/tag, non-WA surfaces only — error messages and validation text.
Danger/error-status text/icon colour on a danger.fill-loud banner, non-WA surfaces only — labels inside filled error alerts.
Pending-status background tint, non-WA surfaces only — awaiting-action or in-progress alert backgrounds. Not a solid banner fill.
Pending-status fill, medium intensity, non-WA surfaces only — filled pending badges/tags at rest, e.g. "awaiting approval".
Solid pending-status fill, non-WA surfaces only — pending banners and awaiting-action icons. This is a distinct meaning from warning/danger — it signals "in progress", not "something is wrong".
Subtle pending-status border, non-WA surfaces only — pairs with pending.fill-quiet backgrounds.
Standard pending-status border, non-WA surfaces only — pairs with pending.fill-normal badges/tags.
Strong pending-status border, non-WA surfaces only — pairs with pending.fill-loud banners.
Pending-status text/icon colour on a pending.fill-quiet background, non-WA surfaces only.
Pending-status text/icon colour on a pending.fill-normal badge/tag, non-WA surfaces only.
Pending-status text/icon colour on a pending.fill-loud banner, non-WA surfaces only.
Scheduled-status background tint, non-WA surfaces only — upcoming/scheduled-event alert backgrounds. Not a solid banner fill.
Scheduled-status fill, medium intensity, non-WA surfaces only — filled scheduled badges/tags at rest, e.g. "scheduled for later".
Solid scheduled-status fill, non-WA surfaces only — scheduled banners and upcoming-event icons. Distinct from info — this specifically signals a future/scheduled event, not general information.
Subtle scheduled-status border, non-WA surfaces only — pairs with scheduled.fill-quiet backgrounds.
Standard scheduled-status border, non-WA surfaces only — pairs with scheduled.fill-normal badges/tags.
Strong scheduled-status border, non-WA surfaces only — pairs with scheduled.fill-loud banners.
Scheduled-status text/icon colour on a scheduled.fill-quiet background, non-WA surfaces only.
Scheduled-status text/icon colour on a scheduled.fill-normal badge/tag, non-WA surfaces only.
Scheduled-status text/icon colour on a scheduled.fill-loud banner, non-WA surfaces only.
Inactive-status background tint, non-WA surfaces only — draft/inactive/archived badge backgrounds at rest. Use this status group (not neutral.fill above) specifically when the meaning is "inactive", not for general-purpose neutral UI.
Inactive-status fill, medium intensity, non-WA surfaces only — filled inactive/draft badges.
Inactive-status fill, darkest, non-WA surfaces only — use sparingly, e.g. a solid inactive/draft banner or icon.
Subtle inactive-status border, non-WA surfaces only — pairs with status.neutral.fill-quiet backgrounds.
Standard inactive-status border, non-WA surfaces only — pairs with status.neutral.fill-normal badges.
Strong inactive-status border, non-WA surfaces only — pairs with status.neutral.fill-loud badges.
Inactive-status text/icon colour on a status.neutral.fill-quiet background, non-WA surfaces only.
Inactive-status text/icon colour on a status.neutral.fill-normal badge, non-WA surfaces only — deliberately aliases text.normal rather than a status-specific tone, since neutral status doesn't need its own text colour.
Inactive-status text/icon colour on a status.neutral.fill-loud fill, non-WA surfaces only.
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.
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?