Radius

01Overview

Nuton is soft by default: pill buttons, round avatars and generously rounded fields and menus. Radius is a scale of ten steps; a component picks one step per part, and nested parts step down so corners stay concentric.

<div style={{ borderRadius: 'var(--nu-radius-0)' }} />
<div style={{ borderRadius: 'var(--nu-radius-4)' }} />
<div style={{ borderRadius: 'var(--nu-radius-6)' }} />
<div style={{ borderRadius: 'var(--nu-radius-8)' }} />
<div style={{ borderRadius: 'var(--nu-radius-10)' }} />
<div style={{ borderRadius: 'var(--nu-radius-12)' }} />
<div style={{ borderRadius: 'var(--nu-radius-16)' }} />
<div style={{ borderRadius: 'var(--nu-radius-20)' }} />
<div style={{ borderRadius: 'var(--nu-radius-24)' }} />
<div style={{ borderRadius: 'var(--nu-radius-full)' }} />

• Pill and circle (radius-full): buttons, avatars, status dots, key icons. The default Button corner.
• Large (radius-16 to radius-24): floating containers and large fields: menus, the command menu, 48px inputs, status modals and marketing cards.
• Medium (radius-8 to radius-12): compact controls and items inside containers: small inputs, menu items, rounded buttons, textareas.
• Small (radius-4, radius-6): tiny parts: keyboard keys, checkbox indicators, the password reveal button.
• Square (radius-0): corners="sharp" on Button and Button group, and edges that meet another surface.

02Tokens

Every radius token, generated from @nuton/tokens. All ten are interim: design values waiting for a home in the Nuton Figma file.

03Usage

/* Load once: import '@nuton/tokens/tokens.css' */
.lesson-card {
  border-radius: var(--nu-radius-16);
}
.lesson-card__thumbnail {
  border-radius: var(--nu-radius-8); /* steps down inside the card */
}
.space-badge {
  border-radius: var(--nu-radius-full);
}

/* globals.css */
@import "tailwindcss";
@import "@nuton/tokens/tokens.css";
@import "@nuton/tokens/tailwind-v4-theme.css"; /* adds --radius-0 … --radius-24, --radius-full */

// Utilities: rounded-0 rounded-4 rounded-6 rounded-8 rounded-10 rounded-12
//            rounded-16 rounded-20 rounded-24 rounded-full
<article className="rounded-16 border border-stroke-soft-200">…</article>

// tailwind.config.js
module.exports = {
  presets: [require('@nuton/tokens/tailwind-v3-preset')], // extends theme.borderRadius
}

// Same keys: rounded-0 … rounded-24, rounded-full
<article className="rounded-16">…</article>

Both Tailwind outputs add Nuton's numeric keys next to Tailwind's own (rounded-lg and friends still exist). Use the numeric keys so every corner traces back to a token.

Choosing a radius

• Use the component's radius. Components already set theirs. Only reach for a token when you build a new surface.
• Nest by stepping down. An inner surface uses a smaller radius than its container, roughly the outer radius minus the padding between them: a menu at radius-16 holds items at radius-8.
• Scale with size. Taller controls take larger radii: a 48px input uses radius-16, a 36px one radius-8.
• One corner style per surface. Don't mix smooth, rounded and sharp buttons in one view.
• Pills use radius-full. Never 50% or a large hand-typed number.

Radius by component

Read from packages/ui/src/components/*/*.css. Two parts don't use a token yet: the checkbox indicator's inner mark (a fixed 2.6px, --nu-checkbox-inner-radius) and anything with a radius not on this scale.

04In use

Button corners

The corners prop on Button and Button group picks the radius. Smooth is the default and Nuton's look.

<Button corners="smooth">Start lesson</Button>   // radius-full
<Button corners="rounded">Start lesson</Button>  // radius-10
<Button corners="sharp">Start lesson</Button>    // radius-0

<ButtonGroup aria-label="Lesson view" size="sm" corners="smooth">…</ButtonGroup>  // radius-full
<ButtonGroup aria-label="Lesson view" size="sm" corners="rounded">…</ButtonGroup> // radius-8

Fields

Input radius follows its size: radius-16 at the default 48px, radius-8 at 36px. Textarea uses radius-12.

<Field label="Search lessons">
  <Input type="search" placeholder="Photosynthesis" leadingIcon={<RiSearchLine />} />   // radius-16
</Field>
<Field label="Space name">
  <Input size="sm" placeholder="Biology 101" />                                          // radius-8
</Field>
<Field label="Lesson summary">
  <Textarea rows={3} placeholder="What will learners take away?" />                     // radius-12
</Field>

Menus

Open the menu. The container uses radius-16 and its padding holds items at radius-8, so the hover fill sits concentric with the container's corner.

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button size="sm" appearance="stroke" trailingIcon={<RiArrowDownSLine />}>Lesson actions</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>                 {/* radius-16 */}
    <DropdownMenuLabel>Photosynthesis</DropdownMenuLabel>
    <DropdownMenuItem leading={<RiEditLine />}>Rename</DropdownMenuItem>   {/* radius-8 */}
    <DropdownMenuItem leading={<RiFileCopyLine />}>Duplicate</DropdownMenuItem>
    <DropdownMenuItem leading={<RiShareLine />}>Share with space</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem leading={<RiDeleteBinLine />}>Delete lesson</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Pills and circles

<Avatar name="Amara Okafor" color="purple" size={40} bottomStatus="online" bottomStatusLabel="Online" />
<Avatar name="Tunde Bello" color="sky" size={40} />
<ChartLegend color="blue">Completed lessons</ChartLegend>
<Kbd>⌘K</Kbd>   // radius-4: a key cap, not a pill

05Accessibility

You must: keep a non-shape cue for every state; check focus rings on new rounded surfaces aren't clipped by a parent with overflow: hidden.

06Guidelines and related

Do and don't

Related

• SpacingThe padding that sets how far nested radii step down.
• ElevationShadows that follow the radius of floating surfaces.
• ButtonSmooth, rounded and sharp corners.
• Inputs and fieldsRadius that scales with input size.
• Dropdown and selectNested container and item radii.
• AvatarCircles with radius-full.