marktvogt.de/web/docs/design-system.md

Marktvogt Design System — Burgund

Established May 2026 via Claude Design handoff (bundle: marktvogt-de.tar.gz).

Identity

Burgund is the locked visual identity for Marktvogt. The name comes from the deep sealing-wax red at its core.

Design principles chosen in the original session:

• Editorial-classical — Cormorant Garamond display, EB Garamond body, editorial proportions
• Mid-density — enough whitespace to breathe, enough content to inform
• Minimal decoration — one ornament glyph (✦), drop-caps, double rules only. No rounded corners, no gradient badges, no color-coded semantic variants.
• Body-lead hierarchy — lead paragraph at 22px italic, then 16/15/14px body; display headlines at 76/56/44px

Tokens

Source of truth: web/src/app.css (@theme block and :root.dark overrides).

Token	Light	Dark
--color-bg	#f5efe4 (warm parchment)	#0f0c0a (deep ink)
--color-surface	#ffffff	#191411
--color-surface-alt	#ece4d4	#241c17
--color-ink	#181410	#f0e6d2
--color-ink-soft	#3a322a	#c0b094
--color-ink-muted	#6e6253	#74644f
--color-rule	#181410	#3a2e22
--color-rule-soft	#c9b58c	#2a221d
--color-accent	#9a1e2c (sealing-wax burgundy)	#d86268 (halbton rose)
--color-accent-soft	#c84858	#8a2a32
--color-on-accent	#f5efe4	#0f0c0a

The dark accent is the "Halbton" step chosen from the design session — midway between the original loud #e84a5e and the subdued #c87a7a. The dark Submit-CTA "Bordeau block" uses surface-alt #241c17 with cream ink foreground.

Typography

Role	Font	Usage
font-display	Cormorant Garamond	Headlines, section titles, drop-caps
font-serif	EB Garamond	Body text, nav links, buttons, table content
font-sans	Inter	Reserved; currently unused in UI — available for UI forms if needed
font-mono	JetBrains Mono	CAPS labels, tags, mono counters

All fonts self-hosted under web/static/fonts/. Variable fonts covering the declared weight ranges.

Type scale (derived from design files)

Use	Size	Weight	Font
Display hero	76–88px	500	display
Display large	56px	500	display
Display medium	44px	500	display
Display small	24px	400–500	display
Lead / intro	22px italic	400	serif
Body large	19px	400	serif
Body	16px	400	serif
Body small	15px	400	serif
UI text	14px	400	serif
Caption	13px	400	serif
Mono caps large	11px	400	mono + uppercase + tracking 0.18em
Mono caps	10px	400	mono + uppercase + tracking 0.12–0.15em
Mono caps small	9px	400	mono + uppercase + tracking 0.1em

Atoms

Source files: web/src/lib/components/atoms/

MarktvogtMark

The shield-M logo. Props: size (default 32). Uses currentColor — inherits from parent element color.

<MarktvogtMark size={36} />

The SVG source lives at web/src/lib/assets/marktvogt-logo.svg.

Caps

Mono uppercase label. Props: size (px, default 11), color (CSS value, defaults to ink-muted).

<Caps size={10}>Hessen · Nr. 015</Caps>

Tag

Pill/badge. Props: accent (boolean, default false). Accent variant: bg + border in accent color, on-accent foreground.

<Tag accent>Empfohlen</Tag>
<Tag>Burg</Tag>

Rule

Section divider. Props: kind: 'thin' | 'double' | 'ornament' (default 'thin').

<Rule kind="ornament" />
<!-- ─────── ✦ ─────── -->
<Rule kind="double" />
<!-- thin + thin gap -->
<Rule />
<!-- single rule-soft border -->

Heraldry

Procedural heraldic SVG by string seed. Used as market card hero fallback when no real photo is available. Props: seed (string), palette ({ a, b, bg, fg }).

<Heraldry seed={market.slug} />

8 deterministic variants: Stripes, Checky, Chevron, Banner, Tower, Cross, Saltire, Fleury.

Decoration vocabulary

Allowed:

• ✦ ornament glyph — ornament Rule, section transitions
• Drop-cap — first character of lead paragraph, 40–56px Cormorant Garamond, accent color
• Double rule — between major page sections
• Section headers: mono-caps label + thin rule below
• Breadcrumb line: mono-caps "Verzeichnis · Region · Nr. XXX"

Forbidden:

• Gold underline on headings (the old h1::after accent-400 stripe — removed)
• Color-coded semantic Alert variants (info/success/warning/error with distinct hues) — use surface-alt + border-rule-soft for neutral blocks, border-accent for errors only
• Rounded corners (rounded-*) on content elements — squares only; rounded-sm allowed on focus rings only
• Badge pills with backgrounds other than accent (the full surface-alt + rule-soft pair only)

Dark mode

Dark mode applies via .dark class on <html> (set by lib/theme.ts, user-controlled via ThemeToggle). Three states: light / dark / system.

The dark "Bordeau block" pattern (used in Submit-CTA, strong CTAs):

background: var(--color-surface-alt); /* #241c17 */
color: var(--color-ink); /* #f0e6d2 cream */
accent: var(--color-accent); /* #d86268 */

Voice & tone

Editorial-warm. "Hannes" is the editorial voice — a Kunstfigur (constructed character) representing the collective editorial team. The disclaimer appears under his signature:

✦ — Hannes, der Marktvogt · Hessen · Met-Brauer · Lagergänger seit 2003 eine Kunstfigur · die Redaktion arbeitet kollektiv

This is intentional and not removable. See chat1.md lines 860–895 for the design decision.

Open items (Phase 1 does not address)

• Photography pipeline — Lagerleben articles, camp profiles, real market photos
• OCR/AI program parsing — Submit-Flow optional upload step
• Real-time messaging — dashboard inboxes use REST for Phase 4b; WebSocket later
• Newsletter/Saisonbrief backend — Home form ships as non-functional in Phase 2

Phase roadmap

Phase	Branch	Status
1 · Design system	feat/burgund-redesign	In progress
2 · Public surfaces (Startseite, Verzeichnis, Detail, Kalender, Karte, Lagerleben)	feat/burgund-public	Planned
3 · Flows (Auth, Submit-Flow)	feat/burgund-flows	Planned
4a · Backend (roles, groups, applications, Lagerleben CMS)	feat/burgund-backend	Planned
4b · Dashboards (Veranstalter, Admin, Händler, Lager)	feat/burgund-dashboards	Planned