One red, a calm set of neutrals, and clear rules for using them on screen, in print and in photography. Every value below was measured, not picked by eye.
Working palette · 1 Nov 2026 · confirm during final identity workLive: every swatch, colour code and contrast ratio on this page is read from brand/tokens.css, the single file every page uses. Pantone and CMYK figures are measurements (1 Nov 2026) and need re-measuring if a base colour changes.
Inspired by Canada’s flag, without copying the Government of Canada’s official red (Pantone 032). It is deep enough to pass accessibility on screen and maps almost exactly to a standard, widely stocked Pantone.
How each brand colour looks on screen, as its nearest Pantone, and as CMYK on coated and uncoated paper. ΔE is the measured difference from our screen colour: under 1 is invisible, under 2.5 hard to notice side by side, above 5 clearly different.
Our screen red#D52B1E · RGB 213 43 30
Pantone 485 C#DA291C · ΔE 1.0 from screen
CMYK on coated14 · 93 · 94 · 4 · ΔE 2.6
CMYK on uncoated7 · 91 · 100 · 3 · ΔE 4.2
Use the Pantone spot ink wherever the red must be exact: signage, business cards, vehicle livery, merchandise. Everyday CMYK print is acceptable, and slightly deeper.
Our screen ink#111113
Pantone Neutral Black C#222223 · ΔE 5.1 (lighter)
CMYK on coated84 · 76 · 67 · 87 · ΔE 0.0
CMYK on uncoated65 · 53 · 49 · 87 · ΔE 0.0
Print text in 100 K only (sharp, no registration issues). For large solid areas use rich black 60 · 40 · 40 · 100. Neutral Black C only when a spot black is required.
Our screen mute#6E6E73
Pantone Cool Gray 9 C#75787B · ΔE 4.3 (cooler)
CMYK on coated56 · 46 · 42 · 20 · ΔE 0.6
CMYK on uncoated55 · 44 · 38 · 16 · ΔE 0.4
Print in CMYK: it matches the screen grey more closely than the Pantone spot. Ask the printer to check grey balance on proof.
Our screen line#E2E2DE
Pantone Cool Gray 1 C#D9D9D6 · ΔE 2.1
CMYK on coated13 · 8 · 11 · 0 · ΔE 0.6
CMYK on uncoated11 · 6 · 9 · 0 · ΔE 0.6
Print in CMYK. Very light tints can vanish on uncoated stock; keep hairlines at least 0.5 pt.
CMYK values were calculated with macOS ColorSync using the Adobe Coated GRACoL 2006 profile (the North American coated standard) and US Sheetfed Uncoated, relative colorimetric, then converted back to screen to measure the shift. Pantone screen values are Pantone’s published digital equivalents; exact Pantone data lives in Pantone Connect. Screen previews of print are simulations: sign off on a physical Pantone guide and a printer’s proof.
Neutrals carry almost every screen. They are near-white and near-black with a faint warmth, so the red and the photography do the talking.
#111113
Headlines, body text, primary buttons. Pantone Neutral Black C. Print: 100 K for text, rich black 60·40·40·100 for large solids.
#3A3A3F
Long-form body and supporting copy. Screen only; in print use Ink at 85% tint.
#6E6E73
Labels, captions, sources. Pantone Cool Gray 9 C (ΔE 4.3). Passes AA on white and Paper.
#E2E2DE
Hairlines and dividers only, never text. Pantone Cool Gray 1 C (ΔE 2.1).
#F5F5F3
Page background, matched to the photography backdrops. In print, use a natural-white stock rather than printing a tint (closest spot: 9224 C, ΔE 2.6).
#FFFFFF
Cards and raised surfaces that sit on Paper.
Measured on the full Concept 2 homepage, red is about 0.1% of every pixel: a handful of small, deliberate marks. The ceiling is 3% of any single screen; if a view needs more, the design is shouting.
WCAG 2.2 requires 4.5 : 1 for normal text and 3 : 1 for large text and graphics.
| Pairing | Ratio | Use |
|---|---|---|
| AaInk on Paper | 17.3 : 1 | All text |
| AaInk 2 on Paper | 10.4 : 1 | All text |
| AaRed on White | 5.0 : 1 | Text and graphics |
| AaWhite on Red | 5.0 : 1 | Buttons |
| AaMute on Paper | 4.65 : 1 | Labels and captions |
| AaRed on Paper | 4.59 : 1 | Passes, barely: prefer short labels |
| AaNight text on Night | 9.6 : 1 | All text on dark |
| AaNight mute on Night | 6.7 : 1 | Labels on dark |
| AaRed on Night | 3.8 : 1 | Graphics and large text only |
Reserved for the tools on the roadmap: quotes, the client portal, form messages and Insights charts. These colours carry meaning, so they never decorate, and they are kept clearly apart from Metalinq Red and from each other.
Four states for apps, the portal and forms: success, warning, info and danger. Each state is one colour family, with the same hue and the same saturation in light and dark mode. Only lightness changes, and only where text needs it.
| State | Identity (both modes) | Text (light) | Light tint / border | Dark tint / border | Contrast | CMYK (coated) |
|---|---|---|---|---|---|---|
| Success | #359B49 | #057E2D | #E4F6E5 #A8D5AB | #0E2411 #27532D | text 4.6 : 1 light · 5.3 : 1 dark · Ink on badge 5.3 : 1 | identity 77 · 17 · 90 · 3 text 85 · 26 · 100 · 13 |
| Warning | #FEAA1F | #976207 | #FFF1E1 #FEC57E | #301D02 #744C0E | text 4.7 : 1 light · 9.9 : 1 dark · Ink on badge 9.9 : 1 | identity 2 · 39 · 88 · 0 text 29 · 57 · 100 · 26 |
| Info | #517FFE | #3962DF | #EAF0FE #B1C7F9 | #141D33 #334673 | text 4.6 : 1 light · 5.2 : 1 dark · Ink on badge 5.2 : 1 | identity 74 · 53 · 0 · 0 (screen-first; prints duller) text 83 · 64 · 0 · 0 |
| Danger | #E4536B | #A40838 | #FFEBEC #F4B4B9 | #301418 #6C343A | text 6.9 : 1 light · 5.2 : 1 dark · Ink on badge 5.2 : 1 | identity 12 · 79 · 42 · 1 text 24 · 100 · 64 · 22 |
Neutral states use the core palette: pending and in-progress are Mute with a spinner; disabled is Line. Invalid form fields take a 2 px border in the danger text colour. Status colours are never chart series, and chart series never signal a state. Info is screen-first: vivid blues sit outside CMYK, so printed info notes reproduce slightly duller.
Six metal-inspired hues, always assigned in this order and never cycled. A seventh series folds into “Other”. Metalinq Red is not a series: it marks a single highlighted value, with everything else in Mute.
Scatter plots and maps can show at most three series (any two marks may touch). One y-axis per chart; two measures means two charts.
One hue, light to dark, for “how much”: volumes by region, tonnes by month. Passes the ramp checks: steps read in order, gaps are visible, the light end clears the page.
CMYK (coated): 47·24·6·0 · 64·37·9·0 · 78·53·13·1 · 88·65·20·5 · 96·78·33·20. Validated with the data-visualisation palette checker (OKLab, Machado 2009 colour-blind simulation) and ColorSync with Coated GRACoL 2006.
A complete audit of Concept 2, with every value named and given a job. If a colour is not on this list, it should not be in the code.
#D52B1EAccent only: 0.1% of the homepage today; never above 3% of a screen#111113Headlines, text, primary buttons; the Insights background#3A3A3FBody and supporting copy#6E6E73Labels, captions, sources#E2E2DEHairlines, dividers, document icons#F5F5F3Page background#FFFFFFCards and raised surfaces#ECECE9Photo backdrops, image placeholders, soft fills#76767CSecond line of large headlines (4.1 : 1, large text only)#C9C9CCStatement words before they light up on scroll (decorative state)#111113Section background (same value as Ink)#1C1C1FCards on dark#2A2A2ERules and borders on dark#B8B8BDBody text on dark: 9.6 : 1#9A9AA0Labels, sources, soft headline on dark: 6.7 : 1White at 8–98%Frosted cards, nav, mobile bar; always over imagery or PaperInk at 4–45%Soft depth under cards; never a hard greyrgba(255, 96, 70)Morning light in the hero and placeholders; never a fillRed at 16–45%Soft halo on the process line and globe routes#B9B9BDDashed line under details the client still has to supplyMerged on 1 Nov 2026 to remove drift: four near-identical light greys became Mist; two dark borders became Night line; two dark greys became Night mute; the document-icon grey became Line; pure-black hovers and shadows became Ink; off-white highlights became White. A script now checks the site against this list.
In imagery, red appears only as low morning light (alpenglow) falling from the left. On screen the same light is a soft tint, rgba(255, 96, 70), used for glows and never as a fill.