gaming palette
Nightshift colour palette
Dark and vivid. Two primaries, three alternates and a six-step base, with type, spacing, motion and contrast notes.
Primary and alternate
- Primary 1
- Primary 2
- Alternate 1
- Alternate 2
- Alternate 3
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
Type, spacing and motion follow the one system every Theme Tanker palette shares unless it has its own; the contrast notes are worked out from this palette's colours.
| Token | Value |
|---|---|
| Heading type | Geist |
| Body type | Geist |
| Mono type | Geist Mono |
| Type scale | 1.25 ratio: 16px, 20px, 25px, 31px, 39px |
| Weights | heading 500 / body 400 |
| Spacing base | 8px |
| Spacing steps | 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px |
| Corner radius | 8px |
| Elevation | 1px hairline borders; no shadow at rest. |
| Motion | When | Duration | Easing |
|---|---|---|---|
| Hover tint | hover | 120ms | cubic-bezier(0.4, 0, 0.2, 1) |
| Rise-and-fade entrance | mount | 200ms | cubic-bezier(0.16, 1, 0.3, 1) |
| Card hover lift | hover | 200ms | cubic-bezier(0.33, 1, 0.68, 1) |
Contrast notes
- Text sits on #E6EDF3 or #0D1117, which are 16.0:1 apart.
- Safe for body text: Primary 1, Primary 2, Alternate 2 and Alternate 3.
- Large text and icons only: Alternate 1.
| Colour | Hex | On #E6EDF3 | On #0D1117 | Safe for |
|---|---|---|---|---|
| Primary 1 | #0D1117 | 16.02:1 | 1.00:1 | Any text (AAA) on #E6EDF3 |
| Primary 2 | #161B22 | 14.64:1 | 1.09:1 | Any text (AAA) on #E6EDF3 |
| Alternate 1 | #7C4DFF | 4.07:1 | 3.93:1 | Large text and icons only on #E6EDF3 |
| Alternate 2 | #00E5FF | 1.30:1 | 12.30:1 | Any text (AAA) on #0D1117 |
| Alternate 3 | #E6EDF3 | 1.00:1 | 16.02:1 | Any text (AAA) on #0D1117 |
Nightshift as code
:root {
--nightshift-primary-1: #0D1117;
--nightshift-primary-2: #161B22;
--nightshift-alternate-1: #7C4DFF;
--nightshift-alternate-2: #00E5FF;
--nightshift-alternate-3: #E6EDF3;
}{
"nightshift": {
"primary-1": {
"$type": "color",
"$value": "#0D1117"
},
"primary-2": {
"$type": "color",
"$value": "#161B22"
},
"alternate-1": {
"$type": "color",
"$value": "#7C4DFF"
},
"alternate-2": {
"$type": "color",
"$value": "#00E5FF"
},
"alternate-3": {
"$type": "color",
"$value": "#E6EDF3"
}
}
}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.