Grundform

Principles

• Shape carries meaning. Circle, square and triangle are the icon and status vocabulary. A circle is a state or a person, a square is a thing or a place, a triangle is a signal or a warning. Colour reinforces shape; it never substitutes for it.
• Black rules, not shadows. Structure is drawn with 2px black (or paper-coloured in dark mode) lines. Elevation is expressed by surface tone, never by drop shadow or blur.
• Rectangles stay rectangular. Only elements derived from the circle — avatars, FABs, toggles, pills — are rounded, and then fully. There is no in-between radius on containers.
• Paper, not white. The light canvas is warm paper; pure white is reserved for raised surfaces so cards read as sheets laid on the page.
• One loud thing per screen. Primaries are saturated and rare. A screen carries one primary-coloured block or one accent action, not both.
• Blue acts, red alerts. Blue is the action colour; red is reserved for emphasis, destructive actions and errors; yellow warns and highlights. Green sits outside the Bauhaus trio and is admitted only for success states.

Colour

Core hues

Screen-calibrated from the poster reds, blues and yellows in the references. The deep variants are for pressed states and for text on tinted backgrounds.

Theme roles

Dark-mode primaries are lifted two steps so they hold contrast against black; text-on-colour flips to black accordingly. Both columns pass WCAG AA for body text on their canvas and on-colour pairs.

Data visualisation

Categorical series use the three primaries first, then the extended hues from the interior reference (orange, cyan) and black/paper. Sequential scales are single-hue steps of one primary, as in the concentric red poster. Never mix the extended hues into UI chrome.

Typography

One family, Jost — a geometric sans in the Futura lineage that the Bauhaus workshops used. Fallback stack: Futura, Century Gothic, Avenir, then system sans. Weight and size do the work; there are no italics in the system and no all-caps labels. Display sizes use tight tracking; body text is set loose enough to read on a small screen at arm's length.

Shape and spacing

Rules: 2px in ink colour for structural borders (cards, tabs, nav). 1px hairline for row dividers inside a container. No shadows.

Spacing: a 4pt base scale — 4, 8, 12, 16, 24, 32, 48, 64. Screen gutters are 16; card padding is 16; section gaps are 24. Touch targets are 48pt minimum, buttons 48 tall.

Iconography: build icons from the three primitives on a 24pt grid with 2pt strokes and flat ends. Filled shapes for selected state, outlined for unselected. Status glyphs follow the shape vocabulary: circle for success or presence, square for a stopped or neutral item, triangle for a warning.

Components in both themes

The same screen rendered against each token set. The circle-and-square FAB, black-rule tabs and paper-on-black inversion are the recognisable moves; everything else stays quiet.

Component notes

• Buttons. Square-cornered, 48pt tall, 2px border in ink. Primary fills with blue; destructive fills with red; secondary is outline only. The pill variant is for filter and chip-like actions, never for the main call to action.
• Tabs. Text on a 2px black rule; the active tab carries a 4px blue underline inside the rule. No pill or segmented tabs at the top of a screen.
• Cards. White (or #1B1B1B) sheets with a 2px rule. One card per screen may be a colour block; that card is the screen's single loud element.
• Lists. Rows inside a ruled container, divided by hairlines. Leading glyph is a filled primitive coloured by category.
• Alerts. Full-width ruled bar; a glyph in the shape vocabulary leads the message. Warning inverts to yellow with black text; errors and successes keep the surface colour and colour only the glyph.
• FAB. Red circle, 56pt, bottom right. It is the only red fill on a default screen.
• Focus. 3px yellow outline with 2px offset, in both themes.