Spacing

To ensure visual consistency and a cohesive user experience across all platforms, we are adopting a standardized spacing and radius system. This document outlines our approach, which primarily uses a 4px spacing scale (measured in rem units) with adjustments for mobile and desktop devices.

Our spacing system utilizes named tokens that define specific rem values. These values differ slightly between mobile and desktop to optimize readability and visual hierarchy on different screen sizes. Our base rem unit is set to 1rem = 16px. The spacing tokens follow this convention: spacing-[size]. Sizing follows t-shirt sizing naming.

While geometric precision is our starting point, we place a higher emphasis on optical alignment. This means that, although our measurements are based on a 4px grid, we make small adjustments when necessary to ensure that elements visually align in a way that feels natural and comfortable to the eye.

By combining a systematic approach with thoughtful visual fine-tuning, our spacing and radius guidelines help maintain consistency across all interfaces while also enhancing the overall user experience.