Colours

Click any swatch to copy its HEX code, or click an individual code to copy that value.

Strictly accents. Primary CTA buttons, micro-interactions, foil/spot-UV print accents.
KL Orange
Replaces #8E381E. A deeper, burned orange for digital interaction states that avoids brown.
UI Hover Orange
Master document backgrounds; primary typography on dark UI.
Pure White
App/web secondary backgrounds to reduce harsh screen glare; subtle borders.
Platinum
Secondary UI cards; uncoated print materials to avoid ink saturation limits.
Charcoal
Primary packaging backgrounds (matte); main typography on light UI.
Obsidian Black

Additional colours

Optional extras for interfaces and merchandise. Use them sparingly, as supporting accents alongside the main palette, never as replacements for it.

Sparingly. A deep, dark red for UI depth and merchandise backgrounds.
Deep Carbon Red
Sparingly. A vivid red accent for UI highlights and merchandise details.
Infrared Crimson
Sparingly. A deep, dark blue for UI depth and merchandise backgrounds.
Sapphire Shadow
Sparingly. A bright blue accent for UI highlights and merchandise details.
Ultramarine
Sparingly. A deep, dark green for UI depth and merchandise backgrounds.
Deep Forest
Sparingly. A rich green accent for UI highlights and merchandise details.
Sunny Emerald

UI colours

The working colours for screens, in a dark and a light set. Dark mode uses UI Hover Orange as its accent, which is softer on dark backgrounds and easier on the eyes; light mode uses KL Orange. Switch between them to compare.

Preview

Body text on the page is 19.1:1 and muted text on a card is 7.0:1. White on the accent is 4.9:1, which passes for all text. The accent itself is 4.3:1 on black, so use it for buttons, icons and large text.

Body text on the page is 15.5:1 and muted text on a card is 5.3:1. White on the accent is 3.4:1, which suits buttons and large text only. Avoid the accent for small body text on light backgrounds.

Background
The page
--kl-ui-bg
Header
Header bar
--kl-ui-header
Surface
Cards and menus
--kl-ui-surface
Raised surface
Hover and inputs
--kl-ui-surface-raised
Heading text
Headings
--kl-ui-heading
Body text
Paragraphs
--kl-ui-text
Muted text
Labels and captions
--kl-ui-text-muted
Border
Hairlines
--kl-ui-border
Strong border
Outlines and focus
--kl-ui-border-strong
Accent
Buttons and links
--kl-ui-accent
Accent hover
Hover state
--kl-ui-accent-hover
Text on accent
Labels on buttons
--kl-ui-on-accent
Background
The page
--kl-ui-bg
Header
Header bar
--kl-ui-header
Surface
Cards and menus
--kl-ui-surface
Raised surface
Hover and inputs
--kl-ui-surface-raised
Heading text
Headings
--kl-ui-heading
Body text
Paragraphs
--kl-ui-text
Muted text
Labels and captions
--kl-ui-text-muted
Border
Hairlines
--kl-ui-border
Strong border
Outlines and focus
--kl-ui-border-strong
Accent
Buttons and links
--kl-ui-accent
Accent hover
Hover state
--kl-ui-accent-hover
Text on accent
Labels on buttons
--kl-ui-on-accent
Neutral scale
Obsidian Black
Brand colour
Charcoal
Brand colour
Neutral 2
UI only
Neutral 3
UI only
Neutral 4
UI only
Neutral 5
UI only
Neutral 6
UI only
Platinum
Brand colour
Pure White
Brand colour

Surfaces, text and borders are all taken from this scale. Obsidian Black, Charcoal, Platinum and Pure White are brand colours; the other five are for interfaces only.

Typography

Header
Montserrat
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
0 1 2 3 4 5 6 7 8 9
Download
Body
Inter
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Download

Logos

YOU MIGHT ALSO LIKE TO SEE

View all
1 4
View all