Spacing System
Ein konsistentes Spacing-System basierend auf einem 8px-Raster für harmonische Abstände.
Basis-Einheit
Das AI Hub Design System verwendet ein 8px-Raster als Basis. Alle Abstände sind Vielfache dieser Einheit.
/* Basis-Einheit */ --spacing-unit: 0.5rem; /* 8px */
Spacing-Skala
0.25rem
4px
0.5rem
8px
0.75rem
12px
1rem
16
16px
1.5rem
24
24px
2rem
32
32px
2.5rem
40
40px
3rem
48
48px
4rem
64
64px
5rem
80
80px
6rem
96
96px
Anwendungsbereiche
Component Spacing
Komponenten-Innenabstand: 2rem (32px)
Section Spacing
Section 1
Abstand zwischen Sections: 4rem (64px)
Grid Spacing
Grid Item
Grid Item
Gap: 1.5rem
Verwendung
/* Padding */
.component {
padding: 2rem; /* 32px */
}
/* Margin */
.section {
margin-bottom: 4rem; /* 64px */
}
/* Gap */
.grid {
display: grid;
gap: 1.5rem; /* 24px */
}
/* Responsive Spacing */
.responsive-component {
padding: 1.5rem; /* Mobile */
}
@media (min-width: 768px) {
.responsive-component {
padding: 2rem; /* Desktop */
}
}