Foundations

Colour

Teal and navy are the brand. Product screens use the semantic tokens, which have a value in each theme.

Palette

The raw colours of the brand. Use the semantic tokens in product; use these for marks, illustration and print.

teal#179d9fPrimary brand colour: section tabs, pills and the ground for reversed logos. Use as a fill or non-text mark on paper, white or navy (3.1–4.6:1). White text on it passes only at 24px and above (3.30:1); smaller text on teal uses navy (4.55:1).
teal-light#51bab6The deck's documented "Teal" (CMYK 65/0/35/0): agility and adaptability. Linework in the patterns on deep-teal (3.7:1) and accent text or marks on navy (6.48:1). Not for text on light grounds.
seafoam#3fc7bdOutermost layer of the symbol. Text or marks on navy (7.24:1) and charcoal (8.13:1). Fill only on light grounds.
mint#65d7c9The river highlight inside the symbol. Marks on navy (8.67:1); fill only on light grounds.
mist#a6ebd8The lit cave opening in the symbol. Text on navy (11.09:1) and on deep-teal (6.32:1); dark navy text on it passes at 11.09:1.
lagoon#047283Mid layer of the symbol and the accent-text colour on light grounds: links and small teal-family text on paper (5.29:1) and white (5.62:1).
deep-teal#01536bGround of all three brand patterns and a symbol layer. White text on it passes at 8.57:1; mist at 6.32:1; teal-light linework at 3.69:1.
abyss#003755The shadow side of the symbol. White text on it passes at 12.52:1.
midnight#002347Ink of the Arabic wordmark and descriptor, and the deepest symbol layer. White text on it passes at 15.77:1. Not the same as navy.
navy#182643The deck's documented "Navy" (CMYK 100/85/43/47): infrastructure, security, backend stability. Ink of the English wordmark, body text on paper (14.15:1) and white (15.03:1), and the dark ground.
charcoal#1d1d1bBlack ground used to show the reversed logo. White text on it passes at 16.88:1.
white#ffffffReversed logo and text on teal (large only), navy, charcoal, abyss, midnight and deep-teal.
paper#f8f8f8Light page ground. The deck sets it as a faint grey brushed texture; use the flat colour in product.
slate#a9b3c0Secondary swatch from the deck (the deck leaves the six secondary colours unnamed; the names here are ours). Fill only: 2.0:1 on paper. Text on it uses navy (7.08:1).
coral#f08868Secondary swatch. Fill only: 2.5:1 on white. Text on it uses navy (6.03:1). Sampled from the deck image, so the value is within a step or two of the original.
lime#a3c962Secondary swatch. Fill only on light grounds; text on it uses navy (7.94:1); marks on navy pass at 7.9:1.
magenta#8f2462Secondary swatch. Text and marks on paper (7.6:1); white text on it passes at 8.09:1.
plum#5e256fSecondary swatch. Text and marks on paper (10.0:1); white text on it passes at 10.66:1.
snow#f7f9faSecondary swatch, the cool off-white. Fill only.

Semantic tokens

Each token has one value per theme. Translucent colours are shown laid over the theme's ground.

Token	Light	Dark	Black	Use
`surface`	`#f8f8f8`	`#182643`	`#1d1d1b`	Page background in each theme. In the Black theme it is `charcoal`, the deck's black ground: near-black, not pure black.
`surface-raised`	`#ffffff`	`#26334e`	`#2b2b29`	Cards and panels sitting on `surface`. Text on it uses `ink` and `ink-muted`.
`surface-inverse`	`#182643`	`#f8f8f8`	`#f8f8f8`	Deliberately opposite panels and covers. Text on it uses `ink-inverse`.
`ink`	`#182643`	`#ffffff`	`#ffffff`	Body and heading text on `surface` and `surface-raised`: 14.2–15.0:1 in light, 12.6–15.0:1 in dark.
`ink-muted`	`#525d72`	`#c3c7ce`	`#c4c4c4`	Secondary text on `surface` and `surface-raised`: 6.2:1 on `paper` and 6.5:1 on `white` in light; 7.7:1 or more in dark.
`ink-inverse`	`#ffffff`	`#182643`	`#1d1d1b`	Text on `surface-inverse`.
`border`	`#d4d6db`	`#3d4961`	`#41413f`	Decorative hairlines and dividers only. Carries no meaning, so it is not held to 3:1.
`border-strong`	`#727a8b`	`#979daa`	`#999998`	Borders of inputs and other controls: 4.1:1 on `paper` in light, 5.0:1 on `surface-raised` and 5.5:1 on `navy` in dark.
`accent`	`#179d9f`	`#179d9f`	`#179d9f`	Fills of primary actions, tabs and markers. 3.1:1 on `paper` and 4.55:1 on `navy`, so it stands as a mark in both themes. Never for small text.
`on-accent`	`#182643`	`#182643`	`#1d1d1b`	Text and icons on `accent`: 4.55:1. Text of 24px and above may be `white` (3.30:1). In the Black theme it is `charcoal` (5.1:1 on `teal`).
`accent-text`	`#047283`	`#3fc7bd`	`#3fc7bd`	Links and small accent text on `surface` and `surface-raised`: 5.3:1 on `paper` in light; 7.2:1 on `navy` and 6.1:1 on `surface-raised` in dark.
`focus-ring`	`#047283`	`#3fc7bd`	`#3fc7bd`	Solid 2px focus outline with a 2px offset on `surface` and `surface-raised`: 5.3:1 or more in light, 6.1:1 or more in dark.
`accent-strong`	`#047283`	`#179d9f`	`#179d9f`	Fill of primary actions (Button primary, active toggles). White text on it in light (5.6:1); `on-accent-strong` (navy) on `teal` in dark (4.55:1). Use `accent` only for brand marks and tabs.
`on-accent-strong`	`#ffffff`	`#182643`	`#1d1d1b`	Text and icons on `accent-strong`: 5.6:1 in light, 4.55:1 in dark. In the Black theme it is `charcoal` on `teal` (5.1:1).
`accent-strong-hover`	`#01536b`	`#3fc7bd`	`#3fc7bd`	Hover and pressed fill of `accent-strong`. White on it 8.57:1 in light; navy on it 7.24:1 in dark.
`accent-soft`	`#d3f2ea`	`#1d3d54`	`#223532`	Quiet brand tint: selected nav item, brand badge, highlighted row. Text on it uses `accent-text` (about 4.9:1 in light, 6:1 or more in dark).
`accent-soft-border`	`#afd0d5`	`#245668`	`#27504c`	Hairline around `accent-soft` surfaces. Decorative, carries no meaning.
`danger`	`#c53030`	`#f56565`	`#f56565`	Fill of destructive actions. White text on it in light (5.5:1); `on-danger` (navy) in dark (5.0:1).
`on-danger`	`#ffffff`	`#182643`	`#1d1d1b`	Text and icons on `danger`. In the Black theme it is `charcoal` on `danger` (5.6:1).
`danger-hover`	`#9b2c2c`	`#fc8181`	`#fc8181`	Hover and pressed fill of `danger`. White on it in light (7.5:1); navy on it in dark (6.2:1).
`surface-sunken`	`#eff0f1`	`#212f4b`	`#262624`	Table header rows, skeletons, input wells and neutral badges sitting on `surface` or `surface-raised`. Text on it uses `ink` and `ink-muted`.
`surface-hover`	`#ebebed`	`#2a3752`	`#2f2f2d`	Hover state of rows, menu items and quiet buttons.
`scrim`	`#888f9e`	`#0a0f1b`	`#090908`	Backdrop behind dialogs and sheets. Darker in Black (70%).
`disabled-bg`	`#e6e7ea`	`#2f3c56`	`#343432`	Fill of disabled buttons and inputs. Disabled controls are exempt from contrast rules.
`disabled-fg`	`#939aa7`	`#808898`	`#838382`	Text and icons of disabled controls.
`success-bg`	`#f0fff4`	`#1f3b4a`	`#233328`	Background of success badges, banners and rows. Completed, paid, in stock, active. Text on it uses `success-fg` (4.5:1 or more in both themes).
`success-fg`	`#276749`	`#9ae6b4`	`#9ae6b4`	Text and icons for success on `success-bg`, `surface` and `surface-raised`. Always pair with a word or icon: success and error differ little in lightness.
`success-border`	`#c6f6d5`	`#255052`	`#294935`	Hairline around success surfaces. Decorative.
`success-solid`	`#38a169`	`#48bb78`	`#48bb78`	Dots, bars and chart marks for success (3:1 or more on `surface` in both themes). Not for text.
`warning-bg`	`#fffaf0`	`#363441`	`#3a2c1f`	Background of warning badges, banners and rows. Needs attention: low stock, expiring, pending. Text on it uses `warning-fg` (4.5:1 or more in both themes).
`warning-fg`	`#9c4221`	`#fbd38d`	`#fbd38d`	Text and icons for warning on `warning-bg`, `surface` and `surface-raised`. Always pair with a word or icon: success and error differ little in lightness.
`warning-border`	`#feebc8`	`#54423f`	`#573b23`	Hairline around warning surfaces. Decorative.
`warning-solid`	`#dd6b20`	`#ed8936`	`#ed8936`	Dots, bars and chart marks for warning (3:1 or more on `surface` in both themes). Not for text.
`error-bg`	`#fff5f5`	`#372f48`	`#3b2725`	Background of error badges, banners and rows. Failed, overdue, cancelled, destructive. Text on it uses `error-fg` (4.5:1 or more in both themes).
`error-fg`	`#c53030`	`#feb2b2`	`#feb2b2`	Text and icons for error on `error-bg`, `surface` and `surface-raised`. Always pair with a word or icon: success and error differ little in lightness.
`error-border`	`#fed7d7`	`#56384d`	`#593130`	Hairline around error surfaces. Decorative.
`error-solid`	`#e53e3e`	`#f56565`	`#f56565`	Dots, bars and chart marks for error (3:1 or more on `surface` in both themes). Not for text.
`info-bg`	`#ebf8ff`	`#1e3659`	`#222e37`	Background of info badges, banners and rows. Neutral news, tips, in progress. Text on it uses `info-fg` (4.5:1 or more in both themes).
`info-fg`	`#2c5282`	`#90cdf4`	`#90cdf4`	Text and icons for info on `info-bg`, `surface` and `surface-raised`. Always pair with a word or icon: success and error differ little in lightness.
`info-border`	`#bee3f8`	`#24466f`	`#274052`	Hairline around info surfaces. Decorative.
`info-solid`	`#3182ce`	`#4299e1`	`#4299e1`	Dots, bars and chart marks for info (3:1 or more on `surface` in both themes). Not for text.
`chart-1`	`#047283`	`#3fc7bd`	`#3fc7bd`	First series, and the only series of a single-series chart: lagoon on light (5.3:1 on paper), seafoam on dark (7.2:1 on navy).
`chart-2`	`#8f2462`	`#f08868`	`#f08868`	Second series: magenta on light (7.6:1), coral on dark (6.0:1). Differs from `chart-1` in lightness and hue.
`chart-3`	`#a85f49`	`#a3c962`	`#a3c962`	Third series: a darkened coral on light (4.5:1), lime on dark (7.9:1).
`chart-4`	`#182643`	`#a6ebd8`	`#a6ebd8`	Fourth series: navy on light, mist on dark. Never add a fifth; group the rest as Other.

Contrast

Measured from the tokens when this site is built. Text needs 4.5:1, focus and graphics 3:1.

Text on ground	Light	Dark	Black
`ink` / `surface`	14.15:1 Pass	15.03:1 Pass	16.88:1 Pass
`ink-muted` / `surface`	6.27:1 Pass	8.83:1 Pass	9.70:1 Pass
`ink-muted` / `surface-raised`	6.47:1 Pass	7.67:1 Pass	8.51:1 Pass
`accent-text` / `surface`	5.29:1 Pass	7.24:1 Pass	8.13:1 Pass
`on-accent-strong` / `accent-strong`	5.62:1 Pass	4.55:1 Pass	5.11:1 Pass
`on-accent` / `accent`	4.55:1 Pass	4.55:1 Pass	5.11:1 Pass
`on-danger` / `danger`	5.47:1 Pass	4.96:1 Pass	5.57:1 Pass
`success-fg` / `success-bg`	6.51:1 Pass	8.06:1 Pass	9.10:1 Pass
`warning-fg` / `warning-bg`	6.28:1 Pass	8.60:1 Pass	9.48:1 Pass
`error-fg` / `error-bg`	5.11:1 Pass	7.37:1 Pass	8.12:1 Pass
`info-fg` / `info-bg`	7.36:1 Pass	7.07:1 Pass	8.04:1 Pass
`focus-ring` / `surface`	5.29:1 Pass	7.24:1 Pass	8.13:1 Pass

Guidance

Teal and navy are the brand. Teal carries agility and adaptability: pivoting and customising solutions for different clients. navy carries infrastructure, security and backend stability, "the colour of trust". Build every surface from these two and the neutrals paper, white and charcoal.
Teal appears in two values. teal (#179d9f) is the colour of the logo field, the section tabs and the reversed-logo ground. teal-light (#51bab6) is the swatch the deck documents with CMYK 65/0/35/0, and the colour of the pattern linework. The deck does not say which is canonical for print, so use teal on screen and ask before printing.
Use the semantic tokens in product: surface, surface-raised, ink, ink-muted, accent, accent-text, border, border-strong, focus-ring. Three themes are defined. Light grounds on paper. Dark grounds on navy, which is also the deck's cover colour. Black grounds on charcoal, the deck's black ground: near-black, never pure #000.
Text contrast rules. teal is a fill, not a text colour on light grounds: white on teal is 3.30:1, so it is allowed only at 24px and above (the section tabs). Under 24px put on-accent (navy, 4.55:1) on accent. Accent-coloured text on light grounds is accent-text (lagoon).
Depth steps. For ordered series, stages or levels, step through the symbol's layers from outside in: seafoam, teal, lagoon, deep-teal, abyss. Keep the lit opening mist and the river mint for highlights. Do not add other hues to a depth scale.
Secondary colours (slate, coral, lime, magenta, plum, snow) are accents for tags, charts and illustration, never for brand surfaces. slate, coral and lime are light: use them as fills with navy text. magenta and plum take white text.
The brand uses flat colour only. Do not add gradients to the mark, the tabs or the patterns.