Shape

Shape defines how corners, edges and overall forms appear across the interface. Consistent shape usage helps elements feel related, intentional and easy to recognize. When applied thoughtfully, shape contributes to a calm, modern and well‑crafted experience—without calling attention to itself.

Shape is token‑driven, using Bolt's radius token and standard stroke width tokens. Shape choices follow a simple principle: interactive elements receive rounded corners; non-interactive containers do not.

---

Consistent corner radii, stroke weights and form relationships help interfaces feel predictable, balanced and trustworthy.

Shape should support clarity and usability, not decoration. Small inconsistencies in shape can make interfaces feel awkward or unfinished—even when users can't articulate why. Well-designed shape choices reduce friction and reinforce confidence throughout the experience.

---

Bolt's shape system ensures consistency and visual harmony through strict standards:

• All corner radii must use the system radius token—no custom or ad-hoc values
• Interactive elements (buttons, tiles, inputs) receive rounded corners
• Pill shapes (fully rounded ends) are used exclusively for chips—not for other interactive elements
• Non-interactive containers (cards with multiple internal interactive elements) do not receive rounded corners
• Internal interactive elements within non-interactive containers get rounded corners
• Stroke widths use system tokens (default borders vs focus states and emphasis)
• Shape relationships must remain consistent across components, surfaces and patterns

Example: A Tile (entirely clickable) has rounded corners. A Card (containing multiple clickable items) does not have rounded corners, but the buttons or links inside the Card do.

---

Humans perceive shapes visually, not mathematically. While Bolt uses a single radius token, identical radius values may appear uneven due to nesting, contrast or proximity. Shape decisions prioritize visual balance over numeric precision.

• Favor optical roundness: shapes should look correct in context, not be strictly mathematical
• Visual correction may be required to maintain perceived consistency
• Shapes should feel visually consistent even when technical implementation varies slightly
• Account for the padding between nested elements when determining inner radius
• Adjust inner elements optically when density, contrast or content makes corners feel tight
• Maintain consistent shape relationships across buttons, cards, inputs, icons and containers

Nested elements must reduce inner curvature to avoid tight, pinched or awkward corners. When a rounded element contains another rounded element, the inner radius must be smaller than the outer radius to maintain visual balance.

See also: Space principles for guidance on padding values that affect nested element relationships.

---

• Ensure shapes preserve clarity, focus and usability across all contexts
• Avoid rounding that reduces contrast or blurs element edges

---

Consistent shape creates visual cohesion and polish that builds user confidence.

By using a unified radius token and clear rules for when to apply rounding, Bolt ensures interactive elements feel predictable and intentional. Well-designed shape choices make interfaces feel modern and well-crafted without drawing attention to themselves. Inconsistent or arbitrary shape usage can make interfaces feel unfinished or unprofessional.

Simple rule of thumb: If you're unsure whether an element should have rounded corners, ask: is it interactive on its own or does it contain multiple interactive elements?