Radius
Four border radius tokens covering the full range of UI shapes — from tight form elements to fully rounded pill badges. Consistent corner radii create a cohesive visual language across the system.
Orbit uses a deliberate four-step radius scale. Each step corresponds to a distinct UI context — using the right token for the right component ensures that related elements feel visually consistent, and that the system's corner language reads coherently across Open Point and Social Point.
Token names follow the pattern --op-radius-[size]. Always reference these
tokens rather than hard-coding pixel values — if the radius scale changes, every component
that uses the token updates automatically.
Semantic radius tokens
Semantic radius tokens map a primitive radius step to an intended role — a shared size
(sm/md/lg) or a specific component. Use these over
primitive tokens directly wherever a component role applies; they carry intent and stay in
sync if the underlying radius step changes.
--orbit-radius-interactive radius.radius-md 4px --orbit-radius-container radius.radius-lg 8px --orbit-radius-surface radius.radius-md 4px --orbit-radius-overlay radius.radius-xl 12px --orbit-radius-pill radius.radius-full 9999px --orbit-radius-chip radius.radius-sm 2px Token Reference
| Token | Value | Typical use |
|---|---|---|
--op-radius-sm | 4px | Inputs, textareas, inline code, checkboxes, radio buttons, tags, table cells with borders |
--op-radius-md | 8px | Buttons, cards, dropdowns, modals, drawers, alerts, callout boxes |
--op-radius-lg | 12px | Large panels, full-screen overlays, search modals, image containers, feature cards |
--op-radius-pill | 999px | Status badges, count chips, toggle switches, avatar circles, progress bars |
Usage guidelines
Match radius to component size and role
Smaller components that sit inline with content (tags, badges, inputs) use
--op-radius-sm. Mid-sized interactive components (buttons, cards, dropdowns)
use --op-radius-md. Large overlay containers (modals, panels) use
--op-radius-lg. Elements that should always appear circular regardless of
size use --op-radius-pill.
Don't mix radius values within a single component
All four corners of a component should use the same radius unless there is a specific
structural reason to do otherwise — for example, a dropdown that attaches flush to its
trigger button may use 0 on its top corners and --op-radius-md on its
bottom corners. These exceptions should be intentional, not incidental.
Nested components
When a smaller element is placed inside a larger one, the inner element's radius should
be reduced. A badge inside a card with --op-radius-md should use
--op-radius-sm — not --op-radius-md again. Matching the outer
radius on inner elements makes them feel detached rather than contained.
Don't use border-radius: 0 for effect
Removing radius entirely creates a hard, institutional feel that conflicts with the system's visual language. If a component needs to feel less prominent, reduce its visual weight through colour or size — not by removing its corner radius.
Do
Use --op-radius-pill for status badges and count indicators. Their circular shape is a deliberate signal that they're passive labels, not interactive buttons.
Don't
Use --op-radius-pill on large block elements like cards or modals. Heavily rounded rectangles at large sizes look unfinished and feel unrelated to the rest of the UI.
Do
Apply --op-radius-sm consistently across all form inputs (text, select, textarea, date). Uniform corners signal that these controls belong to the same system.
Don't
Mix --op-radius-sm and --op-radius-md on inputs in the same form. Inconsistent corner radii make a form feel like it was assembled from unrelated components.
Was this page helpful?