Layout

Section

One page band — ground, container and vertical rhythm in a single element. Composes Surface rather than sitting beside it, so a template never has to remember a wrapper order that breaks the tone capture silently when reversed. Four rhythm steps and four widths, all named rather than numeric, so templates cannot drift into different vertical rhythms.

Props

Prop	Type	Default	Description
as	ElementType	—	Render as a different element — `section`, `footer`, `aside`. Default: `'div'`. A dark band is usually a landmark, so reach for the semantic tag.
atmosphere	boolean \| SectionAtmosphere	—	Atmospheric background — two offset radial washes, which is what reads as light rather than as a band. `true` uses the defaults; an object tunes the roles and the anchor.
colorScheme	enum	—	Overrides the `color-scheme` a non-`default` tone declares. `color-scheme` is the one thing tokens cannot express: it drives the parts of a form control the page does not own — the caret, the `<select>` arrow, scrollbars, autofill — and CSS has no way to ask "is this ground dark?". `inverted` and the brand tones therefore declare `dark`, which is right for `inverted` always and for a brand role whose fill is saturated and whose `contrast` is white (the overwhelmingly common case, and the DS default for `primary` and `secondary`). A brand that authors a pale fill — the default `warning` role is `#f59e0b` on `#111827` ink, and a theme is free to make `primary` look like that — needs `colorScheme="light"` here, or an `<Input>` in the band gets a white caret on a yellow field. Set it when the tone's ink is dark.
containerClassName	string	—	Extra classes for the inner container, where `className` styles the outer ground.
rhythm	enum	—	Vertical rhythm. Defaults to `'default'`.
style	CSSProperties	—	Inline style. Merged last, so it wins.
sx	Sx	—	Theme-aware inline style object. Merged after the recipe's own style.
tone	enum	—	Ground for this band and everything in it — forwarded straight to `Surface`.
width	enum	—	Content width. Defaults to `'default'`.

Section

Props

Prop	Type	Default	Description
as	ElementType	—	Render as a different element — `section`, `footer`, `aside`. Default: `'div'`. A dark band is usually a landmark, so reach for the semantic tag.
atmosphere	boolean \| SectionAtmosphere	—	Atmospheric background — two offset radial washes, which is what reads as light rather than as a band. `true` uses the defaults; an object tunes the roles and the anchor.
colorScheme	enum	—	Overrides the `color-scheme` a non-`default` tone declares. `color-scheme` is the one thing tokens cannot express: it drives the parts of a form control the page does not own — the caret, the `<select>` arrow, scrollbars, autofill — and CSS has no way to ask "is this ground dark?". `inverted` and the brand tones therefore declare `dark`, which is right for `inverted` always and for a brand role whose fill is saturated and whose `contrast` is white (the overwhelmingly common case, and the DS default for `primary` and `secondary`). A brand that authors a pale fill — the default `warning` role is `#f59e0b` on `#111827` ink, and a theme is free to make `primary` look like that — needs `colorScheme="light"` here, or an `<Input>` in the band gets a white caret on a yellow field. Set it when the tone's ink is dark.
containerClassName	string	—	Extra classes for the inner container, where `className` styles the outer ground.
rhythm	enum	—	Vertical rhythm. Defaults to `'default'`.
style	CSSProperties	—	Inline style. Merged last, so it wins.
sx	Sx	—	Theme-aware inline style object. Merged after the recipe's own style.
tone	enum	—	Ground for this band and everything in it — forwarded straight to `Surface`.
width	enum	—	Content width. Defaults to `'default'`.