LAYOUT / COMPONENTS
Box
Create a predictable content surface.
About box
Use token spacing to group related content. Choose meaningful HTML around the box when the content needs landmarks.
Anatomy
Shared parts, named consistently.
Space creates a clear boundary around related ideas.
- 1Container
Defines the component boundary, grouping, and visual hierarchy.
- 2Padding
Creates structure and rhythm without adding unnecessary focus stops.
- 3Content
Content or structure that supports the component’s purpose and reading order.
Try the default
A working example with the shared V1 visual language.
Space creates a clear boundary around related ideas.
When to use
Use token spacing to group related content. Choose meaningful HTML around the box when the content needs landmarks.
The container is not a keyboard stop; its children preserve their own semantics.