Spacings
The Hurco design system utilizes a mathematical spacing scale to ensure consistent vertical and horizontal rhythm. All values are derived from a base unit to maintain layout harmony.
Spacing Scale
| Token | Pixel | Rem | Visual Representation |
|---|---|---|---|
| space-1 | 0px | 0rem | |
| space-2 | 2px | 0.125rem | |
| space-3 | 4px | 0.25rem | |
| space-4 | 8px | 0.5rem | |
| space-5 | 12px | 0.75rem | |
| space-6 | 16px | 1rem | |
| space-7 | 20px | 1.25rem | |
| space-8 | 24px | 1.5rem | |
| space-9 | 28px | 1.75rem | |
| space-10 | 36px | 2.25rem | |
| space-11 | 40px | 2.5rem | |
| space-12 | 64px | 4rem | |
| space-13 | 72px | 4.5rem | |
| space-14 | 88px | 5.5rem | |
| space-15 | 120px | 7.5rem | |
| space-16 | 180px | 11.25rem | |
| space-17 | 240px | 15rem |
Usage Principles
- Predictability: Avoid hardcoding "one-off" pixel values. Always snap to the nearest spacing token.
- Grids: Use smaller steps (1–5) for internal component padding and larger steps (10–17) for section margins and layout gaps.
- Consistent Scaling: When increasing screen size, increment spacing tokens proportionally to maintain visual balance.