Visual Language

A few consistent elements create a feeling of flow, craft, and clarity.

Color palette

Token	Color	Uses
`background`	`paper` #FAF8F5 oklch(98.0% 0.0045 78.3)	Page and section background.
`border`	`sand` #E5E1D6 oklch(91.0% 0.0154 90.2)	Dividers and box borders (e.g. mobile TOC).
`foreground`	`ink` #52504A oklch(43.1% 0.0100 91.6)	Primary body text.
`primary, headings, accent`	`slate-dark` #365C7A oklch(46.0% 0.0656 243.7)	Links, hover states, active nav/tag — the main interactive color.
`secondary, subheadings`	`forest-dark` #6A7C6E oklch(56.7% 0.0301 152.0)	Reserved for a secondary accent (not yet used).
`highlight`	`rust-dark` #BC5324 oklch(56.9% 0.1479 42.3)	Reserved for visual emphasis/pop (not yet used).
unassigned	`white` #FFFFFF oklch(100.0% 0 0)	Unassigned.
unassigned	`linen` #EFEAE1 oklch(93.8% 0.0132 82.4)	Unassigned.
unassigned	`gold-dark` #B8860B oklch(65.2% 0.1322 81.6)	Unassigned.

bg-background + border-border

A card using bg-background for its fill, border-border for its edge, and text-foreground (below) for body copy.

Typography, Text, and Headings

Aa — Headings: Source Serif 4

Aa — Body: Inter

Text and Headings

This is heading 1

This is heading 2

This is heading 3

This is heading 4

Brush Strokes

Two families: MaskImage (raster webp, recolored via CSS mask-image) and BrushStroke (procedural SVG with a turbulence filter). MaskImage accepts name (a "directory/basename" slug), color (any CSS color, via mask), flip (none / horizontal / vertical / both), and heightScale (shrink the rendered height below its natural aspect ratio).

Brush Image

<MaskImage name="brushes/thick-taper-1" color="var(--slate-dark)" />

<MaskImage name="brushes/thick-box-taper-1" color="var(--forest-dark)" flip="horizontal" />

<MaskImage name="brushes/medium-taper-1" color="var(--rust-dark)" :height-scale="0.5" />

<MaskImage name="brushes/medium-taper-2" color="var(--ink)" />

Brush Stroke

<BrushStroke />

<BrushStroke color="var(--ink)" />

Ink Dividers

Thin Pen Line

<ThinPenLine />

Line Image

<MaskImage name="lines/thin" color="var(--slate-dark)" />

<MaskImage name="lines/medium" color="var(--forest-dark)" />

<MaskImage name="lines/thick" color="var(--rust-dark)" />

<MaskImage name="lines/dotted" color="var(--ink)" />

<MaskImage name="lines/wavy" color="var(--slate-dark)" />

Ink Rule

<InkRule variant="fine" color="var(--slate-dark)" />

<InkRule variant="organic" color="var(--forest-dark)" />

<InkRule variant="brush" color="var(--rust-dark)" />

<InkRule variant="dotted" color="var(--ink)" />

<InkRule variant="squiggle" color="var(--slate-dark)" />

Underlines

Marker underline — for links and highlights

Sample link text

<MarkerUnderline color="var(--slate-dark)">Sample link text</MarkerUnderline>

Paper & Textures

Subtle background textures for depth and warmth — apply sparingly, as a backdrop layer via a plain CSS class (e.g. bg-background texture-paper-grain-light) on any element. None of these set a background color, so they compose with whatever surface color is already there.

class="bg-background texture-paper-grain-light"

class="bg-linen texture-paper-fiber"

class="texture-grain-overlay"

class="bg-background texture-graph-paper"

Markdown Aliases

MDC shorthand for components commonly used in markdown content, defined under app/components/md-aliases.

Use	Example
`::simple-line`

Illustration placeholder

<SketchPlaceholder label="Sample illustration placeholder" />