Height
In Halstack, dimensions refer specifically to the height of UI elements such as buttons, inputs, icons, and other interactive components. While spacing controls the distance between elements, dimensions define the vertical size of the elements themselves.
Maintaining consistent height values across the interface ensures a predictable rhythm, enhances scannability, and simplifies the construction of flexible, responsive layouts.
Our scale was designed with a balance between flexibility and simplicity. It follows a loosely exponential progression that prioritizes touch accessibility, icon alignment and component density levels. Although not every element of our Design System follows a fixed height structure, keeping the system as modular and progressive as we can, designers and developers can reason more easily about vertical alignment and component consistency.
In summary, we defined a limited set of height values that serve as our core dimension tokens. These values are chosen to:
- Align with our spacing scale (multiples of 4px where possible)
- Support common component patterns
- Create visual consistency and predictable touch targets
- Allow cross-platform scalability and design token standardization
| Value | Token | Typical usage examples |
|---|---|---|
| 12px | dimensions/12 | Small icons, badges, or inline indicators |
| 16px | dimensions/16 | Smaller icons size |
| 20px | dimensions/20 | Small buttons or compact UI elements |
| 24px | dimensions/24 | Standard icon size and input height for dense forms |
| 32px | dimensions/32 | Default button/input height in compact UIs |
| 36px | dimensions/36 | Secondary button/input variant |
| 40px | dimensions/40 | Default form element height |
| 48px | dimensions/48 | Primary button, larger input elements |
| 56px | dimensions/56 | High emphasis elements, banners |
- Stick to the core: when designing, try to stick as much as possible with our height tokens to create consistent layouts across products. Avoid arbitrary custom heights unless strictly necessary.
- Respect touch targets: Ensure interactive elements like buttons and inputs are at least
height-40for accessibility and usability. - Align height with layout spacing: Use the same spacing unit system (
spacing-4,spacing-8, etc.) to vertically pad elements so they integrate seamlessly. - Don't scale height independently: Avoid resizing components vertically in isolation without updating spacing or content padding.
- Use tokens in code and design: Reference tokens (e.g.,
height-40) directly in CSS or Figma components for consistency and easier maintenance. - Use for more than buttons: These values apply to any vertically bound element, not just buttons and inputs, but also chips, icons, rows, and list items.