Thinking in Cronwerk

The design language behind the components — light-first, hairlines over shadows, one orange accent, pills, and the halftone restraint rule.

stable

Orientation

Cronwerk is a small language with strong opinions. Learn the seven ideas below and the component APIs stop being a catalogue and start being obvious. The normative source is LIBRARY-SPEC.md (grounded in the landing app’s DESIGN.md v3); this page is the friendly tour.

1. Light-first, dark for free

Light is the brand default — not the system preference. A user opts into dark, the choice persists under one shared key, and it follows them across every Cronwerk property. You design for light; canvas, cards, and neutral panels get dark for free through tokens. Never hard-code a color that would break the flip.

2. Depth is hairlines, never shadows

--shadow is none across the whole language. Surfaces earn separation from a 1px hairline or a fill change, not elevation. If you reach for a drop shadow, you are speaking a different language.

Do

Separate a card from the canvas with its --hairline border and off-white --card fill.

Don't

Don’t add a box-shadow to “lift” a surface — it reads as foreign immediately.

3. One orange accent

There is exactly one accent — the Cronwerk orange (--accent) — and it stays orange in both themes. Use it with restraint: a single primary action, a link, a chip. When everything is accented, nothing is.

One primary action, secondary de-emphasised source

<Button variant="solid-accent">Save</Button>
<Button variant="outline">Cancel</Button>

4. Pills, not rounded rectangles

Buttons and chips are fully-rounded pills (--radius-chip: 9999px) — always. Cards and panels use the stepped radii (--radius-card, --radius-panel). The shape is part of the brand; a rounded-rectangle button is off-language.

Design system

Pills source

<Chip>Design system</Chip>
<Button size="nav">Nav</Button>

5. Four surfaces, two levels deep

There are exactly four surface levels — canvas, Card, neutral/soft Panel, and the halftone accent Panel — and you nest at most two deep (canvas → panel → card). The full decision tree lives in the Surfaces guide.

Settings

One unit of content.

A zone with a unit nested on it source

<Panel variant="neutral">
<h3>Settings</h3>
<Card>One unit of content.</Card>
</Panel>

6. The halftone restraint rule

The orange halftone panel — dots plus the sun glow — is the loudest note in the language. One per page, almost always the hero or the final CTA. It is a statement, not a container.

7. Real content, honest numbers

The language forbids invented metrics and placeholder lorem in shipped surfaces: English everywhere, real copy, real numbers. The decor (dot grids, rails, tickers, glows) is structural texture, not decoration for its own sake — every motif has a job.