Design system

The shared visual language of Alluv pages. This page is built from the same stylesheet it documents.

Color

One dark palette. Hairlines are decorative; anything a reader must see to operate a control uses --field-line or stronger.

Token	Value	Role	Minimum contrast
`--paper`	`#0e1518`	Background	—
`--ink`	`#e4ebe8`	Main text	7:1 on `#0e1518`
`--muted`	`#9aaba8`	Secondary text	4.5:1 on `#0e1518`
`--accent`	`#a8c4ba`	Accent, links, primary control	4.5:1 on `#0e1518`
`--paper`	`#0e1518`	Text on a primary control	4.5:1 on `#a8c4ba`
`--field-line`	`#5f7672`	Input and control boundaries	3:1 on `#0e1518`
`--error`	`#f0b7ab`	Error text and border	4.5:1 on `#0e1518`
`--line`	`#4a5e5c66`	Decorative hairlines only	—

Type

Newsreader for headings, the wordmark and running text; Manrope for labels, navigation, metadata and controls. Both self-hosted under the SIL Open Font License.

--display-xlalluv

--display-lg · h1

--display-sm · h2Year by year

.lede · serif 22pxA lede states the task in one sentence.

.prose · serif 19pxRunning text is set in the serif at 19px with a 1.55 line height, to a measure of 60 characters.

--text-md · sansManrope at 16px for controls, navigation and anything outside running text.

--text-sm · .smallSecondary detail and help text.

.labelSection label

--mono · codeforening.alluv.dev

Space

A 4px base. Prefer the larger steps between sections: open layouts, not dense ones.

--space-1 · 4px

--space-2 · 8px

--space-3 · 12px

--space-4 · 16px

--space-5 · 24px

--space-6 · 32px

--space-7 · 48px

--space-8 · 64px

--space-9 · 96px

Components

Index

.index — the umbrella's primary component: ruled entries, whole row clickable, no fills.

Entry
One sentence on what it is.
host.alluv.dev

Links and buttons

An inline link keeps its underline.

Primary Quiet

Fields

Messages

A neutral message, ruled by the accent.

An error states what went wrong in words, not color alone.

Details

Host: identity.alluv.dev
Purpose: Sign-in shared by Alluv applications.

Prose

.prose sets running text to the measure and spaces its children.

Quotations are ruled, not boxed.

Artwork

A static, seeded point cloud on canvas.cloud. Decorative only: aria-hidden, out of every hit area, hidden in forced colors, and the page reads the same without it. Vary data-seed per page.