Radii

Last Updated: Jan 12, 2065

Ink's radius scale defines curvature levels across surfaces — from flat structural elements to fully rounded, high-emphasis components. Use these tokens to maintain consistency across densities and themes.

Figma Library↗

Usage

Shape	Token Name	Usage
0	Flat	Static, non-interactive elements like banners and titles. Shouldn't be applied to elements that will always remain 0 (reset).
4	Subtle	Low-emphasis UI elements such as input fields and dropdowns.
8	Default	Standard for most interactive elements – buttons, cards, flyouts, and modals.
24	Max	Large rounded corner available, but not fully circular.
64	Round	High-emphasis or key interactive elements like CTA buttons on the marketing site.

Examples

Best Practices

Use radius tokens rather than fixed pixel values.
Keep consistent curvature across grouped components.
Align nested radii visually (e.g., card + image corner alignment).

Don't

Mix unrelated radii within the same visual grouping.
Force radius-full on rectangular components.
Override radius tokens inline or by manual CSS.

Accessibility

Touch & Target Size

Rounded corners should not reduce interactive surface area.
Minimum interactive target: 44x44 px.
Ensure that curved edges don't visually shrink tap or click zones.

Q&A

Q. Why use tokenized radii instead of manual values?

A. Tokens enforce visual consistency across components, frameworks, and densities. Manual values lead to drift and visual inconsistency.

Q. What's Ink's default radius?

A. 8px is the default for most interactive elements — buttons, cards, dropdowns.

Q. Can I override radii for my product area?

A. Use token overrides only, not raw CSS values. Overrides must map back to Ink’s token system.

Radii

On This Page