Radius
Corner radius tokens used to create the PyColors UI visual style.
PyColors UI defines a small set of radius tokens to keep corners consistent across components and layouts.
All radiuses are derived from a single base variable, ensuring global consistency and easy theming.
Base radius
:root {
--radius: 0.625rem;
}From this base, derived tokens are generated:
@theme inline {
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
}These tokens are mapped to Tailwind’s rounded-* utilities:
borderRadius: {
sm: "var(--radius-sm)",
DEFAULT: "var(--radius-md)",
md: "var(--radius-md)",
lg: "var(--radius-lg)",
xl: "var(--radius-xl)",
},This ensures all components using Tailwind’s radius utilities remain aligned with the PyColors design system.
Radius tokens
Defined once in app/global.css and consumed everywhere through Tailwind utilities.
| Token | Maps to |
|---|---|
--radius-sm | Compact elements, inputs, pills |
--radius-md | Default UI radius (buttons, chips) |
--radius-lg | Cards, panels, content containers |
--radius-xl | Modals, overlays, featured surfaces |
When you use rounded-sm, rounded-md, rounded-lg, or rounded-xl, Tailwind resolves the correct token automatically.
Visual examples
rounded-sm
--radius-sm)rounded-md
--radius-md)rounded-lg
--radius-lg)rounded-xl
--radius-xl)export function RadiusExample() {
return (
<div className="grid gap-4 sm:grid-cols-2">
<div className="rounded-sm border bg-card px-4 py-3 text-sm">
<div className="text-xs font-medium text-muted-foreground mb-1">
rounded-sm
</div>
<div>Small radius (--radius-sm)</div>
</div>
<div className="rounded-md border bg-card px-4 py-3 text-sm">
<div className="text-xs font-medium text-muted-foreground mb-1">
rounded-md
</div>
<div>Default radius (--radius-md)</div>
</div>
<div className="rounded-lg border bg-card px-4 py-3 text-sm">
<div className="text-xs font-medium text-muted-foreground mb-1">
rounded-lg
</div>
<div>Large radius (--radius-lg)</div>
</div>
<div className="rounded-xl border bg-card px-4 py-3 text-sm">
<div className="text-xs font-medium text-muted-foreground mb-1">
rounded-xl
</div>
<div>Extra large radius (--radius-xl)</div>
</div>
</div>
);
}Usage guidelines
- Use
rounded-mdas the default radius for most interactive elements (buttons, inputs, small cards). - Use
rounded-lgfor primary surfaces such as cards, panels, and important containers. - Use
rounded-xlsparingly for standout elements like modals, hero sections, or featured cards. - Use
rounded-smfor dense UIs or subtle decorative elements.
By limiting radiuses to a small, semantic set derived from a single base token, PyColors UI maintains strong visual consistency while remaining easy to adapt globally.
Need elevation guidance? See the Shadows tokens page for the matching depth scale.
Related guides
Colors
Semantic OKLCH palette and role-based color usage.
Shadows
Elevation scale aligned with surface radius.
Typography
Text hierarchy and rhythm inside rounded surfaces.
Button
Buttons inherit radius tokens for consistency.
Card
Cards are the primary consumers of radius tokens.
Theming
How to adapt radius and geometry across brands.