Spacing & Layout
Consistent spacing scales and layout primitives for building cohesive interfaces.
Spacing Scale
A harmonious scale based on 4px increments for consistent spacing.
$space-00px
$space-0.52px
$space-14px
$space-1.56px
$space-28px
$space-2.510px
$space-312px
$space-416px
$space-520px
$space-624px
$space-832px
$space-1040px
$space-1248px
$space-1664px
$space-2080px
$space-2496px
$space-32128px
Usage in SCSS
@use '@/styles/variables' as *;
.card {
padding: $space-4;
margin-bottom: $space-6;
gap: $space-2;
}Border Radius
Corner radius tokens for consistent rounded corners across components.
none0px
sm4px
md8px
lg12px
xl16px
2xl24px
3xl32px
full9999px
Usage in SCSS
@use '@/styles/variables' as *;
.button {
border-radius: $radius-md;
}
.modal {
border-radius: $radius-xl;
}
.avatar {
border-radius: $radius-full;
}Breakpoints
Responsive design breakpoints for adaptive layouts.
sm 640px
md 768px
lg 1024px
xl 1280px
2xl 1536px
Usage in SCSS
@use '@/styles/variables' as *;
.grid {
display: grid;
grid-template-columns: 1fr;
@media (min-width: $breakpoint-tablet) {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: $breakpoint-desktop) {
grid-template-columns: repeat(3, 1fr);
}
}Z-Index Scale
Layering system for managing stacking contexts.
base
$z-base0
sticky
$z-sticky1020
fixed
$z-fixed1030
modal-backdrop
$z-modal-backdrop1040
modal
$z-modal1050
dropdown
$z-dropdown1060
popover
$z-popover1060
tooltip
$z-tooltip1070
Usage in SCSS
@use '@/styles/variables' as *;
.dropdown {
z-index: $z-dropdown;
}
.modal {
z-index: $z-modal;
}
.tooltip {
z-index: $z-tooltip;
}