Keehan

Pallette

Four colours. A carbon ground, two purples and a cream. Everything else here is a measured step between two of them, and every step shows the number it was picked for.

The brand

These four are fixed. Nothing on the site introduces a fifth hue.

#111111
Carbon The ground 15.67:1 against cream, AA text
#A800FF
Amethyst Structure 3.69:1 on carbon, AA large only
#EF00FE
Fuchsia Interaction 5.49:1 on carbon, AA text
#F2E9D8
Cream Everything you read 15.67:1 on carbon, AA text

Why amethyst never sets small text

Amethyst measures 3.69:1 against carbon. That clears AA for large text and for the edge of a control, and it fails it for anything at reading size. Fuchsia measures 5.49:1 and clears AA on all three grounds.

So the split is not a taste call, it is the measurement. Amethyst is structure: rules, screens, borders, the drifting field behind the page. Fuchsia is the thing you can touch: links, focus rings, a live countdown. Cream is the thing you read. The whole system is three sentences and none of them are about how it looks.

Grounds

Neutral, so the purple is the only chroma in the frame. The tiers sit barely a tenth apart in luminance, which is not enough to separate two sections on brightness. The screen does that.

#111111
Carbon Page ground 15.67:1 against cream, AA text
#191919
Crypt Panels 14.59:1 against cream, AA text
#212121
Stone Raised sections 13.36:1 against cream, AA text
#0B0B0B
Pitch Insets, the debossed wordmark 16.33:1 against cream, AA text

Ink

Cream stepped toward carbon, so every tier is one warm hue at a different distance. Measured against stone, the lightest ground any of them can sit on.

#F2E9D8
Cream Headings, anything emphatic 13.36:1 on stone, AA text
#BAB3A6
Ash Body text 7.73:1 on stone, AA text
#A39D92
Dust Labels, notes, placeholders 5.98:1 on stone, AA text
#8D887E
Dimmest Furthest back 4.57:1 on stone, AA text

Chroma

#A800FF
Amethyst Structure: rules, screens, borders, the field 3.69:1 on carbon, AA large only
#EF00FE
Fuchsia Interaction: links, focus, live values 5.49:1 on carbon, AA text

Rules

Amethyst walked down into carbon. A hairline here is still brand purple, just most of the way to the ground.

#4D0A70
Edge Panels, inputs, the nav 1.43:1 on carbon, not for text
#3B0C54
Edge soft The masthead underline 1.23:1 on carbon, not for text
#2C0E3C
Edge faint Row separators 1.11:1 on carbon, not for text

The screen

Nothing here fades with opacity. A surface at half strength loses dots, not alpha, through an ordered Bayer 4x4 screen: the same matrix the slime edges and the blob field are drawn with. This is the ladder the stylesheet actually uses, amethyst over carbon.

1/16
Panel grounds cream holds above 11:1 at every level
2/16
Stone bands, notices cream holds above 11:1 at every level
3/16
The footer, poster art cream holds above 11:1 at every level
4/16
Buttons at rest cream holds above 11:1 at every level
8/16
Heading rules cream holds above 11:1 at every level
14/16
A button held down cream holds above 11:1 at every level

Retired

These came off the old site. Lavender is the one that mattered: it carried every link and accent on the previous build, and it was never a colour the brand owned. Fuchsia has that job now, at a contrast ratio lavender was only ever guessing at.

Off the last build

  • Lavender #B583FC Carried every link on the old build. Never a brand colour
  • Purple alt #AA00FF Two steps off amethyst
  • Fuchsia alt #EB00FF Four steps off fuchsia
  • Purple soft #BB67E4 Unused
  • Fuchsia soft #DA67E4 Unused
  • Lavender 2 #C6A6F2 Unused
  • Light purple #A666FF Unused

Off the old pallette page

  • Vamp Black #07000B Brand colour on the old page
  • Black #000000 Brand colour on the old page
  • White #FFFFFF Brand colour on the old page
  • Carbon #232323 The old carbon, two steps above Stone
  • Black 1 #0D131A Test replacement for black
  • Black 2 #010B13 Test replacement for black
  • White 1 #FCFCFF Test replacement for white
  • Vamp Black 1 #08000B Test replacement for vamp black
  • Link #7700FF Hyperlink text
  • Link hover #9900FF Hyperlink text on hover
  • Discord accent 1 #A116C7 Discord blurple recolour
  • Discord accent 2 #E6329B Discord blurple recolour
  • Unnamed grey #EDEDED Listed on the old page without a name
  • Unnamed dark #2D2D2D Listed on the old page without a name
  • Unnamed cream #FFFEEB Listed on the old page without a name