verdsvev · ds.leik.dev

mod::base

┌──────────────────────────┐
│  mod::base               │
└──────────────────────────┘

§ palette

16 tokens · 3 surfaces · 8 accents

» surfaces

Umbra #201f1e --vv-bg-deep deep bg

Young Night #222322 --vv-bg-base base bg

Oil #323229 --vv-bg-raised elevated bg

Kelp #514f3f --vv-border borders

Hinterland #65694d --vv-muted muted text

Rural Green #908050 --vv-olive dim accent

» text

Medallion #baa578 --vv-text-dim secondary text

Court-Bouillon #d2ca98 --vv-text primary text

» warm accents

— #695844 --vv-brown dark warm

Molten Caramel #ba7848 --vv-action primary action

— #c59253 --vv-amber amber

— #cba655 --vv-gold gold / warning

» greens

— olive #79844c --vv-olive-green olive / fn

— sage #5d885d --vv-sage success

— lt sage #abccad --vv-sage-light success text

» error

— #b56e42 --vv-error error / destructive

┌──────────────────────────┐
│  mod::base               │
└──────────────────────────┘

§ glyphs

IBM Plex Mono · weights 400 / 600 / 700 · monospace throughout

-- mod::typeface · IBM Plex Mono

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz

0 1 2 3 4 5 6 7 8 9 · ! @ # $ % ^ & * ( ) _ + - = [ ] { } | ; ' : " , . / < > ?

┌ ─ ┐ │ └ ┘ ╔ ═ ╗ ║ ╚ ╝ · ◆ » § ≡ ▾ ░ ▒ ▓ █ ▀ ▄

-- mod::scale

h1 · page heading 38px · 700

§ Section Heading

h2 · section title 28px · 700

mod::subsection

h3 · subsection 22px · 600

fn::label_text()

body 15px · 400

The quick brown fox jumps over the lazy dog. 0123456789

meta · label 13px · 400

» secondary info · captions · 13px · Hinterland

panel header 15px · 400

-- fn::controls() · mod::palette

-- mod::weights

400 · regular

The quick brown fox

600 · semibold

The quick brown fox

700 · bold

The quick brown fox

┌──────────────────────────┐
│  mod::base               │
└──────────────────────────┘

§ grid

3px base unit · 8 steps · max-width 960px

-- mod::spacing · visual ruler

--vv-space-1 3px

--vv-space-2 6px

--vv-space-3 9px

--vv-space-4 12px

--vv-space-5 15px

--vv-space-6 18px

--vv-space-8 24px

--vv-space-10 30px

token	value	common use
--vv-space-1	3px	tight icon gaps
--vv-space-2	6px	badge padding
--vv-space-3	9px	inline element gaps
--vv-space-4	12px	panel body padding
--vv-space-5	15px	form field gaps
--vv-space-6	18px	section sub-gaps
--vv-space-8	24px	section padding
--vv-space-10	30px	section bottom margin

mod::interface

┌──────────────────────────┐
│  mod::interface          │
└──────────────────────────┘

fn::controls()

4 variants · primary · secondary · ghost · danger

-- fn::controls() · all variants

-- fn::controls() · disabled state

variant	use	token
	main action	--vv-action
	secondary action	--vv-action (outline)
	low-priority	--vv-border
	destructive	--vv-error

┌──────────────────────────┐
│  mod::interface          │
└──────────────────────────┘

fn::tags()

5 semantic variants · prefix ◆ marker

-- fn::tags() · all variants

◆ active◆ pending◆ warning◆ stable◆ error

variant	use	border / text
◆ active	running, success	--vv-sage
◆ pending	in progress	--vv-action
◆ warning	needs attention	--vv-gold
◆ stable	neutral / default	--vv-olive-green
◆ error	failed, destructive	--vv-error

┌──────────────────────────┐
│  mod::interface          │
└──────────────────────────┘

fn::input()

text · select · checkbox · submit

-- fn::input() · form specimen

-- fn::input() · error state

» identifier · required ✕ value is not a valid identifier

┌──────────────────────────┐
│  mod::interface          │
└──────────────────────────┘

fn::panels()

header · body · footer anatomy

Primary action colour. Use for CTAs, focus rings, and active border states.

--vv-action · #ba7848

Interface components use the fn:: naming convention. Each is documented with variants, states, and token references.

-- fn::panels() · anatomy

body → card body content. padding: vv-space-4.

┌──────────────────────────┐
│  mod::interface          │
└──────────────────────────┘

fn::records()

tabular data · column headers · semantic row states

-- fn::records() · specimen

token	hex	role	status
--vv-action	#ba7848	primary action	◆ active
--vv-gold	#cba655	warning / gold	◆ warning
--vv-sage	#5d885d	success	◆ active
--vv-error	#b56e42	error	◆ error
--vv-text	#d2ca98	primary text	◆ stable

┌──────────────────────────┐
│  mod::interface          │
└──────────────────────────┘

fn::signals()

4 severity variants · left border + label

info() Operation completed successfully. Output written to stdout.

warn() Deprecated API in use. This will be removed in v2.0.

error() Connection refused. Check that the server is running on port 4321.

prompt() This action cannot be undone. Confirm to proceed.

┌──────────────────────────┐
│  mod::interface          │
└──────────────────────────┘

fn::syntax()

code blocks · line numbers · token colours

-- fn::syntax() · specimen · lua

 1-- mod::verdsvev · palette initialiser
 2local M = {}
 3
 4M.palette = {
 5  ACTION  = "#ba7848",  -- Molten Caramel
 6  GOLD    = "#cba655",
 7  SAGE    = "#5d885d",
 8  BG      = "#201f1e",  -- Umbra
 9}
10
11function M.setup(opts)
12  opts = opts or {}
13  local ok, err = pcall(init, opts)
14  if not ok then
15    vim.notify(err, vim.log.levels.ERROR)
16  end
17end
18
19return M

token role	colour	css var
keyword	■ #ba7848	--vv-syn-keyword
function	■ #79844c	--vv-syn-fn
string	■ #65694d	--vv-syn-string
number	■ #bb7844	--vv-syn-number
type	■ #5d885d	--vv-syn-type
punctuation	■ #514f3f	--vv-syn-punct
comment	■ #3a3828	--vv-syn-comment
constant	■ #cba655	--vv-syn-const

mod::doctrine

┌──────────────────────────┐
│  mod::doctrine           │
└──────────────────────────┘

§ tone

aesthetic principles · voice · visual language

fn::density()

Verdsvev does not breathe. Every pixel serves information. Padding is tight. Margins are earned. The grid is 3px — use it sparingly and precisely.

fn::language()

Names are functional: mod::, fn::(), §. Sections are modules. Components are functions. Labels use the terminal register — lowercase, colons, brackets. No marketing copy.

fn::colour()

Earth-stained, not earth-bright. Colours are matte and aged — dried rust, old brass, military olive, worn leather. Nothing vibrates. Nothing competes for attention.

fn::type()

IBM Plex Mono throughout. No optical adjustments between headings and body — only weight and scale. The monospace grid is the grid.

fn::decoration()

ASCII art is structural, not ornamental. Box-drawing characters (┌ ─ ┐) define panels. Special characters (§ ◆ » ≡) replace prose labels. Decoration earns its presence.

┌──────────────────────────┐
│  mod::doctrine           │
└──────────────────────────┘

§ assets

8 curated images · verdsvev palette · retro-tech · industrial

» hardware · circuits · terminals

vintage CRT terminal, phosphor glow

circuit board macro, dark substrate

» material · texture · age

rust and oxidised iron, close-up

worn leather rolls, amber tone

old leather-bound books, archive

» architecture · industrial · night

brutalist concrete facade

metal pipes, factory interior

night street, warm artificial light

┌──────────────────────────┐
│  mod::doctrine           │
└──────────────────────────┘

§ readme

for-claude · verdsvev-specific guidance

-- mod::readme · implementation notes

» identity

verdsvev is not a reskin of heimatt. It is a parallel system with its own tokens, naming conventions, sections, and aesthetic. Do not reference heimatt CSS variables (--sage-*, --bg-base, etc.) inside verdsvev components. Use --vv-* tokens exclusively.

» naming

Sections in mod::base and mod::doctrine use the § name prefix. Sections in mod::interface use fn::name(). Nav group labels use mod::name. This convention is consistent and intentional — do not change to prose labels.

» theme

verdsvev uses data-vv-theme="light" on <html> for light mode, stored in localStorage under key vv-theme. This is separate from heimatt's data-theme / theme key — the two systems do not share theme state.

» typography

IBM Plex Mono is the only typeface. Body size is 15px. Do not use font-size: inherit shortcuts that might pick up heimatt's body size. All font sizes in verdsvev components must be explicit.

» ascii art

The verdsvev block-pixel logo appears once at the top of the page as a full-width banner. Section headers use box-drawing borders (┌ ─ ┐ │ └ ┘). Do not add additional ASCII art or animated text effects — decoration earns its presence.

» adding sections

New sections go in src/sections/verdsvev/{base,interface,doctrine}/ and are imported into src/pages/verdsvev/index.astro. Add the nav link to TopNavVerdsvev.astro at the same time. No shared components with heimatt.