Panel

The radius-16 zone surface — neutral and soft variants for feature blocks and settings sections, and the signature halftone accent panel.

stable

Overview

The Panel is the zone surface: --radius-panel (16) for feature blocks, settings sections, and the brand’s statement moments.

import { Panel } from "@cronwerk/ui";

Three variants: accent (default) is the signature halftone orange panel — CSS-only halftone dots plus the sun glow, orange in both themes. neutral is a plain --card surface on a hairline; soft separates by the --accent-soft tint alone. When in doubt, the surfaces usage guide has the decision tree and the halftone restraint rule.

Examples

Halftone + sun glow

Accent (default) — halftone + sun glow source

<Panel>
<h2>Halftone + sun glow</h2>
</Panel>

Settings section

Nested card on the neutral panel.

Neutral — zone surface, cards nest on it source

<Panel variant="neutral">
<h3>Settings section</h3>
<Card>Nested card on the neutral panel.</Card>
</Panel>

Feature block

Warm emphasis without the full halftone panel.

Soft — the --accent-soft tint source

<Panel variant="soft">
<h3>Feature block</h3>
<p>Warm emphasis without the full halftone panel.</p>
</Panel>

Props

Generated from the component’s TypeScript types — never hand-written.

Prop	Type	Default	Description
variant	`"accent" \| "neutral" \| "soft"`	`accent`	Panel surface.

Usage

Do

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

Don't

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

Do

Use neutral for settings sections and let cards nest on it.

Don't

Don’t nest a panel inside a card — panels are zones, cards are units.

Accessibility

Panels are plain containers. On the accent variant, headings flip to --on-accent and focus rings flip to white automatically; keep text on the orange at display sizes (white on --accent is ~3.1:1). The neutral and soft variants keep ink text and theme-switch via tokens.