Midnight Ink

A dark blue-black canvas with soft moonlit text and a single lamp-gold accent, made for long sessions at night.

technical
luxurious
cool

The colours

Each colour has one job. The mock layout uses only pairs that pass AA, and the list shows every pair that is readable, measured rather than guessed.

Night Skybackground #12141a
Shadowed Desksurface #1c1f28
Moonlighttext #e8e6e1
Cloud Greymuted #a2a7b3
Lamp Goldaccent #f2b84b
Starlight Blueaccent-2 #7fb6e6
Dusk Lineborder #2f3340

Sample page

A page in Midnight Ink

Every word here is drawn in this palette's own colours, using only pairs that pass AA.

Main action

A card on the surface

Secondary details sit a step quieter than the main text.

A small mock layout drawn in the Midnight Ink colours.

Accessible pairs

AA pairs (4.5:1 or more) suit body text; AA large pairs (3:1 or more) are for text 24px and larger.

Moonlight on Night Sky14.8:1 (AA)
Night Sky on Moonlight14.8:1 (AA)
Moonlight on Shadowed Desk13.2:1 (AA)
Shadowed Desk on Moonlight13.2:1 (AA)
Lamp Gold on Night Sky10.3:1 (AA)
Night Sky on Lamp Gold10.3:1 (AA)
Dusk Line on Moonlight10.1:1 (AA)
Moonlight on Dusk Line10.1:1 (AA)
Lamp Gold on Shadowed Desk9.2:1 (AA)
Shadowed Desk on Lamp Gold9.2:1 (AA)
Night Sky on Starlight Blue8.5:1 (AA)
Starlight Blue on Night Sky8.5:1 (AA)
Cloud Grey on Night Sky7.6:1 (AA)
Night Sky on Cloud Grey7.6:1 (AA)
Shadowed Desk on Starlight Blue7.6:1 (AA)
Starlight Blue on Shadowed Desk7.6:1 (AA)
Dusk Line on Lamp Gold7.0:1 (AA)
Lamp Gold on Dusk Line7.0:1 (AA)
Cloud Grey on Shadowed Desk6.8:1 (AA)
Shadowed Desk on Cloud Grey6.8:1 (AA)
Dusk Line on Starlight Blue5.8:1 (AA)
Starlight Blue on Dusk Line5.8:1 (AA)
Cloud Grey on Dusk Line5.2:1 (AA)
Dusk Line on Cloud Grey5.2:1 (AA)

Copy the idea

The Midnight Ink recipe — its idea, colours, accessible pairs and rules — ready to paste into a design tool or an AI assistant, or as design tokens.

# Midnight Ink — palette recipe

## The idea
- A dark blue-black canvas with soft moonlit text and a single lamp-gold accent, made for long sessions at night.

## Use it for
- Code tools and developer docs
- Music, film and night-time apps
- Premium product launches

## Avoid it when
- Readers print the pages or read long text in daylight
- The audience expects a bright, cheerful tone

## Colours
- Night Sky (background): #12141a
- Shadowed Desk (surface): #1c1f28
- Moonlight (text): #e8e6e1
- Cloud Grey (muted): #a2a7b3
- Lamp Gold (accent): #f2b84b
- Starlight Blue (accent-2): #7fb6e6
- Dusk Line (border): #2f3340

## Accessible pairs
- Moonlight on Night Sky — 14.8:1 (AA)
- Night Sky on Moonlight — 14.8:1 (AA)
- Moonlight on Shadowed Desk — 13.2:1 (AA)
- Shadowed Desk on Moonlight — 13.2:1 (AA)
- Lamp Gold on Night Sky — 10.3:1 (AA)
- Night Sky on Lamp Gold — 10.3:1 (AA)
- Dusk Line on Moonlight — 10.1:1 (AA)
- Moonlight on Dusk Line — 10.1:1 (AA)
- Lamp Gold on Shadowed Desk — 9.2:1 (AA)
- Shadowed Desk on Lamp Gold — 9.2:1 (AA)
- Night Sky on Starlight Blue — 8.5:1 (AA)
- Starlight Blue on Night Sky — 8.5:1 (AA)
- Cloud Grey on Night Sky — 7.6:1 (AA)
- Night Sky on Cloud Grey — 7.6:1 (AA)
- Shadowed Desk on Starlight Blue — 7.6:1 (AA)
- Starlight Blue on Shadowed Desk — 7.6:1 (AA)
- Dusk Line on Lamp Gold — 7.0:1 (AA)
- Lamp Gold on Dusk Line — 7.0:1 (AA)
- Cloud Grey on Shadowed Desk — 6.8:1 (AA)
- Shadowed Desk on Cloud Grey — 6.8:1 (AA)
- Dusk Line on Starlight Blue — 5.8:1 (AA)
- Starlight Blue on Dusk Line — 5.8:1 (AA)
- Cloud Grey on Dusk Line — 5.2:1 (AA)
- Dusk Line on Cloud Grey — 5.2:1 (AA)

## Principles
- Never use pure black or pure white; the softened pair is gentler on the eyes.
- Use lamp gold for one primary action and for focus rings, nothing else.
- Put dark text on gold buttons, not light text.
- Raise layers by lightening the surface, not by adding shadows.
- Use starlight blue for links inside long text.

Design with the "Midnight Ink" palette.
The idea: A dark blue-black canvas with soft moonlit text and a single lamp-gold accent, made for long sessions at night.
It suits: Code tools and developer docs.
It suits: Music, film and night-time apps.
It suits: Premium product launches.
Do not choose it when: Readers print the pages or read long text in daylight.
Do not choose it when: The audience expects a bright, cheerful tone.
Use #12141a (Night Sky) as the background colour.
Use #1c1f28 (Shadowed Desk) as the surface colour.
Use #e8e6e1 (Moonlight) as the text colour.
Use #a2a7b3 (Cloud Grey) as the muted colour.
Use #f2b84b (Lamp Gold) as the accent colour.
Use #7fb6e6 (Starlight Blue) as the accent-2 colour.
Use #2f3340 (Dusk Line) as the border colour.
Set body text only in pairs marked AA (at least 4.5:1); pairs marked AA large (at least 3:1) are for text 24px and larger.
Pair: Moonlight on Night Sky — 14.8:1 (AA).
Pair: Night Sky on Moonlight — 14.8:1 (AA).
Pair: Moonlight on Shadowed Desk — 13.2:1 (AA).
Pair: Shadowed Desk on Moonlight — 13.2:1 (AA).
Pair: Lamp Gold on Night Sky — 10.3:1 (AA).
Pair: Night Sky on Lamp Gold — 10.3:1 (AA).
Pair: Dusk Line on Moonlight — 10.1:1 (AA).
Pair: Moonlight on Dusk Line — 10.1:1 (AA).
Pair: Lamp Gold on Shadowed Desk — 9.2:1 (AA).
Pair: Shadowed Desk on Lamp Gold — 9.2:1 (AA).
Pair: Night Sky on Starlight Blue — 8.5:1 (AA).
Pair: Starlight Blue on Night Sky — 8.5:1 (AA).
Pair: Cloud Grey on Night Sky — 7.6:1 (AA).
Pair: Night Sky on Cloud Grey — 7.6:1 (AA).
Pair: Shadowed Desk on Starlight Blue — 7.6:1 (AA).
Pair: Starlight Blue on Shadowed Desk — 7.6:1 (AA).
Pair: Dusk Line on Lamp Gold — 7.0:1 (AA).
Pair: Lamp Gold on Dusk Line — 7.0:1 (AA).
Pair: Cloud Grey on Shadowed Desk — 6.8:1 (AA).
Pair: Shadowed Desk on Cloud Grey — 6.8:1 (AA).
Pair: Dusk Line on Starlight Blue — 5.8:1 (AA).
Pair: Starlight Blue on Dusk Line — 5.8:1 (AA).
Pair: Cloud Grey on Dusk Line — 5.2:1 (AA).
Pair: Dusk Line on Cloud Grey — 5.2:1 (AA).
Follow this rule: Never use pure black or pure white; the softened pair is gentler on the eyes.
Follow this rule: Use lamp gold for one primary action and for focus rings, nothing else.
Follow this rule: Put dark text on gold buttons, not light text.
Follow this rule: Raise layers by lightening the surface, not by adding shadows.
Follow this rule: Use starlight blue for links inside long text.
Apply the idea and the rules above; do not copy any existing website.

:root {
  --color-background: #12141a;
  --color-surface: #1c1f28;
  --color-text: #e8e6e1;
  --color-muted: #a2a7b3;
  --color-accent: #f2b84b;
  --color-accent-2: #7fb6e6;
  --color-border: #2f3340;
}

Download brief (.md)

Where it fits

Use it for

Code tools and developer docs
Music, film and night-time apps
Premium product launches

Avoid it when

Readers print the pages or read long text in daylight
The audience expects a bright, cheerful tone

Principles

Never use pure black or pure white; the softened pair is gentler on the eyes.
Use lamp gold for one primary action and for focus rings, nothing else.
Put dark text on gold buttons, not light text.
Raise layers by lightening the surface, not by adding shadows.
Use starlight blue for links inside long text.

Back to all palettes