Commons are small CSS contracts used directly or composed by the
Official components. They require
@presets "standard,official"; in these examples. Standard
supplies utilities, scales, and role colors. Commons do not supply application
state or event handlers, and Official does not install a separate color theme.
| Guide | What it covers |
|---|---|
| Accessibility | Visible and visually hidden content, keyboard focus outlines |
| Background patterns | Decorative grids, lines, dots, and grain |
| Chevron | Four decorative CSS arrows |
| Content | Shrinking, wrapping, and inline bounds for content |
| Control | Shared control, field, checkable, disabled, and pressed structures |
| Layout | Stacks, centering, filling, and contained scrolling |
| Media | Cover, contain, and fluid image geometry |
| Overlay | Viewport bounds and padded content for floating surfaces |
| Reset | Local element resets while preserving native semantics |
| Skeleton | Decorative loading placeholders |
| Surface | Shared radius, border width, and elevation |
| Transition | Motion-safe transition fragments |
| Typography | Coordinated type metrics and text wrapping |
Use a Common when its full contract fits the element. Compose a named component when its parts have meaning together. Use a plain Standard utility for one-off styling. The Storybook Commons gallery shows the thirteen families side by side.