Cronwerk UI

Surfaces

When to reach for plain canvas, Card, Panel, or the halftone accent panel — a decision tree, density rules, and the halftone restraint rule.

stable

The decision tree

Cronwerk has exactly four surface levels. Work down this list and stop at the first match:

  1. Plain canvas (--canvas) — the default. Body copy, headings, and flowing content need no surface at all. If you are not grouping anything, do not wrap anything.
  2. Card — one unit of content: an offer, a catalog entry, a pricing tier, a settings row group. Off-white --card fill on a 1px --hairline, --radius-card (12). Cards sit in grids and lists.
  3. Panel (neutral / soft) — one zone of the page: a feature block, a settings section, a form region. --radius-panel (16), roomier padding. neutral is a hairline surface; soft separates by the --accent-soft tint alone. Cards nest on panels — never the other way around.
  4. Panel accent — the halftone panel — the signature orange surface with halftone dots and the sun glow. It is a statement, not a container: hero, final CTA, or the one editorial moment a page earns.

The levels, rendered

Cron diagnostics

One unit of content on the off-white card surface.

Card — one unit of content source 
<Card>
<h3>Cron diagnostics</h3>
<p>One unit of content on the off-white card surface.</p>
</Card>

Settings

Nested card on the neutral panel.
Panel neutral — one zone, cards nest on it source 
<Panel variant="neutral">
<h3>Settings</h3>
<Card>Nested card on the neutral panel.</Card>
</Panel>

Feature block

Quiet warm emphasis without a border.

Panel soft — separation by warm tint alone source 
<Panel variant="soft">
<h3>Feature block</h3>
<p>Quiet warm emphasis without a border.</p>
</Panel>

Work that runs itself.

Panel accent — the halftone statement surface source 
<Panel>
<h2>Work that runs itself.</h2>
</Panel>

Density rules

  • Depth is hairlines, never shadows. A surface earns separation from its border or fill — --shadow is none across the language.
  • Two levels deep, maximum. Canvas → Panel → Card is the deepest legal stack. A card on a card, or a panel inside a card, is a smell: flatten it.
  • Don’t wrap singles. One card alone in a section usually means the card isn’t needed — put the content on the canvas.
  • Grids of cards use --space-2–--space-4 gaps (the bento rhythm); panels breathe with --space-8 padding and section rhythm between zones.
  • Dark theme comes free for canvas, Card, and neutral/soft Panel via tokens. The accent panel stays orange in both themes — that is a feature, not a bug.

The halftone restraint rule

Do

Give the hero the halftone panel, keep every section between it and the final CTA on canvas, cards, and neutral panels.

Don't

Don’t use the halftone panel as a section background, a card variant, or a callout — for warm emphasis inside the page, reach for Panel variant="soft".

Do

Inside the halftone panel, use display-size white text and the on-orange kit: Button solid-white / translucent, AnnounceChip, WerkChip, CronLines, Ticker.

Don't

Don’t place body-size muted text or accent-colored controls on the orange — white on --accent is ~3.1:1, display sizes only.