Design System — Coffee Not Sleep

Colour

Accent palette

Dual-palette — the accent token names are constant but their values change completely between light and dark mode. Light mode is warm earth (espresso, terracotta, brick rose); dark mode is cool spectral (indigo, violet, periwinkle). Overrides live in [data-theme="dark"] in global.css.

Light mode accents

Accent Topic Burnt sienna --color-accent-topic #7A3820 Topic tags

Accent Topic Light Light terracotta --color-accent-topic-light #B06850 Hover / light use

Accent Action Bright vermilion --color-accent-action #CC3410 Type tags, links, CTAs

Accent Action Light Coral vermilion --color-accent-action-light #E86040 Hover / light use

Accent Vibe Deep brick rose --color-accent-vibe #7A3838 Vibe tags

Accent Vibe Light Dusty rose --color-accent-vibe-light #C08878 Hover / light use

Accent Decorative Warm umber --color-accent-decorative #B07858 Decorative only

Ink Deep espresso --color-ink #2A1608 Near-black moments

Parchment Warm clay pink --color-parchment #F0E3D4 Matches bg-primary

Dark mode accents

Accent Topic Indigo --color-accent-topic #5858A8 Topic tags

Accent Topic Light Pale periwinkle --color-accent-topic-light #9898D0 Text / hover

Accent Action Deep vermilion --color-accent-action #B82C10 Type tags (pill bg)

Accent Action Light Coral vermilion --color-accent-action-light #E86040 Text / hover

Accent Vibe Deep violet --color-accent-vibe #7858A8 Vibe tags

Accent Vibe Light Pale lavender --color-accent-vibe-light #C0A0D8 Text / hover

Accent Decorative Periwinkle --color-accent-decorative #9898D0 Decorative only

Ink Deep violet --color-ink #1A1228 Near-black moments

Parchment Pale mist --color-parchment #EAE6F0 Text on accent bgs

Base tokens — light mode

BG Primary #F0E3D4 --color-bg-primary

BG Secondary #E8D4C0 --color-bg-secondary

BG Elevated #FAF5EF --color-bg-elevated

Text Primary #2A1608 --color-text-primary

Text Secondary #6A3C24 --color-text-secondary

Text Muted #9A6248 --color-text-muted

Base tokens — dark mode

BG Primary #1A1228 --color-bg-primary

BG Secondary #231838 --color-bg-secondary

BG Elevated #2E2044 --color-bg-elevated

Text Primary #EAE6F0 --color-text-primary

Text Secondary #A8A0C0 --color-text-secondary

Text Muted #706880 --color-text-muted

Typography

Typefaces

--font-display

Editorial New

Headlines, display type, zine mastheads. Pangram Pangram Foundry.

--font-body

Lora

All long-form prose. Warm, legible at reading sizes. Cyreal.

--font-ui

DM Sans

Tags, labels, metadata, small UI text. Colophon Foundry.

--font-mono

JetBrains Mono

Code blocks only. JetBrains.

Editorial New — all available weights

6 styles from the free licence: ultralight, regular, ultrabold — each with matching italic.

Ultralight · 300

The light through the canopy at dawn.

Ultralight Italic · 300

What the root knows about patience.

Regular · 400

A place for things that connect across categories.

Italic · 400

I want to find something I didn't know I needed.

Ultrabold · 800

PULL A THREAD. SEE WHERE IT LEADS.

Ultrabold Italic · 800

Against the shelf life.

Type scale

Fluid via CSS clamp(). Golden Ratio (φ=1.618) for steps ≥ 0; Major Third (1.25) below. Viewport: 375px → 1440px.

--step-4 Jumbo 110→124px

Coffee

--step-3 Display 64→96px

Not Sleep

--step-2 Headline 36→48px

Everything is connected.

--step-1 Title 22→24px

One thread leads to another.

--step-0 Body 17px

The structure is mycelial — no hierarchy, no center, everything linked to everything else through multiple possible paths. Recipes beside theory. Illustration beside fermentation notes.

--step--1 Small 15px

Reading time · published date · tag labels · supporting information that earns its smaller size.

--step--2 Label 12px

Coffee Not Sleep · Est. 2024

Space scale

Harmonically related to the type scale. --space-s = body text size. Use these tokens for all major layout spacing.

--space-3xs 4px

--space-2xs 6→7px

--space-xs 10→11px

--space-s 16→18px

--space-m 26→29px

--space-l 42→47px

--space-xl 68→76px

--space-2xl 110→124px

--space-3xl 178→200px

Components

TagPill

Three dimensions, three colour families. Pills link to their respective tag archive pages.

Topics — accent-topic

herbalism coffee anti-capitalism solarpunk

Type — accent-action

writing recipe field-notes opinion

Vibe — accent-vibe

tender speculative opinionated practical

Text & links

Body text in Lora. Inline links use accent-action underline and are warm without being aggressive. The line height is generous — 1.75 — to give long-form content room to breathe between lines.

Small text in DM Sans. Used for metadata, captions, reading time. Links still work here at this size.

LABEL TEXT · UPPERCASE · TRACKED · DM SANS

Borders

--color-border

--color-border-strong

Editorial Layouts

Set via entryLayout: in entry frontmatter. Note: the key is entryLayout (not layout) — Astro MDX reserves layout as a module import path. Full authoring reference at docs/EDITORIAL.md.

standard default

Handled by EntryLayout. 68ch reading column. Drop cap applied automatically for type: writing and type: opinion. No injected MDX components.

Short-to-medium pieces, recipes, photographs, lists.

longform

Handled by LongformLayout. 38em column, drop cap always on, reading progress bar, display: flow-root for floated Aside support.

Extended essays, anything over ~1500 words.

Injected MDX components:

PullQuote SectionBreak Aside

feature

Handled by FeatureLayout. Full-bleed 70vh hero with gradient overlay + italic title. Standard 68ch reading column below. Hero image strongly recommended.

Photographic essays, field dispatches, hero-image-led pieces.

Injected MDX components:

FullBleedImage ImagePair

custom

Per-entry bespoke layouts. Register in src/components/custom/index.ts — maps entry slug → layout component. Falls back to EntryLayout if slug not found.

Rare. Use only when none of the above layouts fit.