Spacing & Layout
Consistent spacing creates visual harmony and improves readability.
Spacing Scale
We use a base-4 spacing scale. All spacing values are multiples of 4px for consistent vertical rhythm and alignment.
| Token | Value | Class | Preview |
|---|---|---|---|
0 | 0px | w-0 | |
1 | 4px | w-1 | |
2 | 8px | w-2 | |
3 | 12px | w-3 | |
4 | 16px | w-4 | |
5 | 20px | w-5 | |
6 | 24px | w-6 | |
8 | 32px | w-8 | |
10 | 40px | w-10 | |
12 | 48px | w-12 | |
16 | 64px | w-16 | |
20 | 80px | w-20 | |
24 | 96px | w-24 |
Common Patterns
Component Spacing
- Card padding
p-6 - Button padding
px-6 py-3 - Input padding
px-4 py-3 - Badge padding
px-4 py-1.5
Layout Spacing
- Section gap
py-12 lg:py-16 - Grid gap
gap-4 lg:gap-6 - Stack gap
space-y-4 - Page padding
px-6 lg:px-12
Breakpoints
Mobile-first responsive breakpoints. Always design for mobile, then enhance for larger screens.
sm640px
Small tablets, large phones (landscape)
md768px
Tablets
lg1024px
Small laptops, tablets (landscape)
xl1280px
Desktops
2xl1536px
Large desktops
Tip: Use sm:, md:, lg:, xl: prefixes to apply styles at specific breakpoints.
Border Radius
Rounded corners are central to Articulink's friendly aesthetic. Use larger radii for larger elements.
none
0px
sm
2px
default
4px
md
6px
lg
8px
xl
12px
2xl
16px
3xl
24px
full
9999px
- • Cards:
rounded-2xl - • Buttons:
rounded-fullorrounded-xl - • Inputs:
rounded-xl - • Badges:
rounded-full - • Icons/Avatars:
rounded-xl
- • Sharp corners (
rounded-none) - • Mixing too many different radii
- • Inconsistent rounding within a component
Grid System
Use CSS Grid for layouts. Common column configurations for different content types.
12-Column Grid
grid-cols-2Two-column layouts
grid-cols-3Card grids, features
grid-cols-4Icon grids, stats
Container Widths
max-w-sm384pxmax-w-md448pxmax-w-lg512pxmax-w-xl576pxmax-w-2xl672pxmax-w-4xl896pxmax-w-6xl1152pxmax-w-7xl1280px