Radius · Docs · PyColors

Design SystemRadius

OverviewLink to section

Corner radius is one of the strongest visual signals in a UI system.

It directly influences how your product feels:

sharp or soft
dense or breathable
utilitarian or premium
rigid or friendly

PyColors defines a small, controlled radius scale so every surface feels consistent across:

components
dashboards
forms
documentation
marketing pages

Why this matters

Inconsistent radius is one of the fastest ways to break visual coherence. Even small differences create a subtle feeling of “something is off”.

What you’ll defineLink to section

Base radius

A single source of truth that controls the global feel of the UI.

Scale

A limited set of sizes used across all components.

Usage rules

Clear constraints to prevent visual drift over time.

StepsLink to section

Define a base radiusLink to section

Start from a single variable.

tokens.css

:root {
  --radius: 0.625rem;
}

Then derive the full scale from it.

tokens.css

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

This allows you to adjust the entire product feel from one place.

Map radius to TailwindLink to section

Expose the tokens through Tailwind so components stay consistent.

tailwind.config.ts

borderRadius: {
  sm: "var(--radius-sm)",
  DEFAULT: "var(--radius-md)",
  md: "var(--radius-md)",
  lg: "var(--radius-lg)",
  xl: "var(--radius-xl)",
}

From that point, components only use semantic utilities.

Apply consistently in componentsLink to section

rounded-sm

rounded-md

rounded-lg

rounded-xl

components/radius-example.tsx

export function RadiusExample() {
  return (
    <div className="grid gap-4 sm:grid-cols-2">
      <div className="rounded-sm border bg-card p-4 text-sm">
        Small radius
      </div>

      <div className="rounded-md border bg-card p-4 text-sm">
        Default radius
      </div>

      <div className="rounded-lg border bg-card p-4 text-sm">
        Large radius
      </div>

      <div className="rounded-xl border bg-card p-4 text-sm">
        Extra large radius
      </div>
    </div>
  );
}

Radius scaleLink to section

Token	Usage
`--radius-sm`	dense UI, compact elements
`--radius-md`	default controls
`--radius-lg`	cards and surfaces
`--radius-xl`	modals and standout containers

Decision guideLink to section

Use this system if:

you want visual consistency across many components
you are building dashboards or SaaS products
you want predictable theming
you want components to stay reusable

Avoid local overrides if:

the value is used in multiple places
it breaks consistency with existing components
it introduces visual noise
it does not belong to a reusable pattern

Prefer

use semantic radius tokens
keep a small controlled scale
reuse values across components
adjust via base variable

Avoid

random radius per component
mixing multiple visual styles
hardcoding values
breaking consistency between surfaces

Why it mattersLink to section

Radius is subtle, but it shapes perception instantly.

consistent radius → product feels intentional
inconsistent radius → product feels unpolished

Keeping radius controlled ensures your UI stays:

predictable
scalable
visually calm