Concentric Tokens
Mathematical coordination of corner radii, strict interactive component heights, and zero-margin architectural discipline.
Interactive Demo
Live Concentric Radius Tuner
--radius: 16px
0px (Sharp Tech Look) 16px (Bits UI Standard) 28px (Pill Radius)
1. Concentric Radius Formula
In modern user interfaces, nesting rounded elements with disparate corner radii introduces optical distortion. To maintain perfect concentric harmony, inner elements must follow this geometric rule:
Inner Radius = Outer Radius - Padding
| Token | Mathematical Formula | Resolved Value (16px base) | Target Elements |
|---|---|---|---|
| --radius-dialog | calc(var(--radius) + 4px) | 20px | Dialog / Modal container |
| --radius-card | var(--radius) | 16px | Card, Popover container |
| --radius-input | calc(var(--radius) - 6px) | 10px | Button, Input controls |
| --radius-item | calc(var(--radius) - 10px) | 6px | Checkbox, inner Badges |
2. Strict Scale (1:1 Height Consistency)
When inputs and buttons appear side by side, slight differences in height create jarring visual seams. Bytes UI establishes three strict scale tiers:
| Scale Tier | Height | Padding (X) | Font Size | Intended Use |
|---|---|---|---|---|
| sm | 36px (h-9) | 14px (px-3.5) | 13px (text-sm) | Toolbars, data tables, dense forms |
| default (md) | 48px (h-12) | 21px (px-[21px]) | 15px (text-[15px]) | Bits UI signature standard controls |
| lg | 56px (h-14) | 28px (px-7) | 16px (text-base) | Hero CTA buttons, modal submit bars |