Spacing system
A well-defined spacing system is crucial for maintaining consistency and alignment in your designs. It also streamlines the transition from design to code, making your workflow more efficient. By limiting the number of spacing options, you can make quicker design decisions without sacrificing quality.
8px base
Many designers advocate for an 8px base for spacing scales, often with varying reasons. In my perspective, it aligns perfectly with the ideal and default HTML font size of 16px. This alignment ensures a harmonious and logical design system.
Base tokens
Like many design systems, Once UI utilizes base tokens for managing spacings. Our scaling method, which we've discussed earlier, automatically adjusts spacing based on breakpoints in the code. We'll delve into how this translates into Figma shortly.
Smart tokens
While base spacing tokens are fundamental, they don't always cover every scenario. That's where Once UI's smart token concept comes into play. We'll explore this innovative approach later in this chapter, demonstrating how it can further enhance your design process.