Design system

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

Colour

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`	`#1b2030`	Background	—
`--ink`	`#eeedf4`	Main text	7:1 on `#1b2030`
`--muted`	`#afb7cd`	Secondary text	4.5:1 on `#1b2030`
`--accent`	`#c6b6d8`	Accent, links, primary control	4.5:1 on `#1b2030`
`--paper`	`#1b2030`	Text on a primary control	4.5:1 on `#c6b6d8`
`--field-line`	`#7c849b`	Input and control boundaries	3:1 on `#1b2030`
`--error`	`#f0b7ab`	Error text and border	4.5:1 on `#1b2030`
`--line`	`#59607366`	Decorative hairlines only	—

Type

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

--display-xlalluv

--display-lg · h1

--display-sm · h2Year by year

--text-lg · h3, .ledeA lede states the task in one sentence.

--text-md · bodyBody text at 16px with a 1.6 line height, set to a measure of 64 characters.

--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 colour 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 colours, and the page reads the same without it. Vary data-seed per page.