Panel | Glaze design system

Padding

When to use it

Use: A short list of rows on the page, such as API keys or members, with no header of its own.
Use: A second panel in one Card shell: the prompt above its output.
Use: A few read-only facts beside a form.
Not for: The group has a title, a description or a footer. Use Card.
Not for: Rows with media, meta and actions. Use Item.
Not for: Code or output. Use Code block.

6 rules

Never: Put a Panel inside a Card's panel or inside another Panel. Because a box in a box stacks two faint edges, and nobody can tell which group a line closes.
Must: Set padding="none" on a Panel that holds rows, and give each row rule-row and px-3. Because padding inside the edge leaves the rules floating short of it, and rule-row drops the last rule where the edge closes the list.
Must: Put two panels in one frame as direct children of Card, never in a hand-drawn shell. Because Card keeps them 3px apart and 3px from the shell, so the corners stay concentric.
Never: Fill a Panel with glass, a tint or a shadow. Because the panel is the quiet paper every row and value sits on, and glass marks only what is pressed.
Must: Give a Panel of rows role="list" and each row role="listitem", or render a ul and li inside it. Because a plain div of rows is read as one run of text, with no count and no way to jump between them.
Should: Keep a Panel to about eight rows; past that, use a table with its own scroll and filter. Because a panel never scrolls inside, so a long list pushes the page.

3 checks

: Panel is a plain div; give a list of rows role="list" and a label, or a ul inside.
: Text on it uses text-1 and text-2, 11.9:1 and 5.5:1 on paper.
: Forced colours draw the edge as CanvasText.

4 edge cases

One row: rule-row drops the only rule; the panel's edge closes it.
Rows taller than 36px: They grow; the rule stays at the bottom of each.
Narrow at 390: The panel fills its column; hide a row's meta before its name truncates.
Dark theme: Paper turns a step lighter than the page and the edge stays faint.

1 prop

7 tokens