Radius
Fluxion radius documentation defines how rounding is exposed publicly across the system.
This page separates the primitive rounding scale from the semantic radius layer that teams should prefer when building product surfaces and future components.
Scope snapshot
Raw radius values from none to fully rounded.
Public rounding contract intended for system usage.
Consumption guidance
Use semantic radius in product work
Semantic radius should be the default public contract for components and surfaces. It keeps rounding choices consistent across the system.
Use primitives to understand the scale
Primitive radius values are useful as the underlying scale, but they should not become the first choice in day-to-day product decisions.
Keep rounding intentional
Radius should reinforce system consistency. Reusing the documented radius roles is usually better than introducing ad hoc rounding values.
How this page is organized
- primitive radius documents the raw scale
- semantic radius documents the public rounding layer used by the system
Primitive radius
Primitive radius defines the low-level corner scale, from none to fully rounded.
TailwindCSS V2 primitives define the raw rounding scale available to the system.
Radius scale
Low-level corner radius values from none through fully rounded.
primitives.radius.2xlPrimitive16pxprimitives.radius.3xlPrimitive24pxprimitives.radius.4xlPrimitive32pxprimitives.radius.fullPrimitive9999pxprimitives.radius.lgPrimitive10pxprimitives.radius.mdPrimitive8pxprimitives.radius.nonePrimitive0pxprimitives.radius.smPrimitive6pxprimitives.radius.xlPrimitive14pxprimitives.radius.xsPrimitive2pxSemantic radius
Semantic radius defines the named rounding contract that should be preferred in product work.
Theme V2 semantic radius tokens define the public rounding contract used by Fluxion surfaces and components.
Semantic radius scale
Named radius roles that should be preferred over raw primitive values in product work.
semantic.radius.2xlSemantic16pxsemantic.radius.3xlSemantic24pxsemantic.radius.4xlSemantic32pxsemantic.radius.lgSemantic10pxsemantic.radius.mdSemantic8pxsemantic.radius.smSemantic6pxsemantic.radius.xlSemantic14pxsemantic.radius.xsSemantic2px