Paper, ink and one burgundy.

The studio

Decided with the owner on 2026-10-03. It borrows the drafting-table look of the KEHBIMVISION tools and keeps BauLynq's own colours. It covers the app at app.baulynq.com only — the marketing site and the promo films have their own identity (see Downloads).

Three colours, three jobs

The part most likely to be gotten wrong. Burgundy is the action and the place you are. Teal is where your attention is. Neutral ink is the value you picked. Ask of anything “selected”: is it a place (a page, a tab) or a value (a filter, a row)?

Place or value?

One table settles every “selected” in the product. The tab recipe lives in one file, components/tabStyles.ts (tabClass, DAISY_TAB_ACTIVE, SEGMENT_*), and the design guard allowlists the files that carry it. The burgundy token flips to the AA-lifted value in the dark family, so nothing hard-codes a hex.

One primary per view

A view has one filled burgundy button — the way to create the thing the view lists. An alternative route to the same result (an import next to “Neu”) is the flat outline.

Rules that do not bend

The mark — this is the logo

One shape, filled with currentColor: ink on paper, light ink on graphite. Set the colour once on a parent and both themes are right (BrandMark in components/Brand.tsx). Size it by height; the viewBox is 277.28 × 320. Minimum 20 px high — below that the counters close up. Clear space is half the mark's width on every side.

Rules

Surfaces — paper, sheet, hairline, ink

Three surfaces and one ink. The canvas is not white — which is why a page sheet needs only a 1 px edge. base-300 is the opaque warm hairline for the few dividers that must not be translucent; almost every edge is a rule token (Surfaces and rules).

The five themes

light is the default. material shares its paper (and has softer chart hues). dark is warm graphite. contrast is true black with white ink; dim is a muted slate. The dark family lifts burgundy to #E5726A (dim: #EE8880) so it clears AA as text on its sheet, and puts near-black ink on every bright fill. The selected rail row and tab read the token, so they lift with it. Flip the specimen below through all five — the page theme is the sun / moon in the bar.

Light's signal colours are pulled down in lightness so raw text-success, text-warning and text-error clear 4.5 : 1 on the sheet. The dark family uses brighter hues and near-black *-content on every fill (#0A0B0D; warning #150A00).

Two ink tiers — and no third

Tier 1 is the ink; tier 2 is the AA-safe quiet grey. Quietness comes from size and weight, never from more grey. In class names: text-base-content (or text-ink) and text-ink-2. Never an opacity grey below /70 on text; the legacy /40…/65 classes are remapped to tier 2 in the stylesheet so they stay legible.

Action and focus colours against the sheet: burgundy 8.6 : 1 (light) and 5.7 : 1 (dark); teal 5.8 : 1 (light) and 8.3 : 1 (dark). A selected rail row is burgundy on its own 10 % tint over the paper: 6.6 : 1 (light), 5.4 : 1 (dark), 5.6 : 1 (dim, #EE8880).

The status ring

Six tones, one meaning each (lib/tone.ts). A tone is a 3 px tick at the left of a row (--bl-tone-*) and, where a column reports it, a pill on the matching tint (--bl-tint-*). Beton is a marker colour only — legible as a 3 px bar, not as 12 px text — so printed text uses --bl-tone-beton-text. In the dark family tints are low-alpha mixes of the tone itself.

Dark tints: color-mix(in oklab, tone 16%, transparent) — beton mixes #9BA2AB at 12 %, ink mixes #F2F4F6 at 10 %. Dim lowers the rot tint to 12 % so error text on it stays 4.5 : 1. Neutral (beton, ink) means “not asked / not granted / a plain fact” — never merge it with a status.

Chart series

Six categorical slots, desaturated and distinct from the status colours so charts read as a separate data layer. Fixed order, never cycled — only neighbours touch. A status colour is never “series 4”; marks carry colour, label text wears ink. material has its own softer six (#57927D, #5F8EA9, #B1935A, #AF6B64, #8773A9, #6E8D7E); contrast and dim share one muted set (#8DB5A7, #92B2C5, #CAB68F, #C99A96, #ADA0C5, #9CB1A7).

Faces and weights

Geist (variable, Latin + Latin-extended, so äöüß and € are real glyphs) carries the voice and the figures. Geist Mono carries identifiers and nothing else (.bl-id; never font-mono). Both are self-hosted from /fonts — no third-party font request, which is also why the CSP can stay at font-src 'self'. Body text is set at letter-spacing: -0.005em with Geist's ss01 and cv11 alternates.

The scale

Tailwind's names are re-mapped, so text-sm is the UI body. Arbitrary sizes on the same scale are allowed: 11 / 12 / 13 / 14 / 15 / 18 / 22 / 24 px.

Figures and identifiers

The face is chosen by what a string is, not by whether it contains digits. Money and quantities are values and belong to the sentence around them: Geist, tabular-nums, no decimals in a list — cents only where a document reconciles (an invoice total, the Mengen grid). Identifiers are read character by character: Geist Mono, .bl-id.

The shell — canvas, rail, one sheet

The root is the paper canvas (--bl-surface = base-200). The rail sits on it: no fill, no right border. Beside the rail is one sheet (.bl-sheet: sheet colour, 1 px --bl-rule, 8 px radius, the sheet shadow, 6 px in from the canvas edge) that holds both the topbar, on a bottom hairline, and the scrolling page. The page frame inside it — PageSurface, DataTable — is flat: it draws no card of its own, and its sections divide with border-t. Below lg (1024 px) there is no rail and no margin: the sheet is the whole screen and a four-tab bottom nav takes over.

• Rail 208 px · 56 px collapsed
• Sheet 6 px from the canvas
• Topbar 48 px · 56 px below lg
• Page gutter --page-gutter 14 px · 0 below lg

Radii — 8, 6, 4

Pick by role, not by taste. rounded-xl and rounded-2xl are re-mapped to 8 px so a stray one cannot out-round the shell. rounded-full is for avatars, dots and count badges only; rounded-3xl (24 px) is the mobile bottom sheet's top edge only.

The rule tokens

Every edge is the ink (--color-base-content) mixed into transparent at a fixed strength, so one definition serves every theme. Reach for a token by its job — never restate the percentage at a call site. The line in each row is the token itself, drawn at 1 px.

Shadows — only for what floats

shadow-sm is the sheet lift: a hairline plus a barely-there drop. shadow-md … 2xl all resolve to the floating-menu shadow, reserved for menus, popovers and dialogs. The dark themes swap both for a 1 px edge, because shadow on near-black is invisible.

The backdrop behind a dialog, drawer or the palette is --bl-backdrop: 25 % ink with a 2 px blur on paper, and 55 % black in the dark themes (light ink would lift the page into a grey haze). Never bg-black/40.

Primitives — name the surface, never re-spell it

Controls and rows

btn-sm is the default button size: 32 px, 13 px type. A bare .input / .select — no size modifier — is 32 px too (only DaisyUI's --size moves, so an explicit h-10 on a touch-first form still wins), and table rows are 32 px. btn-xs (24 px, 12 px type) is for dense rows only; badges are 22 px (or 20 px compact).

Icons and gaps

Icons are lucide-react, imported directly: size-4 (16 px) at strokeWidth={1.75}. The rail's icons are 18 px at stroke 2; the empty-state tile's glyph is size-5. Gaps are 12–16 px; a dialog's header is px-5 py-3, its body px-5 py-4.

The four durations — try them

Press play: each dot travels the track on its own token. The reduced-motion guard lives at the token layer — one media query collapses all four to 1 ms — so anything written in these tokens is automatically safe. This page obeys it too.

The three easings

Easings say what the thing is doing: arriving decelerates, leaving accelerates, travelling settles long.

Rules

Layering — a fixed scale

Never invent z-[10000]-style values. Overlays sit above the chrome so their backdrop dims the rail and the topbar. z-10 / z-20 are local stacking inside a context (a sticky table head) and are not steps on this scale.

Tone

Naming

BauLynq — one word, capital B and L, everywhere. Module names end in a capital X (InrX) with no space or hyphen. The app is German-first: every string goes through i18n in both languages, and records keep their German names.

App tokens — Designsprache v3

Brand pack — logo, marketing colours, Office templates

Nothing here has been regenerated for v3.

Using the tokens

<link rel="stylesheet" href="/designlanguage/assets/tokens/baulynq-tokens.css">

<div data-theme="dark">…</div>   /* any element can carry a theme */

.sheet {
  background: var(--color-base-100);
  border: 1px solid var(--bl-rule);
  border-radius: var(--radius-box);
  box-shadow: var(--bl-shadow-sheet);
}
.figure {
  font-size: 22px; font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

In the app, use the Tailwind classes and primitives (bg-base-100, text-ink-2, bl-panel) rather than the raw variables; frontend/src/index.css is where the values change.