foundations

colours

Dark-first palette. Six named colours with five steps each: bg, border, default, light, muted.

base surfaces

--bg-base #161a16 page background

--bg-subtle #1e261e sidebar, elevated surfaces

--bg-elevated #111111 cards, code blocks

named colours

#1e261e

border

#2e3c2e

default

#5a9060

light

#78b880

muted

#d4e8d0

#121e1c

border

#1e3030

default

#4a7c6a

light

#5d9e8a

muted

#c0dcd4

#181c1a

border

#252c28

default

#5a6a62

light

#8a9e94

muted

#d0dcd6

#20100e

border

#361e1a

default

#963830

light

#b85248

muted

#e8c4be

#26200e

border

#3a3018

default

#a07830

light

#c99a40

muted

#ede0b4

#1c1e10

border

#2c3018

default

#7a8c38

light

#9aae50

muted

#d8e0b0

cream — primary text

dim

#c0b8a8

default

#d8d0c0

light

#e8e0d0

bright

#f4f0e8

white

#faf8f4

semantic mapping

meaning	colour
active · success	Sage
informational	Fjord Teal
warning	Amber
error · destructive	Terracotta
decorative · highlight	Olive
disabled · muted	Fog

typography

IBM Plex Mono — used at all levels. No secondary font. Eight-step scale from 36px display to 9px eyebrow.

type scale

text-display

36px · 700 · lh 1.05

page titles, hero

text-h1

24px · 600 · lh 1.15

section titles

text-h2

18px · 600 · lh 1.2

subsection headings

text-h3

14px · 600 · lh 1.3

component headings

text-body

13px · 400 · lh 1.7

body copy

text-sm

11px · 400 · lh 1.6

captions, helper text

text-label

10px · 600 · lh —

form labels, nav items

text-eyebrow

9px · 600 · lh —

section categories

weights

700

display only

600

headings, buttons, badges, nav

500

subheadings, emphasis, active states

400

body, helper text, code, inputs

capitalisation

element	case	example
nav, sidebar, tabs	all lowercase	foundations · components
headings (h1–h3)	all lowercase	colour palette
buttons	all lowercase	save changes · delete
badges, tags	all lowercase	active · warning · v1.2.0
form labels	all lowercase	project name
notice titles	all lowercase	deployment successful
body / descriptions	Proper case	Dark-first palette with six colours.
notice body	Proper case	Your app is live on port 5801.
proper nouns	As written	IBM Plex Mono · Claude
ALL CAPS	not used	—

spacing

4px base unit. Nine named steps. Default to generous: space-4 inside components, space-8 between sections.

--space-1 4px

icon gaps, dot-to-label

--space-2 8px

gap between badges and text

--space-3 12px

button padding vertical, sidebar items

--space-4 16px

card padding, button padding horizontal, table cells

--space-5 20px

gap between sibling components

--space-6 24px

section inner padding, sidebar padding

--space-8 32px

gap between sections, card grid gap

--space-10 40px

page content padding, major section separation

--space-13 52px

content area horizontal padding, gutters

components

buttons

Sharp 2px radius. Four variants, two sizes. Lowercase labels.

variants

sizes

specs

variant	background	text	border
primary	#5a9060	cream-bright	none
secondary	transparent	sage-light	sage-border
ghost	transparent	fog-light	fog-border
danger	transparent	terra-light	terra-border

badges

Dot + coloured border. Neutral cream label text. No filled background.

semantic variants

active info warning error decorative disabled

no-dot variant

v1.2.0 draft beta

forms

Underline style — bottom border only. No box, no background fill.

states

project name default state

domain focused state

port port already in use

api key disabled state

cards

Flat, border only. No shadow. Three variants: default, hover state, accent (left border).

variants

default card

Border only, elevated background. Used for content grouping.

hover state

Border brightens on hover. No other visual change.

accent card

3px left border in sage. Used to highlight active or important content.

tables

Row borders, no fill. Header in eyebrow style. Numeric columns use tabular figures.

name	port	status	updated
wc2026-app	5801	active	2026-04-07
euro26-app	5802	active	2026-04-06
ds	5803	building	2026-04-08
request-app	5804	disabled	2026-03-12

notices

Left border strip. 3px left border in colour-default, 1px remaining sides in colour-border. No background fill.

deployment successful

Your app is live on port 5801. No action required.

update available

A new version is ready. Review the changelog before deploying.

certificate expiring

TLS certificate expires in 14 days. Renew via Nginx Proxy Manager.

build failed

The Docker build exited with code 1. Check the container logs for details.

code

Line numbers. Gruvbox-inspired syntax tokens mapped to the palette. Inline code in olive.

block

12345678

const palette  = {
  sage:  '#5a9060',  // active · success
  amber: '#a07830',  // warning
  terra: '#963830',  // error
};

function getToken(name: string) {
  return palette[name] ?? null;
}

inline code

Use --sage-default for interactive elements. Never use --sage-bg for text colour.

syntax tokens

type	colour	palette
keyword	#c99a40	Amber
string	#9aae50	Olive
function	#78b880	Sage
type	#5d9e8a	Fjord Teal
number	#b85248	Terracotta
punctuation	#5a6a62	Fog
comment	#4a5a45	dark muted

principles

mood & atmosphere

Dark, quiet, Nordic. Functional like a terminal, atmospheric like a foggy forest. It does not perform, it does not shout.

dark-firstatmosphericnordicearthyterminal-nativequiet not playfulnot corporatenot loudnot bright

principles

dark first, always

Dark mode is not a feature — it is the default. When in doubt, go darker and more muted rather than lighter and more colourful.

restraint over decoration

Every element earns its place. Borders instead of shadows. One accent colour per surface. Empty space is breathing room, not waste.

warmth through contrast

Warm elements (amber, olive, cream) have more impact when surrounded by cool dark surfaces. Use them sparingly — never as wallpaper.

functional beauty

Inspired by unix ricing — the aesthetic comes from precision and consistency, not ornament. A well-spaced monospaced label is more beautiful than a decorative flourish.

calm, not cold

Dark and minimal does not mean clinical. The palette is earthy and warm-dark. Always lean warm in undertones.

do & don't

Use generous spacing — empty space reads as confidence

don't

Crowd elements together to fit more on screen

Use a single accent colour per component

don't

Use multiple accent colours on the same surface

Let dark backgrounds do the heavy lifting

don't

Compensate for dark surfaces with bright colours

Use borders to define space — 1px, subtle

don't

Use shadows, gradients, or glows as primary structure

Lowercase everything except body sentences and proper nouns

don't

Use ALL CAPS or Mixed Case in UI chrome

image library

24 curated images. Used for page backgrounds, logo backdrops, section headers, and crop details. Prefer photography for full-bleed backgrounds.

photography — north · fog · water

misty dark pine forest

teal foggy forest, very moody

fjord pier, lone figure

house on fjord, fog

boat on misty lake

old pier posts, dark water

rocky coastline, blue-grey

lone rock, grey sea

photography — snow · winter

lone pine tree, white field

snowy village, warm lights at night

aerial snowy pines

firewood with snow

b&w rolling hill

mountains at amber dusk

stormy nordic road

stacked logs, winter

photography — forest · nature

moss forest floor

aerial road through pine forest

street lights in fog, near-black

illustration & flat art

flat layered mountain silhouettes

firewatch-style blue silhouette forest

flat illustrated forest/lake, blue-grey

dark illustrated mountains

ink-sketch mountain range

for claude

When building UI for leik.dev projects, apply these rules without needing to be asked.

→ Background: always start from #161a16 (bg-base). Never pure black or pure white.

→ Accent: sage (#5a9060) for interactive elements only. Use #78b880 (sage-light) for text on dark.

→ Borders: 1px solid. Use the border token for the relevant colour (e.g. #2e3c2e for sage). Never hairline, never 2px except left-border accents.

→ Radius: 2px on all components. Never 0, never pill, never large radius.

→ Typography: IBM Plex Mono only. Lowercase for all UI chrome. Proper case for sentences.

→ Spacing: 4px base unit. Default to generous — space-4 (16px) inside components, space-8 (32px) between sections.

→ Semantic colour: sage = active/success · amber = warning · terracotta = error · fjord teal = info · olive = decorative only · fog = disabled/muted.

→ Text selection: background: #3a2c10 · color: #ede0b4 (amber).

→ Capitalisation: all lowercase for UI chrome. Proper case for body sentences only.

→ When unsure: go darker, more muted, more spaced out. The aesthetic rewards restraint.

→ Images: pull from the 24 curated images in /inspiration/ for backgrounds and visual accents. Prefer photography for full-bleed backgrounds.