interface palette
Retro Terminal colour palette
Phosphor CRT emulation: luminous green monospace glyphs on near-black, a blinking block cursor, faint scanline overlay and command-prompt interaction metaphors.
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 | JetBrains Mono |
| Body type | IBM Plex Sans |
| Mono type | JetBrains Mono |
| Type scale | 1.2 ratio: 16px, 19px, 23px, 28px, 33px |
| Weights | heading 700 / 800 · body 400 / 500 / 600 |
| Spacing base | 8px |
| Spacing steps | 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px |
| Corner radius | None |
| Elevation | Phosphor glow only (text-shadow 0 0 6px) - no box shadows. |
| Motion | When | Duration | Easing |
|---|---|---|---|
| Skeleton pulse | loading | 1600ms | cubic-bezier(.37,0,.63,1) |
| Hover tint | hover | 120ms | cubic-bezier(.4,0,.2,1) |
| Fade in on mount | mount | 160ms | cubic-bezier(.33,1,.68,1) |
Contrast notes
- Text sits on #0C0F0C or #E8EFE8, which are 16.5:1 apart.
- Safe for body text: Primary 1, Primary 2, Alternate 1, Alternate 2, Alternate 3, Primary, Secondary, Accent, Background, Surface, Border, Muted text and Text.
- Large text and icons only: Call to action.
- Green #4ADE80 on near-black #0C0F0C is 16.5:1; muted #9BA89B is 7.8:1; the green link tone measures 11.1:1.
- Green is prompt/success only; yellow #FACC15 is flags and warnings - warnings pair amber with text, never colour alone.
- Scanline overlay ≤ 6% opacity and glow radius ≤ 6px; blink and type-on stop under prefers-reduced-motion.
- Terminal blocks get role=img with an aria-label plus a plain-text transcript for screen readers.
| Colour | Hex | On #0C0F0C | On #E8EFE8 | Safe for |
|---|---|---|---|---|
| Primary 1 | #33FF66 | 14.36:1 | 1.15:1 | Any text (AAA) on #0C0F0C |
| Primary 2 | #050A06 | 1.03:1 | 17.05:1 | Any text (AAA) on #E8EFE8 |
| Alternate 1 | #17A94B | 6.25:1 | 2.63:1 | Body text (AA) on #0C0F0C |
| Alternate 2 | #FFB000 | 10.52:1 | 1.57:1 | Any text (AAA) on #0C0F0C |
| Alternate 3 | #0A140C | 1.03:1 | 16.05:1 | Any text (AAA) on #E8EFE8 |
| Primary | #4ADE80 | 11.06:1 | 1.49:1 | Any text (AAA) on #0C0F0C |
| Secondary | #A3A3A3 | 7.64:1 | 2.16:1 | Any text (AAA) on #0C0F0C |
| Accent | #FACC15 | 12.59:1 | 1.31:1 | Any text (AAA) on #0C0F0C |
| Call to action | #15803D | 3.84:1 | 4.29:1 | Large text and icons only on #E8EFE8 |
| Background | #0C0F0C | 1.00:1 | 16.47:1 | Any text (AAA) on #E8EFE8 |
| Surface | #161A16 | 1.10:1 | 15.03:1 | Any text (AAA) on #E8EFE8 |
| Border | #2A322A | 1.46:1 | 11.30:1 | Any text (AAA) on #E8EFE8 |
| Muted text | #9BA89B | 7.77:1 | 2.12:1 | Any text (AAA) on #0C0F0C |
| Text | #E8EFE8 | 16.47:1 | 1.00:1 | Any text (AAA) on #0C0F0C |
Retro Terminal as code
:root {
--retro-terminal-primary-1: #33FF66;
--retro-terminal-primary-2: #050A06;
--retro-terminal-alternate-1: #17A94B;
--retro-terminal-alternate-2: #FFB000;
--retro-terminal-alternate-3: #0A140C;
--retro-terminal-primary: #4ADE80;
--retro-terminal-secondary: #A3A3A3;
--retro-terminal-accent: #FACC15;
--retro-terminal-call-to-action: #15803D;
--retro-terminal-background: #0C0F0C;
--retro-terminal-surface: #161A16;
--retro-terminal-border: #2A322A;
--retro-terminal-muted-text: #9BA89B;
--retro-terminal-text: #E8EFE8;
}{
"retro-terminal": {
"primary-1": {
"$type": "color",
"$value": "#33FF66"
},
"primary-2": {
"$type": "color",
"$value": "#050A06"
},
"alternate-1": {
"$type": "color",
"$value": "#17A94B"
},
"alternate-2": {
"$type": "color",
"$value": "#FFB000"
},
"alternate-3": {
"$type": "color",
"$value": "#0A140C"
}
}
}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.