Docs/Foundations/RadiusRadiusCorner radius tokens for components, cards, and containers.Scale6 tokens from sharp (none) to fully round (full). Every component corner in the system uses one of these — no arbitrary values.TokenValuePreviewUsageradius/none0pxTables, inline elements, flush containersradius/xs2pxBadges, tooltips, code chipsradius/sm4pxInputs, small buttons, tagsradius/md8pxButtons, cards, dropdowns, selectsradius/lg12pxModals, drawers, large panelsradius/full999pxPills, avatars, toggle switchesComponent mappingWhich token each component uses — always match the component to its assigned token, never override.Buttonradius/mdInputradius/smBadgeradius/xsCardradius/mdModalradius/lgAvatarradius/fullPill / Tagradius/fullTable rowradius/noneGuidelines✓Do✓Always use a token — never write border-radius: 6px or other arbitrary values✓Use radius/md as the default for interactive elements like buttons and cards✓Use radius/full for anything pill-shaped or circular✓Match radius to the component visual weight — smaller components use smaller radius✕Don't✕Mix radius tokens within the same component (e.g. md top, sm bottom)✕Use radius/lg on small elements like badges or inputs✕Use radius/full on rectangular content containers✕Override tokens with arbitrary values to "just make it look right"←SpacingElevation→
