Spacing and Proportions
A consistent spacing system creates visual harmony and improves user experience. These guidelines establish the rhythm and visual hierarchy of all brand elements.
Spacing System
Base Scale: 8px
Bluu uses a spacing system based on multiples of 8px. This system ensures consistency and facilitates responsive design.
| Token |
Value |
Primary Use |
xs |
4px |
Very small spaces, icons |
sm |
8px |
Small spaces between elements |
md |
16px |
Standard spacing |
lg |
24px |
Spaces between sections |
xl |
32px |
Large spaces between components |
2xl |
48px |
Main section separation |
3xl |
64px |
Outer margins, heroes |
4xl |
96px |
Extra large spaces |
Complete Scale
4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 56px, 64px, 80px, 96px, 128px
Margins and Padding
Containers
/* Mobile */
.container {
padding: 16px; /* md */
}
/* Tablet */
@media (min-width: 768px) {
.container {
padding: 24px; /* lg */
}
}
/* Desktop */
@media (min-width: 1024px) {
.container {
padding: 32px; /* xl */
}
}
Cards
.card {
padding: 24px; /* lg */
margin-bottom: 16px; /* md */
border-radius: 8px;
}
.card-header {
margin-bottom: 16px; /* md */
}
.card-content {
padding: 16px; /* md */
}
.button {
/* Regular Button */
padding: 12px 24px;
border-radius: 8px;
}
.button-large {
padding: 16px 32px;
border-radius: 12px;
}
.button-small {
padding: 8px 16px;
border-radius: 6px;
}
Vertical Spacing
Between Text Elements
| Element |
Bottom Space |
| H1 |
24px |
| H2 |
20px |
| H3 |
16px |
| H4, H5, H6 |
12px |
| Paragraph (p) |
16px |
| List (ul, ol) |
16px |
| List item (li) |
8px |
Between Sections
| Context |
Spacing |
| Between main sections |
64px - 96px |
| Between subsections |
48px |
| Between components |
32px |
| Between related elements |
16px - 24px |
Grid and Layouts
Grid System
Bluu uses a 12-column grid with consistent gutters:
| Breakpoint |
Width |
Columns |
Gutter |
Margin |
| Mobile |
< 768px |
4-6 |
16px |
16px |
| Tablet |
768px - 1023px |
8 |
24px |
24px |
| Desktop |
≥ 1024px |
12 |
32px |
32px |
| Large |
≥ 1440px |
12 |
32px |
Auto |
Content Maximums
/* Maximum for reading */
.content-width {
max-width: 768px;
}
/* Maximum for layouts */
.layout-width {
max-width: 1280px;
}
/* Wide maximum */
.wide-width {
max-width: 1440px;
}
Borders and Radii
Border Radius
| Token |
Value |
Use |
none |
0px |
No rounding |
sm |
4px |
Small elements |
md |
8px |
Standard (buttons, cards) |
lg |
12px |
Modals, large components |
xl |
16px |
Featured containers |
2xl |
24px |
Hero elements |
full |
9999px |
Circular (avatars, badges) |
/* Examples */
.button { border-radius: 8px; }
.card { border-radius: 8px; }
.modal { border-radius: 12px; }
.avatar { border-radius: 9999px; }
Border Width
| Token |
Value |
Use |
thin |
1px |
Standard |
medium |
2px |
Emphasis |
thick |
4px |
Featured elements |
Shadows
Elevation system with consistent shadows:
/* Elevation 1 - Subtle */
.shadow-sm {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
/* Elevation 2 - Standard */
.shadow-md {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07),
0 2px 4px rgba(0, 0, 0, 0.05);
}
/* Elevation 3 - Elevated */
.shadow-lg {
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1),
0 4px 6px rgba(0, 0, 0, 0.05);
}
/* Elevation 4 - Modal */
.shadow-xl {
box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1),
0 10px 10px rgba(0, 0, 0, 0.04);
}
/* Elevation 5 - Overlay */
.shadow-2xl {
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}
Iconography
Icon Sizes
| Token |
Size |
Use |
xs |
12px |
Inline, badges |
sm |
16px |
Small buttons, texts |
md |
24px |
Standard |
lg |
32px |
Large buttons, headers |
xl |
48px |
Heroes, illustrations |
2xl |
64px |
Landing pages |
Spacing with Text
/* Icon + Text */
.icon-text {
display: flex;
align-items: center;
gap: 8px; /* sm */
}
/* Icon in button */
.button-with-icon {
display: flex;
align-items: center;
gap: 8px; /* sm */
}
Proportions
Image Aspect Ratios
| Use |
Ratio |
Example |
| Square |
1:1 |
Avatars, icons |
| Standard landscape |
16:9 |
Videos, banners |
| Wide landscape |
21:9 |
Heroes, covers |
| Portrait |
3:4 |
Profile photos |
| Golden ratio |
1.618:1 |
Featured elements |
/* 16:9 */
.aspect-video {
aspect-ratio: 16 / 9;
}
/* 1:1 */
.aspect-square {
aspect-ratio: 1 / 1;
}
/* 3:4 */
.aspect-portrait {
aspect-ratio: 3 / 4;
}
Specific Layouts
.header {
height: 64px; /* Desktop */
padding: 0 32px;
}
@media (max-width: 768px) {
.header {
height: 56px;
padding: 0 16px;
}
}
.footer {
padding: 64px 32px 32px;
}
.footer-section {
margin-bottom: 32px;
}
Modals
.modal {
max-width: 600px;
padding: 32px;
border-radius: 12px;
}
.modal-header {
margin-bottom: 24px;
}
.modal-footer {
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid #E0E0E0;
}
.form-group {
margin-bottom: 24px;
}
.form-label {
margin-bottom: 8px;
}
.form-input {
padding: 12px 16px;
border-radius: 8px;
}
.form-input:focus {
outline: 2px solid #3747B0;
outline-offset: 2px;
}
.form-help-text {
margin-top: 8px;
}
Component Spacing
Lists
.list-item {
padding: 16px;
border-bottom: 1px solid #E0E0E0;
}
.list-item:last-child {
border-bottom: none;
}
/* List with icons */
.list-item-icon {
display: flex;
gap: 16px;
align-items: center;
}
Navigation
.nav-item {
padding: 12px 16px;
margin: 0 4px;
}
.nav-dropdown {
padding: 8px 0;
}
.nav-dropdown-item {
padding: 12px 16px;
}
Alerts / Notifications
.alert {
padding: 16px 20px;
border-radius: 8px;
margin-bottom: 16px;
}
.alert-icon {
margin-right: 12px;
}
Responsive Spacing
Breakpoint System
/* Mobile First */
.section {
padding: 32px 16px; /* Mobile */
}
/* Tablet */
@media (min-width: 768px) {
.section {
padding: 48px 24px;
}
}
/* Desktop */
@media (min-width: 1024px) {
.section {
padding: 64px 32px;
}
}
/* Large Desktop */
@media (min-width: 1440px) {
.section {
padding: 96px 48px;
}
}
CSS Tokens
Recommended CSS Variables
:root {
/* Spacing Scale */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;
--space-4xl: 96px;
/* Border Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 24px;
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
/* Layout */
--container-max: 1280px;
--content-max: 768px;
--header-height: 64px;
}
Golden Rules
✅ Do
- Use multiples of 8px for all spacing
- Maintain consistency in paddings and margins
- Use the same border-radius on similar elements
- Apply shadows consistently according to elevation
- Align elements to the grid
❌ Avoid
- Arbitrary spacing (e.g., 13px, 27px)
- Mixing different spacing systems
- Inconsistent border-radius
- Custom shadows without following the system
- Elements misaligned from the grid
- Figma/Sketch: Configure 8px grid
- Tailwind CSS: Integrated spacing system
- CSS Grid/Flexbox: For consistent layouts
- Design Tokens: Centralize values in variables
Spatial consistency creates visual rhythm and significantly improves user experience.