interface palette
Midnight Professional colour palette
Dark-first B2B: deep slate surfaces, one restrained blue accent, high-legibility type and 1px borders instead of shadows - a dashboard you can live in for eight hours.
Primary and alternate
- Primary 1
- Primary 2
- Alternate 1
- Alternate 2
- Alternate 3
Named colours
- Primary
- Secondary
- Accent
- Call to action
- Background
- Surface
- Border
- Muted text
- Text
Base, worked out from the palette
- Base 1 (derived)
- Base 2 (derived)
- Base 3 (derived)
- Base 4 (derived)
- Base 5 (derived)
- Base 6 (derived)
Type, spacing and motion
This palette has its own type, spacing and motion; the contrast table is worked out from its colours.
| Token | Value |
|---|---|
| Heading type | Archivo |
| Body type | Public Sans |
| Mono type | Roboto Mono |
| Type scale | 1.2 ratio: 16px, 19px, 23px, 28px, 33px |
| Weights | heading 600 / 800 · body 400 / 500 |
| Spacing base | 4px |
| Spacing steps | 2px, 4px, 6px, 8px, 12px, 16px, 24px, 32px |
| Corner radius | 8px |
| Elevation | 1px borders and 12% tint layers - no shadows. |
| Motion | When | Duration | Easing |
|---|---|---|---|
| Skeleton pulse | loading | 1600ms | cubic-bezier(.37,0,.63,1) |
| Crossfade content swap | state change | 200ms | cubic-bezier(.4,0,.2,1) |
| Toast fade in / out | notification | 150ms | cubic-bezier(0,0,.2,1) |
Contrast notes
- Text sits on #0B1220 or #E7EDF6, which are 15.9:1 apart.
- Safe for body text: Primary 1, Primary 2, Alternate 1, Alternate 2, Primary, Secondary, Accent, Call to action, Background, Surface, Border, Muted text and Text.
- Large text and icons only: Alternate 3.
- Text #E7EDF6 on #0B1220 is 15.9:1; muted #9AA8BC is 7.8:1. Never pure-white text (halation on thin strokes).
- Body stays ≥ 16px at weight ≥ 450; status hues always paired with an icon or label, never colour alone.
- CTA darkened to #0369A1 so white labels reach 5.9:1; links use the sky primary at 6.5:1.
- Chart series never encoded by hue alone - paired with shape or label; screenshots get insight-stating alt text.
| Colour | Hex | On #0B1220 | On #E7EDF6 | Safe for |
|---|---|---|---|---|
| Primary 1 | #38BDF8 | 8.74:1 | 1.82:1 | Any text (AAA) on #0B1220 |
| Primary 2 | #0B1220 | 1.00:1 | 15.91:1 | Any text (AAA) on #E7EDF6 |
| Alternate 1 | #131C2E | 1.10:1 | 14.47:1 | Any text (AAA) on #E7EDF6 |
| Alternate 2 | #E7EDF6 | 15.91:1 | 1.00:1 | Any text (AAA) on #0B1220 |
| Alternate 3 | #64748B | 3.93:1 | 4.04:1 | Large text and icons only on #E7EDF6 |
| Primary | #38BDF8 | 8.74:1 | 1.82:1 | Any text (AAA) on #0B1220 |
| Secondary | #818CF8 | 6.28:1 | 2.53:1 | Body text (AA) on #0B1220 |
| Accent | #34D399 | 9.74:1 | 1.63:1 | Any text (AAA) on #0B1220 |
| Call to action | #0369A1 | 3.16:1 | 5.04:1 | Body text (AA) on #E7EDF6 |
| Background | #0B1220 | 1.00:1 | 15.91:1 | Any text (AAA) on #E7EDF6 |
| Surface | #131C2E | 1.10:1 | 14.47:1 | Any text (AAA) on #E7EDF6 |
| Border | #273349 | 1.48:1 | 10.77:1 | Any text (AAA) on #E7EDF6 |
| Muted text | #9AA8BC | 7.76:1 | 2.05:1 | Any text (AAA) on #0B1220 |
| Text | #E7EDF6 | 15.91:1 | 1.00:1 | Any text (AAA) on #0B1220 |
Midnight Professional as code
:root {
--midnight-professional-primary-1: #38BDF8;
--midnight-professional-primary-2: #0B1220;
--midnight-professional-alternate-1: #131C2E;
--midnight-professional-alternate-2: #E7EDF6;
--midnight-professional-alternate-3: #64748B;
--midnight-professional-primary: #38BDF8;
--midnight-professional-secondary: #818CF8;
--midnight-professional-accent: #34D399;
--midnight-professional-call-to-action: #0369A1;
--midnight-professional-background: #0B1220;
--midnight-professional-surface: #131C2E;
--midnight-professional-border: #273349;
--midnight-professional-muted-text: #9AA8BC;
--midnight-professional-text: #E7EDF6;
}{
"midnight-professional": {
"primary-1": {
"$type": "color",
"$value": "#38BDF8"
},
"primary-2": {
"$type": "color",
"$value": "#0B1220"
},
"alternate-1": {
"$type": "color",
"$value": "#131C2E"
},
"alternate-2": {
"$type": "color",
"$value": "#E7EDF6"
},
"alternate-3": {
"$type": "color",
"$value": "#64748B"
}
}
}Using it on a report? Paste the first primary into Primary colour and an alternate into Accent colour in your account's Branding.
Put your colours on every report.
Run the free website health check on any site, then send your clients the Website Health Report in your own colours each month.