Corner Radius

Corner radius defines the rounding applied to UI component edges — from buttons and inputs to cards and overlays. Tendoo Design System uses a consistent scale of corner-radius tokens to promote cohesion and reinforce product identity.

Why It Matters

• Establishes a consistent shape language across all components.
• Reinforces product personality (sharp vs soft).
• Communicates visual grouping and hierarchy.

Corner Radius Scale

✅ Use corner-radius.md as the default for most interactive and structural elements.

Usage Guidelines

• Small UI elements (e.g. chips, buttons): Use sm or md
• Containers (e.g. cards, modals): Use lg or xl
• Pills, avatars, toggles: Use full for fully circular corners
• Avoid using arbitrary values — always use tokens for maintainability and consistency.

Examples

// Example with Tailwind-style utility classes
<Button className="rounded-md">Medium Radius</Button>
<Card className="rounded-lg">Card with Larger Radius</Card>
<Avatar className="rounded-full" />

Design Token Reference

// corner-radius.tokens.ts
export const cornerRadius = {
  none: "0px",
  sm: "2px",
  md: "4px",
  lg: "8px",
  xl: "12px",
  full: "9999px",
};

Corner radius is a subtle but powerful part of UI expression. Using tokens ensures consistency across all platforms and components.