Spacing
Design tokens for spacing and layout
Spacing
Consistent spacing creates visual rhythm and hierarchy in your interface. Vibrant UI provides a systematic spacing scale based on a 4px grid.
Spacing Scale
none0px
tokens.spacings.none
3xs4px
tokens.spacings.3xs
2xs6px
tokens.spacings.2xs
xs8px
tokens.spacings.xs
sm10px
tokens.spacings.sm
md12px
tokens.spacings.md
lg16px
tokens.spacings.lg
xl20px
tokens.spacings.xl
2xl24px
tokens.spacings.2xl
3xl32px
tokens.spacings.3xl
4xl48px
tokens.spacings.4xl
5xl64px
tokens.spacings.5xl
6xl96px
tokens.spacings.6xl
Usage Patterns
Padding and Margins
/* Using CSS variables */
.component {
padding: var(--token-spacings-md); /* 12px */
margin-bottom: var(--token-spacings-lg); /* 16px */
}
/* Using tokens directly */
.component {
padding: 12px;
margin-bottom: 16px;
}Grid Gaps
.grid {
display: grid;
gap: var(--token-spacings-md); /* 12px */
}
.flex {
display: flex;
gap: var(--token-spacings-sm); /* 10px */
}In JavaScript/TypeScript
import { tokens } from '@vibrant-ui/tokens';
const cardStyle = {
padding: `${tokens.spacings.lg}px`, // "16px"
marginBottom: `${tokens.spacings.md}px`, // "12px"
};With Vibrant UI Components
import { Stack, Container } from '@vibrant-ui/components';
<Container padding="lg">
<Stack gap="md">
<div>Item 1</div>
<div>Item 2</div>
</Stack>
</Container>;Guidelines
Consistent Hierarchy
Use the spacing scale to create consistent visual relationships:
- none (0px): When elements should touch
- 3xs-xs (4-8px): Very tight spacing, like inside small components
- sm-md (10-12px): Standard component spacing
- lg-xl (16-20px): Comfortable spacing between sections
- 2xl+ (24px+): Large spacing for major sections
Responsive Spacing
Consider using different spacing values at different breakpoints:
.section {
padding: var(--token-spacings-md);
}
@media (min-width: 768px) {
.section {
padding: var(--token-spacings-xl);
}
}Touch Targets
Ensure interactive elements have adequate spacing for touch interfaces (minimum 44px target size).
Edit on GitHub
Last updated on