HelixTimelyCare Experience Design System
Light

Border Radius Tokens

[!TIP] For machine-parseable token values, see tokens.json.

Radius Scale

TokenCSS VariableValuePixelsUsage
none--border-radius/rounded-none00pxNo rounding
sm--border-radius/rounded-sm0.375rem6pxSubtle rounding (inline code)
DEFAULT--border-radius/rounded0.5rem8pxDefault rounding
md--border-radius/rounded-md0.5rem8pxMedium rounding (filled icons, inputs)
lg--border-radius/rounded-lg0.625rem10pxLarge rounding (cards, modals)
xl--border-radius/rounded-xl0.875rem14pxExtra large rounding (containers)
2xl--border-radius/rounded-2xl1rem16px2X large rounding
3xl--border-radius/rounded-3xl1.5rem24px3X large rounding
full--border-radius/rounded-full9999px9999pxCircular/pill shapes

[!NOTE] rounded (DEFAULT) and rounded-md both resolve to 8px in this design system, as verified from Figma. The standard shadcn/ui Tailwind config uses calc(var(--radius) - 2px) for md which would compute to 6px with the default --radius: 0.5rem. Our system overrides this so both produce 8px. FLAGGED: Verify against the actual Tailwind config in the codebase.

Verified Radii (Extracted from Figma)

TokenValueSource
rounded-sm6pxInline code background
rounded-md8pxFilled icon containers
rounded-lg10pxCode blocks
rounded-xl14pxDark mode containers

Common Usage Patterns

ComponentTokenValue
Buttonsmd8px
Inputsmd8px
Cardslg10px
Modalslg-xl10-14px
Badgesfull9999px (pill)
Inline codesm6px
Avatarssm–2xl (size-dependent)6–16px
Pills/tagsfull9999px
Tooltipsmd8px
Dropdownsmd8px
Containersxl14px

CSS Custom Properties

:root {
  --radius: 0.5rem; /* Base radius variable used by shadcn/ui */
  
  --border-radius-none: 0;
  --border-radius-sm: calc(var(--radius) - 4px);    /* 6px */
  --border-radius: var(--radius);                    /* 8px */
  --border-radius-md: calc(var(--radius));          /* 8px */
  --border-radius-lg: calc(var(--radius) + 2px);    /* 10px */
  --border-radius-xl: calc(var(--radius) + 6px);    /* 14px */
  --border-radius-2xl: calc(var(--radius) + 8px);   /* 16px */
  --border-radius-3xl: calc(var(--radius) + 16px);  /* 24px */
  --border-radius-full: 9999px;
}

Tailwind Configuration

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
      },
    },
  },
}

Tailwind Classes

rounded-none     /* 0px */
rounded-sm       /* 6px */
rounded          /* 8px */
rounded-md       /* 8px */
rounded-lg       /* 10px */
rounded-xl       /* 14px */
rounded-2xl      /* 16px */
rounded-3xl      /* 24px */
rounded-full     /* 9999px (circular) */

See Also

  • Related Tokens:
    • Spacing - Spacing scale (related progression)
    • Shadows - Often paired with radius for elevation
  • Design System:
    • Themes - Multi-theme system overview

Last extracted: December 16, 2025