Radius

Soften and group elements by using rounded corners.

Name	Size	Example
`.rounded-none`	`0px0px`
`.rounded-sm`	`0.125rem2px`
`.rounded`	`0.25rem4px`
`.rounded-md`	`0.375rem6px`
`.rounded-lg`	`0.5rem8px`
`.rounded-xl`	`0.75rem12px`
`.rounded-2xl`	`1rem16px`
`.rounded-3xl`	`1.5rem24px`
`.rounded-4xl`	`2rem32px`
`.rounded-full`	`9999px9999px`

Usage in Figma

Radius tokens are published from Stylus Design System and should be available by default in the Scribe workspace. Select the hexagon icon in applicable fields to apply radius tokens.

Usage in code

Sizing for rounded corners is inherited from Tailwind. Although components in Stylus will already come with a border radius pre-defined, this scale can be used to create new components.

<Component className="rounded-none" /> // No radius
<Component className="rounded" />      // Default (4px) radius
<Component className="rounded-md" />   // Medium (6px) radius
<Component className="rounded-lg" />   // Large (8px) radius