Border Radius - CogniSync Design System

Radius (or radii) are the rounded corners in components, and other pieces of content. Consistent corner radius values provide visual harmony across components. This scale offers flexibility from sharp edges to fully rounded elements.

Tokens	Value	Typical Use Cases
Radius/0	0px	Sharp edges - dividers, layout lines
Radius/xs	2px	Subtle rounding for dense UI, input fields
Radius/sm	6px	Buttons (Figma), badges, segmented controls, compact surfaces
Radius/md	8px	Default for cards, modals, dropdowns
Radius/base	12px	Panels, navigation menus, containers
Radius/lg	16px	Feature blocks, hero UI components
Radius/xl	24px	Large banners, marketing visuals
Radius/2xl	32px	Full-rounded UI patterns, aesthetic containers
Radius/full	999px	Pills, avatars, circular badges (always use for round shapes)

Radius/0

0px

Sharp edges - dividers, layout lines

Radius/xs

2px

Subtle rounding for dense UI, input fields

Radius/sm

6px

Buttons (Figma), badges, segmented controls, compact surfaces

Radius/md

8px

Default for cards, modals, dropdowns

Radius/base

12px

Panels, navigation menus, containers

Radius/lg

16px

Feature blocks, hero UI components

Radius/xl

24px

Large banners, marketing visuals

Radius/2xl

32px

Full-rounded UI patterns, aesthetic containers

Radius/full

999px

Pills, avatars, circular badges (always use for round shapes)