Primitives overview
Text, identity marks and graphic controls with their own natural geometry.
Design thinking
A checkbox mark is not a text input and an avatar is not a button. Primitives retain geometry suited to recognition or typography while the row or action around them provides alignment and an adequate hit target.
Size and spacing
Typography or graphic geometry, not a universal control height. Use shared typography, icon and shape tokens. Inline links inherit surrounding text. Graphic size is independent of target size: containing rows follow the action recipe, while floating or mobile shell actions may use the shared 2.75rem touch minimum.
Interaction and motion
Preserve native checkbox, radio, switch and slider semantics, including keyboard control and visible focus. Loaders indicate real pending work; continuous spinners may be linear, while decorative shimmer stops for reduced motion.
Best practices
- Use a visible label for selection controls and associate it with the control so the label enlarges the usable target.
- Pair avatars with an accessible name; use the shared colored-circle and two-letter fallback instead of a one-off identity treatment.
- Keep ordinary text at least .6875rem reference and use the shared scale. Never reduce text size to fit a fixed container.
- Provide textual meaning for progress and meters. Decorative icons should be hidden from assistive technology rather than announced twice.