Spacing
Spacing ensures consistent alignment, visual balance, and a harmonious structure across the design, creating layouts that are both functional and aesthetically pleasing.
Search
Spacing plays a crucial role in creating a clean and organized design.
Kernel’s spacing system is based on a 4px geometric progression, allowing scalable and flexible spacing options for any design need.
0px
4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
80px
120px
160px
Inset
Specifies the padding within a container, ensuring content is neatly spaced from its edges.
4px
4px
12px
16px
24px
Inset Squish
Applies unequal spacing, typically with reduced vertical padding compared to horizontal, to accommodate dynamic layouts.
12px
4px
8px
12px
12px
16px
16px
24px
Stack
Structures elements in a vertical arrangement, maintaining consistent spacing to create a clear content flow.
Kernel Design System
Kernel Design System
Kernel Design System
Kernel Design System
Kernel Design System
Kernel Design System
4px
8px
12px
16px
24px
Inline
Aligns elements side by side, maintaining uniform spacing for a clean and organized horizontal layout.
Kernel
Kernel
Kernel
Kernel
Kernel
Kernel
4px
8px
12px
16px
24px
Space Tokens
Core Tokens
Core space tokens define the foundational spacing values.
Value
Token
0px
space-000
4px
space-010
8px
space-020
12px
space-030
16px
space-040
20px
space-050
24px
space-060
32px
space-070
40px
space-080
48px
space-090
64px
space-100
80px
space-110
120px
space-120
160px
space-130
System Tokens
System space tokens are derived from core tokens and tailored for layout-level use cases
Value
Token
space-010
space-inset-xs
space-020
space-inset-sm
space-030
space-inset-md
space-040
space-inset-lg
space-060
space-inset-xl
space-030
space-insetSquish-xs-horizontal
space-010
space-insetSquish-xs-vertical
space-030
space-insetSquish-sm-horizontal
space-020
space-insetSquish-sm-vertical
space-040
space-insetSquish-md-horizontal
space-030
space-insetSquish-md-vertical
space-060
space-insetSquish-lg-horizontal
space-040
space-insetSquish-lg-vertical
space-010
space-stack-xs
space-020
space-stack-sm
space-030
space-stack-md
space-040
space-stack-lg
space-060
space-stack-xl
space-010
space-inline-xs
space-020
space-inline-sm
space-030
space-inline-md
space-040
space-inline-lg
space-060
space-inline-xl