Spacing & Layout
Consistent spacing scales and layout primitives for building cohesive interfaces.
Spacing Scale
A harmonious scale based on 4px increments for consistent spacing.
$spacing-00px
$spacing-0.52px
$spacing-14px
$spacing-1.56px
$spacing-28px
$spacing-2.510px
$spacing-312px
$spacing-416px
$spacing-520px
$spacing-624px
$spacing-832px
$spacing-1040px
$spacing-1248px
$spacing-1664px
$spacing-2080px
$spacing-2496px
$spacing-32128px
Usage in SCSS
@use '@/styles/variables' as *;
.card {
padding: $spacing-4;
margin-bottom: $spacing-6;
gap: $spacing-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.
sm640px
md768px
lg1024px
xl1280px
2xl1536px
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
dropdown
$z-dropdown1000
sticky
$z-sticky1020
fixed
$z-fixed1030
modal-backdrop
$z-modal-backdrop1040
modal
$z-modal1050
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;
}