← All palettes
Developer · No. 11

Code

Deep blue-violet, lavender text and soft pastel accents. A modern code editor, as a website.

dark technicalplayfulpastel
Get the tokens
The idea

Inspired by today’s pastel editor themes. The blue-violet base is easy on the eyes for long sessions, lavender text stays readable, and mauve marks active elements. Fira Code runs through headings and body for a full-terminal feel, ligatures included.

Mode
Dark
Family
Developer
Good for
dev blog, docs, changelog
Fonts
Fira Code
Colours

Eleven roles

Click any swatch to copy its hex code.

Accessibility

Contrast check

Worked out when the site is built, using the WCAG 2 formula.

Body text on background#CDD6F4 on #1E1E2E
The quick brown fox jumps over the lazy dog
11.34:1
AAA
Headings on background#E4E9FB on #1E1E2E
The quick brown fox jumps over the lazy dog
13.55:1
AAA
Muted text on background#9399B2 on #1E1E2E
The quick brown fox jumps over the lazy dog
5.81:1
AA
Links on background#89B4FA on #1E1E2E
The quick brown fox jumps over the lazy dog
7.79:1
AAA
Text on raised cards#CDD6F4 on #2A2A3C
The quick brown fox jumps over the lazy dog
9.71:1
AAA
Button label on accent#1E1E2E on #CBA6F7
The quick brown fox jumps over the lazy dog
8.07:1
AAA
Accent shapes on background#CBA6F7 on #1E1E2E
The quick brown fox jumps over the lazy dog
8.07:1
AAA

AAA ≥ 7:1 and AA ≥ 4.5:1 for normal text. AA Large ≥ 3:1 is enough for large headings, icons and button shapes.

Typography

The font pairing

Every font is self-hosted, so pages load without calling a third-party font service.

Aa
Headings
Fira Code

Small rooms full of light

Aa
Body
Fira Code

Good body type disappears: you stop noticing letters and start reading the story they carry.

{}
Code
Fira Code

const palette = "code"; // 0O 1lI =>

In use

A page in Code

Headings, links, quotes, code, buttons and cards together.

Code Journal EssaysNotesAbout
technical · 6 min read

What a colour remembers

14 October 2026 · by the editors

Colour is never just decoration. A background sets the temperature of a room before a single word is read, and an accent tells the eye where to go next. Choose them together and a site starts to feel like a place.

A palette is a promise about how a page will feel.
// apply the palette
const root = document.querySelector("html");
root.dataset.lbTheme = "code";
Subscribe Read the archive
Use it

Copy the tokens

Paste into your own project. The font names match the files listed on the Credits page.

/* Code: Deep blue-violet, lavender text and soft pastel accents. A modern code editor, as a website. */
:root {
  --color-bg:          #1E1E2E;
  --color-bg-alt:      #2A2A3C;
  --color-surface:     #181825;
  --color-text:        #CDD6F4;
  --color-heading:     #E4E9FB;
  --color-muted:       #9399B2;
  --color-accent:      #CBA6F7;
  --color-accent-2:    #A6E3A1;
  --color-link:        #89B4FA;
  --color-border:      #45475A;
  --color-on-accent:   #1E1E2E;

  --font-heading: 'Fira Code', ui-monospace, Consolas, monospace;
  --font-body:    'Fira Code', ui-monospace, Consolas, monospace;
  --font-mono:    'Fira Code', ui-monospace, Consolas, monospace;
}