Design System
Spacing
Spacing guidelines and Tailwind utilities for consistent layout in the YaVendio Design System
YaVendio components use Tailwind CSS utilities for spacing, ensuring consistency and compatibility with standard Tailwind projects.
Spacing Scale
Components follow Tailwind's spacing scale (base 4px):
0 (0px)
gap-0, p-00.5 (2px)
gap-0.5, p-0.51 (4px)
gap-1, p-12 (8px)
gap-2, p-23 (12px)
gap-3, p-34 (16px)
gap-4, p-46 (24px)
gap-6, p-68 (32px)
gap-8, p-812 (48px)
gap-12, p-12Spacing Reference
| Value | Pixels | Tailwind Class | Usage |
|---|---|---|---|
| 0 | 0px | gap-0, p-0 | No spacing |
| 0.5 | 2px | gap-0.5, p-0.5 | Icon/text spacing |
| 1 | 4px | gap-1, p-1 | Minimal spacing |
| 1.5 | 6px | gap-1.5, p-1.5 | Compact elements |
| 2 | 8px | gap-2, p-2 | Default element spacing |
| 2.5 | 10px | gap-2.5, p-2.5 | Medium compact |
| 3 | 12px | gap-3, p-3 | Buttons, small padding |
| 4 | 16px | gap-4, p-4 | Section internal |
| 6 | 24px | gap-6, p-6 | Card content |
| 8 | 32px | gap-8, p-8 | Section spacing |
| 10 | 40px | gap-10, p-10 | Page sections |
| 12 | 48px | gap-12, p-12 | Large sections |
Border Radius
Components use Tailwind's border radius utilities extended with YaVendio custom values.
The rounded-xs class is a custom extension defined in globals.css as --radius-xs. Tailwind CSS v4 does not include this class by default.
XS (2px)
rounded-xsSM (4px)
rounded-smMD (8px)
rounded-mdLG (12px)
rounded-lgXL (16px)
rounded-xlFull
rounded-full| Tailwind Class | CSS Variable | Pixels | Usage |
|---|---|---|---|
rounded-xs | --radius-xs | 2px | Subtle rounding, small elements (custom) |
rounded-sm | --radius-sm | 4px | Small badges, tags |
rounded-md | --radius-md | 6px | Buttons, inputs |
rounded-lg | --radius-lg | 8px | Cards |
rounded-xl | --radius-xl | 12px | Large cards, modals |
rounded-full | — | 9999px | Pill badges, avatars |
Custom Radius Configuration
YaVendio extends Tailwind's default border radius scale in globals.css:
@theme inline {
--radius-xs: calc(var(--radius) - 6px); /* 2px - Custom extension */
--radius-sm: calc(var(--radius) - 4px); /* 4px */
--radius-md: calc(var(--radius) - 2px); /* 6px */
--radius-lg: var(--radius); /* 8px (base) */
--radius-xl: calc(var(--radius) + 4px); /* 12px */
}The base --radius value is 0.5rem (8px), defined in :root.
Usage Examples
// Button with standard spacing
<YaButton className="px-4 py-2 gap-2">
Save Changes
</YaButton>
// Card with padding
<div className="p-6 space-y-4">
<h2>Card Title</h2>
<p>Card content</p>
</div>// Section spacing
<section className="py-12 px-6">
<h1 className="mb-6">Section Title</h1>
<div className="space-y-8">
{/* Cards with gaps */}
</div>
</section>
// Grid with gaps
<div className="grid grid-cols-3 gap-4">
<Card />
<Card />
<Card />
</div>
// Flex with consistent gaps
<div className="flex items-center gap-2">
<Icon />
<span>Text</span>
</div>// Responsive spacing
<div className="p-4 md:p-6 lg:p-12">
<div className="space-y-4 md:space-y-6">
{/* Content */}
</div>
</div>
// Responsive gaps
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
{/* Items */}
</div>Best Practices
Migration from Custom Tokens
If you were using --ya-space-* tokens before:
| Old Custom Token | New Tailwind Utility |
|---|---|
px-[var(--ya-space-1)] | px-1 |
gap-[var(--ya-space-2)] | gap-2 |
py-[var(--ya-space-3)] | py-3 |
p-[var(--ya-space-4)] | p-4 |
gap-[var(--ya-space-6)] | gap-6 |
rounded-[var(--ya-radius-md)] | rounded-md |
rounded-[var(--ya-radius-pill)] | rounded-full |