Violet dawn

The cool lilac sky just before sunrise, with one vivid violet and a blush of peach, for modern products that want to feel fresh and a little dreamy.

cool
friendly
playful

The colours

7 colours, each with a role, then the palette at work on a small page.

Lilac skybackground#f3f1fa
First lightsurface#ffffff
Night violettext#231f3a
Duskmuted#57527a
Vivid violetaccent#5a3dcf
Peach blushaccent-2#ffd8c9
Hazeborder#d8d3ea

Text on background: 14.13:1 — passes AA

Spring open days

A garden worth the walk

Paths, ponds and a glasshouse full of ferns, open every weekend from April to June.

Plan a visit

New

The late tulip border

Two hundred bulbs, planted by volunteers last autumn.

A made-up page in this palette. Every text colour reaches at least 4.5:1 on its background; the heading, at 28px, may use a 3:1 pair.

Copy the idea

Take the palette with you as a brief for a person, as instructions for an AI assistant, or as design tokens: the colours, their roles and the pairs that are safe for text.

# Violet dawn — palette recipe

## The idea

- The cool lilac sky just before sunrise, with one vivid violet and a blush of peach, for modern products that want to feel fresh and a little dreamy.
- Mood: cool, friendly, playful

## Use it for

- Software products and onboarding
- Learning and course platforms
- Creative communities

## Avoid it when

- The audience expects a traditional, conservative look
- The product is about food or earthy materials

## Colours

- Lilac sky (background): #f3f1fa
- First light (surface): #ffffff
- Night violet (text): #231f3a
- Dusk (muted): #57527a
- Vivid violet (accent): #5a3dcf
- Peach blush (accent-2): #ffd8c9
- Haze (border): #d8d3ea

## Accessible pairs

- First light on Night violet — 15.8:1 (AA)
- Night violet on First light — 15.8:1 (AA)
- Lilac sky on Night violet — 14.1:1 (AA)
- Night violet on Lilac sky — 14.1:1 (AA)
- Night violet on Peach blush — 12.0:1 (AA)
- Peach blush on Night violet — 12.0:1 (AA)
- Haze on Night violet — 10.9:1 (AA)
- Night violet on Haze — 10.9:1 (AA)
- Dusk on First light — 7.3:1 (AA)
- First light on Dusk — 7.3:1 (AA)
- First light on Vivid violet — 7.0:1 (AA)
- Vivid violet on First light — 7.0:1 (AA)
- Dusk on Lilac sky — 6.5:1 (AA)
- Lilac sky on Dusk — 6.5:1 (AA)
- Lilac sky on Vivid violet — 6.3:1 (AA)
- Vivid violet on Lilac sky — 6.3:1 (AA)
- Dusk on Peach blush — 5.5:1 (AA)
- Peach blush on Dusk — 5.5:1 (AA)
- Peach blush on Vivid violet — 5.3:1 (AA)
- Vivid violet on Peach blush — 5.3:1 (AA)
- Dusk on Haze — 5.0:1 (AA)
- Haze on Dusk — 5.0:1 (AA)
- Haze on Vivid violet — 4.8:1 (AA)
- Vivid violet on Haze — 4.8:1 (AA)

## Principles

- Lilac sky covers about 60% of the page and first light about 30%, for cards and forms
- Vivid violet for primary buttons, links and key icons, about 7% of the page
- Peach blush for badges and gentle highlights, with night violet text on it, about 3%
- Dusk carries labels, help text and secondary details
- Use haze for borders and dividers so the page stays soft

Design with the "Violet dawn" palette.

The idea: The cool lilac sky just before sunrise, with one vivid violet and a blush of peach, for modern products that want to feel fresh and a little dreamy.
The mood: cool, friendly, playful.

It suits:
- Software products and onboarding
- Learning and course platforms
- Creative communities
It is a poor fit when:
- The audience expects a traditional, conservative look
- The product is about food or earthy materials

Use these colours, each in its role:
- Lilac sky (background): #f3f1fa
- First light (surface): #ffffff
- Night violet (text): #231f3a
- Dusk (muted): #57527a
- Vivid violet (accent): #5a3dcf
- Peach blush (accent-2): #ffd8c9
- Haze (border): #d8d3ea

Set text only in these colour pairs (text on background); use the ones marked (AA large) only for text at least 24px, or 18.66px bold:
- First light on Night violet — 15.8:1 (AA)
- Night violet on First light — 15.8:1 (AA)
- Lilac sky on Night violet — 14.1:1 (AA)
- Night violet on Lilac sky — 14.1:1 (AA)
- Night violet on Peach blush — 12.0:1 (AA)
- Peach blush on Night violet — 12.0:1 (AA)
- Haze on Night violet — 10.9:1 (AA)
- Night violet on Haze — 10.9:1 (AA)
- Dusk on First light — 7.3:1 (AA)
- First light on Dusk — 7.3:1 (AA)
- First light on Vivid violet — 7.0:1 (AA)
- Vivid violet on First light — 7.0:1 (AA)
- Dusk on Lilac sky — 6.5:1 (AA)
- Lilac sky on Dusk — 6.5:1 (AA)
- Lilac sky on Vivid violet — 6.3:1 (AA)
- Vivid violet on Lilac sky — 6.3:1 (AA)
- Dusk on Peach blush — 5.5:1 (AA)
- Peach blush on Dusk — 5.5:1 (AA)
- Peach blush on Vivid violet — 5.3:1 (AA)
- Vivid violet on Peach blush — 5.3:1 (AA)
- Dusk on Haze — 5.0:1 (AA)
- Haze on Dusk — 5.0:1 (AA)
- Haze on Vivid violet — 4.8:1 (AA)
- Vivid violet on Haze — 4.8:1 (AA)

Follow these principles:
- Lilac sky covers about 60% of the page and first light about 30%, for cards and forms
- Vivid violet for primary buttons, links and key icons, about 7% of the page
- Peach blush for badges and gentle highlights, with night violet text on it, about 3%
- Dusk carries labels, help text and secondary details
- Use haze for borders and dividers so the page stays soft

Apply the idea and the rules above; do not copy any existing website.

:root {
  --color-background: #f3f1fa;
  --color-surface: #ffffff;
  --color-text: #231f3a;
  --color-muted: #57527a;
  --color-accent: #5a3dcf;
  --color-accent-2: #ffd8c9;
  --color-border: #d8d3ea;
}

Download brief (.md)

Accessible pairs

Every pair of colours that is readable as text, strongest first. AA pairs (4.5:1 or more) work at any size; AA large pairs (3:1 or more) only for text of 24px, or 18.66px bold.

Text on background	Contrast	Level
First light on Night violet	15.8:1	AA
Night violet on First light	15.8:1	AA
Lilac sky on Night violet	14.1:1	AA
Night violet on Lilac sky	14.1:1	AA
Night violet on Peach blush	12.0:1	AA
Peach blush on Night violet	12.0:1	AA
Haze on Night violet	10.9:1	AA
Night violet on Haze	10.9:1	AA
Dusk on First light	7.3:1	AA
First light on Dusk	7.3:1	AA
First light on Vivid violet	7.0:1	AA
Vivid violet on First light	7.0:1	AA
Dusk on Lilac sky	6.5:1	AA
Lilac sky on Dusk	6.5:1	AA
Lilac sky on Vivid violet	6.3:1	AA
Vivid violet on Lilac sky	6.3:1	AA
Dusk on Peach blush	5.5:1	AA
Peach blush on Dusk	5.5:1	AA
Peach blush on Vivid violet	5.3:1	AA
Vivid violet on Peach blush	5.3:1	AA
Dusk on Haze	5.0:1	AA
Haze on Dusk	5.0:1	AA
Haze on Vivid violet	4.8:1	AA
Vivid violet on Haze	4.8:1	AA

Where it fits

Use it for

Software products and onboarding
Learning and course platforms
Creative communities

Avoid it when

The audience expects a traditional, conservative look
The product is about food or earthy materials

Principles

How much of each colour to use, and where.

Lilac sky covers about 60% of the page and first light about 30%, for cards and forms
Vivid violet for primary buttons, links and key icons, about 7% of the page
Peach blush for badges and gentle highlights, with night violet text on it, about 3%
Dusk carries labels, help text and secondary details
Use haze for borders and dividers so the page stays soft