Borders define shape, grouping, and interaction. Theme aliases select approved global widths and radii so components can change expression without losing consistency.
Our border principles
ConsistencyKeep related controls in the same shape family. Repetition makes the interface predictable.Purposeful useUse rounded corners intentionally. Shape should support the task and the product’s tone.HierarchyLet component scale inform its shape. Preserve a clear relationship between controls and containers.
Border radius
Corner shape gives an interface a consistent voice. The source defines five categories: sharp, small, medium, large, and full. Select the category prescribed for the component; related components should share a coherent treatment.
Sharp 0px
Navigation and edge-to-edge artwork connect directly to their surroundings.
WorkspaceOverviewComponentsSettings
Side navigationA flush edge joins the application shell.Full-bleed imageAn edge-to-edge composition does not need rounded corners.
Small 4px
Small components use a subtle curve that preserves their recognizable shape.
New release
BadgeA small radius keeps a compact status readable.
CheckboxA square with a small curve remains easy to recognize.
Medium 8px
Everyday controls use a moderate curve without losing a clear input boundary.
Continue
ButtonMedium radius supports a friendly, clearly defined action.
Project nameDesign library
Text fieldPair the same radius with a visible boundary and persistent label.
Large 20px
Larger containers have more room for a generous curve. The V1 theme alias resolves to 20px.
A shared foundation
Build with confidence.
CardLarger radii belong to larger containers.
ComponentStatus
ButtonReady
Text fieldReady
Table containerClip the outside corners without changing internal cell structure.
Full 50% / 999px
Circles and pills suit icon actions, avatars, and compact filter chips.
Icon actionEqual width and height produce a circle.
All components
Filter chipA full radius produces a pill around a short label.
Border width
Width distinguishes ordinary boundaries from emphasis. The theme defines thin at 1px and medium at 2px. Focus is a separate state and must remain visible outside the component.
Secondary action
Thin · buttonA 1px outline separates the action from its surface.
Workspace nameLincoln Studios
Thin · text fieldA 1px boundary makes the editable region discoverable.
OverviewActivitySettings
Medium · active tabA 2px indicator shows the current view alongside its label.
Keyboard focus
Medium · focusAn emphasized boundary pairs with a distinct focus indicator.