Shape

Product UI uses one radius scale, built around an 8px base (--radius), which is also the most used radius in coach-admin today. The chamfered corner from the logo tile is a brand motif, kept for brand moments.

Radius scale

• rounded-none0pxTables, full-bleed media, anything that meets an edge.
• rounded-sm4pxBadges, checkboxes, small chips.
• rounded-md6pxButtons, inputs, selects, menu items.
• rounded-lg8pxCards, popovers, dropdown panels. The base radius.
• rounded-xl12pxDialogs, sheets, large cards.
• rounded-2xl16pxFeature panels and promotional surfaces.
• rounded-full9999pxAvatars, pills, switches, status dots.

• Nested shapes get a smaller radius than their container: a rounded-md button inside a rounded-xl dialog.
• Pick by component type, not by size. All buttons use rounded-md, small or large.

Chamfered corners (draft)

Allowed:

• The logo tile and app icon.
• Marketing surfaces: landing pages, campaign banners, onboarding illustrations.
• Brand avatars, such as the SuperCoach team avatar in messages.

Not allowed:

• Product controls: buttons, inputs, cards, badges, dialogs. They use the radius scale.
• Client photos and avatars. People are always round (rounded-full).

Related: Brand, Radius tokens.