Design
Language

German construction runs on documents that have to be exactly right. This system's job is to make BauLynq look like the software that gets them right.

The numbers are the product

A Leistungsverzeichnis is thousands of rows of money. Tabular figures, right alignment, mono, 1.234.567,89 €, hairline row separators, no vertical rules — all of it exists so those rows can be scanned and trusted at a glance.

The mark is a B — two interlocking links on a 320 × 320 square. It stands alone, on no tile. There is no lockup.

The mark — this is the logo

One file, filled with currentColor: near-black #16181A on a light surface, paper #F7F7F5 on a dark one. Set the colour once on a parent and both themes are correct. Minimum 20 px — below that the counters close up. Clear space is half the mark's width.

The badge — only where the background is not yours

The mark reversed inside a rounded square: corner radius 23.5 % of the side, mark inset 22 % so it fills 56 % of the tile. It exists for the three places the surface behind the logo cannot be controlled — favicons and app icons, avatars, and placement over photography. Anywhere else, use the bare mark. Minimum 18 px.

The name

Ordinary typography. Nothing constrains its weight any more, so it is properly bold.

Placement — opposite ends

The mark anchors one end of a bar or surface. The name sits at the far end, or on a different edge entirely. Minimum separation is 8 × the mark's width. Where the far end is already occupied — a CTA, a toolbar — the name moves to the next uncluttered anchor, usually the footer. It does not move next to the mark.

Rules

Two families. Plus Jakarta Sans carries the voice; Geist Mono carries every number, code and label. Both SIL OFL — free to use, embed and ship.

Why Plus Jakarta Sans

Nineteen open-source families were measured against the mark's geometry. It wins on the two things that bond type to a monoline mark:

The scale

German typesetting

Eight ramps, stepped in OKLCH so lightness moves evenly to the eye. Rot and Beton do almost all the work.

Semantic tokens

Never reference a ramp step in a component — reference the semantic token, and both themes take care of themselves. Contrast is measured against each theme's page canvas.

Status

Status colour never travels alone — it carries the German word, and usually a dot. A red row means nothing to a colour-blind Bauleiter without Überfällig beside it.

Charts answer „wo stehen wir?". The palette was not picked — it was optimised, then validated against colour-blindness simulation.

Categorical — fixed order, never cycled

In practice

Sequential and diverging

Marks

One 4 pt unit, a 1200 px content maximum, and hairlines instead of boxes.

Rules, not boxes

Sections are separated by a 1 px --bl-line rule and space — never a 2 px border, never a shadow. Elevation's three steps are reserved for things that genuinely float: menus, dialogs, the product mock, a toast.

A small kit. If something is not here, build it from the tokens rather than inventing a value.

Motion confirms an action. It never announces one.

Everything is gated by prefers-reduced-motion, and pointer effects additionally by pointer: fine. Nothing moves more than 24 px. Nothing bounces.

German, direct, technically literate — the way a good Bauleiter writes. Short sentences, exact nouns, no adjective doing a number's job.

Naming

BauLynq — one word, camel case, capital B and L, everywhere. Modules are BidX, InrX, ReportsX, FleetX, CrewX — capital X, no space, no hyphen.

Word, PowerPoint and Excel templates ship with this system, all in German, all built from the same tokens.

Every artefact in the system. Regenerated whenever the tokens change.

Everything

This document

Logo

System

Using the tokens

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

.card {
  background: var(--bl-surface);
  border: 1px solid var(--bl-line);
  border-radius: var(--bl-r-lg);
  color: var(--bl-ink);
}
.card .value {
  font: var(--bl-w-semibold) var(--bl-fs-data)/var(--bl-lh-data) var(--bl-mono);
  font-variant-numeric: tabular-nums;
}

Regenerate the CSS from the JSON rather than editing it. Change a value in one place and everything downstream follows.