Design System: Kladde

Overview

Creative North Star: “The Engineer’s Kladde” — a Kladde is the German rough notebook an engineer keeps at the bench: dated, candid, drawn by hand, and trusted precisely because it is unpolished.

The site reads as a 30-year engineering journal laid out as a hand-drawn technical zine. Warmth and candor carry the authority: sharp hand lettering (Excalifont, the Excalidraw hand) over a cool paper-white ground with faint fiber grain, a hyperlegible humanist body face, and highlighter yellow/pink/teal swipes marking what matters. Panel borders wobble like marker strokes; the portrait is taped in with translucent tape; the AI-provenance disclosure is a drawn rubber stamp worn proudly, not fine print. There is no mascot — the portrait is the character.

The world explicitly refuses two defaults: the cream-serif “AI-editorial” look (the ground is cool white, never cream) and its terminal opposite (no tracked-out uppercase mono labels; mono is for code only). Dark mode is a night notebook: same drawn language, brightened accents, dark ink board.

Key Characteristics:

• Every structural line is drawn, not ruled: wavy SVG strokes, dashed borders, uneven sketch radii
• Highlighter blobs (rough-edged SVG fills) behind text, never flat CSS background rectangles
• Single-weight hand lettering for all display type; no bold synthesis ever
• Cool paper white with 6%-opacity fiber-grain noise; night-notebook dark mode
• AI provenance stamped as a brand feature (drawn colophon stamp, rotated -2°)

Colors

Two inks (teal and pink) and three highlighters on plain cool paper, brightening at night to hold contrast on the ink board. All pairings verified ≥ 4.5:1.

Primary

• Workshop Teal (#0F766E light / #2DD4BF dark): links, hover states on titles and nav, the teal doodle-num blob, marker underlines. The “trusted pen” of the notebook.

Secondary

• Stamp Pink (#BE185D light / #F472B6 dark): the colophon stamp, category labels on cards, the “this is me” doodle annotation, pink marker underlines. Annotation ink — used for asides and provenance, never for body emphasis.

Highlighters

• Highlighter Yellow (#FFE34D): the dominant swipe; also fills the primary marker button and active filter chips.
• Highlighter Pink (#FF6BAE) and Highlighter Teal (#00C7B7): sibling swipes for the topic triad and inline emphasis.
• Chip tints — softened highlighter washes for small metadata chips: yellow tint #FFF3B8 with yellow-900 text (dark mode: yellow-400/15 wash with yellow-200 text), pink tint #FFE0EE with pink-900 text.

Neutral

• Cool Paper (#FCFCF9): the page ground, with fiber grain overlaid at 6% opacity. Never cream, never warm beige.
• Sheet White (#FFFFFF): card and panel surfaces.
• Ink (#17181A): the drawn-line color — sketch borders, wavy rules, button outlines, and the text color on every highlighter fill. Flips to #DEE1E0 in dark mode for lines, but stays dark on highlighter fills.
• Body Text (#202225 light / #DEE1E0 dark) on Night Ground (#16181C) / Night Surface (#1E2126) in dark mode.
• Chip Text (#404040 light / #D4D4D4 dark): the neutral-ramp text of inactive filter chips (neutral-700 / neutral-300).
• Cool neutrals throughout: every gray-* utility resolves to Tailwind neutral (no blue- or warm-tinted grays).

Named Rules

The Ink-on-Highlighter Rule. Text sitting on a highlighter fill (#FFE34D, #FF6BAE, #00C7B7, active chips, marker buttons) is always dark ink (#17181A), in both light and dark mode. Highlighter fills never carry light text.

The Cool Paper Rule. The ground is cool paper white (#FCFCF9) with fiber grain — never cream, never warm beige, and never grid paper.

The Neutral-Ramp Rule. Secondary UI text (inactive chips, muted labels) draws from the cool neutral ramp (#404040 / #D4D4D4 and gray-600/gray-400 utilities), never from slate or warm grays.

Typography

Display Font: Excalifont (fallback: cursive) — vendored single-weight woff2, OFL-1.1 Body Font: Atkinson Hyperlegible Next (fallback: sans-serif) — via @fontsource Code Font: Fragment Mono (fallback: monospace) — via @fontsource Icon Font: Material Symbols Rounded — functional nav controls only (dropdown carets, mobile menu open/close, external-link markers); decorative glyph uses were removed and stay removed. Illustrative arrows and marks are hand-drawn inline SVG, never icon glyphs.

Character: Sharp technical hand lettering over a hyperlegible humanist body: the pairing of a person’s handwriting with text built to be read. Excalifont carries all headings, buttons, figcaptions, and drawn labels; Atkinson carries every paragraph.

Hierarchy

• Display (400, text-5xl → text-8xl / 3–6rem, leading 1.05): the masthead name only.
• Headline (400, text-3xl–4xl / 1.875–2.25rem): section headings, usually wrapped in a .marker-underline or .marker-underline-pink span.
• Title (400, text-2xl / 1.5rem, leading-snug): card headlines; TOC rows step down to text-xl.
• Wordmark (Excalifont 400, 1.3rem): the navbar brand “Jörn Dinkla.” with its Stamp Pink terminal period — a deliberate size between label and title, used only there.
• Body (400, text-base / 1rem, leading-relaxed): paragraphs; intro paragraphs step up to text-xl. Prose columns cap near max-w-2xl/max-w-3xl.
• Body Compact (400, 15px, leading-relaxed): card excerpt text on post cards (and their lazy-loaded JS twins) — deliberately half a step under body to keep three-line clamps tight.
• Label (Excalifont 400, text-sm / 0.875rem): buttons, “Read more” links, figcaptions, the stamp (text-xs). Sentence case, natural letter-spacing.
• Metadata (Atkinson 500, text-xs / 12px): dates, counts, chips. Never below 11px.

Named Rules

The Single-Weight Hand Rule. Excalifont ships one weight (400). Display elements never request bold or medium; faux-bold synthesis is banned. Emphasis in display type comes from highlighter swipes and marker underlines, not weight.

The Mono-for-Code Rule. Fragment Mono appears only in code. No tracked-out uppercase mono labels, no eyebrows, no kickers anywhere.

Layout

A single centered column, max-w-6xl with px-4 sm:px-6 lg:px-8 gutters, inside a py-12 lg:py-16 main region. Sections separate with generous vertical space (mb-16 lg:mb-24) and drawn dividers: .rule-t/.rule-b wavy ink strokes or 2px dashed borders (border-dashed border-gray-300, dark border-gray-700).

Post cards sit in a 1 → 2 column grid (md:grid-cols-2, gap-8 / 2rem); the sketched TOC uses a 1 → 2 column grid with wide gap-x-12. The intro splits 7/5 on a 12-column grid at lg, with the taped portrait rotated 1° in the narrow column. Standard Tailwind breakpoints (sm 640, md 768, lg 1024). The homepage hero staggers in with .reveal steps (0.08s increments); listing pages lazy-load past 10 posts via /api/*.json.

Elevation & Depth

Depth is drawn, not lit. Surfaces are flat panels with 2px ink borders; shadows appear only as a light pencil smudge responding to hover, paired with a -translate-y-0.5 lift on buttons and chips. The taped photo and dropdown panels carry the pencil shadow at rest to read as physical objects on the page.

Shadow Vocabulary

• Pencil (2px 3px 10px -2px rgba(23, 24, 26, 0.18), shadow-pencil): the system’s one expressive shadow — hover state for cards, buttons, chips; resting state for the taped photo and nav dropdowns.
• Soft (0 4px 20px -2px rgba(23, 24, 26, 0.05)) and Card (0 10px 30px -5px rgba(23, 24, 26, 0.05)): faint ambient washes, sparingly used.
• Tape (0 1px 3px rgba(23, 24, 26, 0.10)): under tape strips only.
• Lightbox (0 10px 40px rgba(0, 0, 0, 0.5)): utility-chrome exception — the full-screen lightbox image only, floating over the 92%-black overlay. Not part of the drawn world; never reuse on page surfaces.

Named Rules

The Pencil-on-Hover Rule. Panels are flat at rest. shadow-pencil plus a half-step lift is the hover response; no larger or colored shadows exist in this world.

The Already-Drawn Rule. Motion is a drawing gesture: the doodle arrow draws on via stroke-dashoffset (1.1s, cubic-bezier(0.22, 1, 0.36, 1)), hero elements reveal with a 14px rise. Under prefers-reduced-motion, every drawn element renders already drawn — complete, not hidden.

Shapes

The form language is a marker-drawn box, expressed as the sketch-radius family: 2px ink borders with asymmetric radius pairs built from 255px/225px against a 15px counter-corner — 255px 15px 225px 15px / 15px 225px 15px 255px for .sketch-border and .marker-btn, mirrored (15px 225px 15px 255px / 255px 15px 225px 15px) for .sketch-border-alt, and a tighter 12px counter-corner variant (255px 12px 225px 12px / 12px 225px 12px 255px) for .filter-chip — so straight CSS corners read as hand wobble. Rules are wavy SVG strokes; secondary dividers are dashed. Number badges are irregular teal ink-edged blobs (.doodle-num), not circles. Highlighter marks are rough-edged SVG blob fills painted behind text with box-decoration-break: clone so multi-line swipes stay ragged.

Conventional radii survive in quiet chrome, on the Tailwind scale: chips 0.25rem, rounded-lg 0.5rem on dropdowns and mobile menu items, and the configured rounded 0.75rem / xl 1rem / 2xl 1.5rem / 3xl 2rem steps for softly rounded containers. Two pre-existing utility-chrome exceptions sit outside the zine system and are permitted but never extended: the scrollbar thumb (20px radius) and the lightbox image (4px radius). Arrows and icons drawn as inline SVG use curved, hand-wavering paths (stroke-linecap="round"); functional UI glyphs (menu, dropdown carets, external-link) use Material Symbols Rounded.

Components

Buttons

• Character: a highlighter stroke inside a hand-inked box; tactile and cheerful.
• Shape: sketch-border radii, 2px solid ink #17181A outline (outline stays dark in both modes so the yellow fill keeps its edge).
• Primary (.marker-btn): highlighter-yellow fill, ink text, Excalifont text-sm, px-6 py-2.5.
• Secondary: surface-colored fill with the mirrored sketch-border-alt radii, same type and padding.
• Hover: shadow-pencil + -translate-y-0.5; disabled: 50% opacity.

Chips

• Tag chips: small rounded (0.25rem) yellow-tint washes — #FFF3B8 with yellow-900 text, dark mode yellow-400/15 with yellow-200 text — prefixed #, text-xs font-medium; hover deepens to full highlighter yellow.
• Filter chips (.filter-chip): drawn ink boxes (12px-counter sketch radii) on the surface color with neutral Chip Text (#404040 light / #D4D4D4 dark); .is-active presses to highlighter yellow with ink text in both modes; hover shows the pencil shadow.

Cards / Containers

• Corner style: .sketch-border wobble radii, 2px ink border.
• Background: Sheet White / Night Surface; image header divided by a 2px solid border.
• Shadow: flat at rest, pencil on hover (with a slow 105% image zoom).
• Internal padding: p-6 (1.5rem); footer row separated by a 2px dashed rule holding tag chips and an Excalifont “Read more” link with a hand-drawn SVG arrow. Excerpt text is Body Compact (15px).
• Sync constraint: the post-card markup exists twice — _includes/post.tailwind.html and the JS template in _includes/lazy-loading.html. Any card change must land in both.

Navigation

• Style: sticky translucent paper bar (rgba(252,252,249,0.9) / dark rgba(22,24,28,0.9), backdrop-blur) with a wavy .rule-b bottom edge; wordmark in Excalifont at 1.3rem with a Stamp Pink terminal period.
• Links: Atkinson text-sm font-medium; hover shows a wavy teal underline (decoration-wavy decoration-primary decoration-2); the active page carries a .marker-underline teal stroke.
• Dropdowns: sketch-language panels — 2px ink border, rounded-lg, pencil shadow; carets and menu toggles are Material Symbols Rounded glyphs; the active item sits on the yellow chip tint.
• Mobile: right slide-in panel (w-80) over a blurred scrim; keyboard-operable throughout, with a .marker-btn skip-to-content link as first focusable element.

Colophon Stamp (signature)

The AI-provenance disclosure (“This site is drawn with AI · checked by Jörn”) rendered as a hand-inked double-outline rubber stamp (.stamp): SVG stroke in Stamp Pink, rotated -2°, Excalifont text-xs. It is a brand feature displayed beneath the portrait, never shrunk into footer fine print.

Taped Photo (signature)

The portrait sits in a white-mat frame (2px ink border, pencil shadow, slight rotation) with two translucent yellow tape strips (.tape-tl/.tape-tr, rotated ±38°, dashed edges) across the corners, a hand-lettered two-part figcaption, and a Stamp Pink doodle arrow annotation drawn toward it.

Lightbox & Scrollbar (utility chrome)

Pre-existing utility chrome, deliberately outside the drawn world. Lightbox: 92%-black overlay (rgba(10, 11, 12, 0.92)), image at 4px radius with the Lightbox shadow, 0.3s ease fade — it stays neutral so photographs read unstyled; do not zine-ify it, and do not copy its radius or shadow onto page surfaces. Scrollbar: slim 8px thumb, 20px radius, neutral #D4D4D4 light / #525252 dark.

Do’s and Don’ts

Do:

• Do draw every structural line: wavy .rule-t/.rule-b strokes, 2px dashed dividers, sketch-border boxes — never plain solid hairline rules for section structure.
• Do keep dark ink (#17181A) text on every highlighter fill and yellow button, in both color modes.
• Do use the sketch-radius family (15px counter-corner for panels and buttons, 12px for chips) for anything meant to read as hand-drawn; quiet chrome uses the Tailwind radius scale.
• Do emphasize display type with .marker-underline / highlighter swipes; body emphasis uses Atkinson font-medium with text-primary.
• Do hold the accessibility floors: ≥ 4.5:1 contrast on all text pairings, metadata ≥ 11px, keyboard-operable navigation, reduced-motion renders drawn elements complete.
• Do show the AI-provenance stamp as a drawn brand mark wherever provenance is stated.
• Do update both post.tailwind.html and the lazy-loading.html JS template when touching post cards.

Don’t:

• Don’t use cream or warm-beige grounds, and don’t reintroduce a grid-paper background — the paper is plain cool white with fiber grain only.
• Don’t bold Excalifont (single weight; faux-bold synthesis is banned) or set it in medium/semibold.
• Don’t use Fragment Mono outside code, and never as tracked-out uppercase labels.
• Don’t add eyebrows or kickers above headings.
• Don’t use Material Symbols glyphs decoratively — they are functional nav controls only; illustrative marks are hand-drawn SVG.
• Don’t invent geometric badges or perfect circles for drawn elements — number badges are irregular .doodle-num blobs, arrows are hand-wavering SVG paths.
• Don’t add shadows beyond the pencil/soft/tape vocabulary (plus the lightbox-only exception), or apply pencil shadows at rest to flat panels.