Radius

A fruit-named scale: seed, grape, lychee, mango, pomelo, orb. Six steps, easy to remember, no T-shirt sizes.

Scale

  • rounded-seed

    0.25rem · 4px

    Tags, micro-chips, dense controls

  • rounded-grape

    0.5rem · 8px

    Buttons, inputs, badges

  • rounded-lychee

    0.875rem · 14px

    Cards, panels, sidebar items

  • rounded-mango

    1.375rem · 22px

    Hero tiles, media containers

  • rounded-pomelo

    2.25rem · 36px

    Marketing blocks, pull-quotes

  • rounded-orb

    9999px

    Avatars, pills, toggles, dots

Concentric nesting

Inner corners equal outer minus padding so they stay visually parallel.

Inner = mango − p-4 → ~0.375rem

Non-concentric (wrong)

Rules

  • Use fruit names exclusively. rounded-md, rounded-xl etc. are not part of Bruhs.
  • Pair concentric rounds with CSS variables — see the example above.
  • Use rounded-orb for anything circular: avatars, dots, toggles, focus dots.