Sizes
A set of standardized values and principles defines a unified approach to scaling and positioning all UI elements.
Using a standardized size system allows developers and designers to work within common rules, which significantly accelerates the design and development process, reduces the likelihood of errors, and ensures visual harmony, functional adaptability, and intuitive ergonomics across various platforms and devices.
Principles
Consistency
All interface elements must use a predefined set of sizes to ensure a consistent appearance and behavior throughout the entire user experience.
Adaptability
Sizes must be flexible and adapt to different screen resolutions, device orientations, and viewport sizes, ensuring optimal display and usability across all platforms.
Scalability
The sizing system must be designed to allow elements to be easily scaled without losing proportions, functionality, or visual quality, maintaining design integrity.
Grid-Based
All dimensional values are based on modular and baseline grids that provide predictable spacing and element alignment, contributing to a structured and organized interface.
Baseline Grid
A baseline grid is a fundamental element of a design system, ensuring structural integrity and visual uniformity for all UI components. Strict adherence to baseline grid principles is key to creating a predictable, scalable, and visually appealing user interface that delivers a consistent experience across all platforms.
Baseline Grid Size
The primary unit of measurement is calculated based on the line height of the base font. All margins, paddings, component heights, border radii, and spacing between elements must be relative to this base size. This ensures an organic relationship between the text and its surrounding space. Vertical rhythms naturally align with the reading pace, improving overall readability and aesthetics.
For complex interfaces, it is permissible to reduce the baseline grid size proportionally. However, keep in mind that a smaller grid size increases value variance, which can lead to more design errors and reduced consistency. It is recommended to use the smallest necessary increment to maintain a balance between system flexibility and rigor.
Usability
Snapping all sizes to the grid simplifies the design process and minimizes errors, as it utilizes standardized dimensions without the need to calculate fractional values.
Modular Grid
A powerful coordinate system that underpins any well-thought-out design. It serves as a framework ensuring order, consistency, and visual harmony in content arrangement.
Originally developed for print layout (where both columns and rigid horizontal rows for text were essential, forming modules—hence the name), the modular grid has adapted to the dynamic and infinite height of the web. Here, it evolved into a more flexible columnar grid.
The 12-column grid: This is the golden standard in web design, especially for desktop layouts. It is extremely flexible, as 12 can be divided by 2, 3, 4, and 6, allowing the creation of complex and adaptive layouts using the exact same modular grid.
Size Scales
Size/Spacing
Element dimensions and distances between them. md is the default value and may be omitted.
…, xs, sm, md, lg, xl, …
(button-sm, border-radius-xs)
Weight/Saturation
Font character thickness, color saturation or brightness.
100, 200, …, 900
(font-weight-400, red-500)
Order/Level/Depth
Visual hierarchy and/or “elevation” of elements (shadows).
1, 2, 3, …
(level-1, space-1)
Speed
Animation and transition speeds. normal is the default value.
…, slow, normal, fast, …
(duration-normal)
Thickness
Border or stroke thickness.
none, thin / hairline, medium, thick, heavy, …
(border-width-thin)
Relative Units
The use of relative units of measurement is key to achieving interface responsiveness, scalability, and accessibility. These units allow element dimensions to change dynamically based on the context, unlike fixed pixels.
rem (root em)
Relates exclusively to the font size of the root HTML element (<html>). If the base font of <html> is 16px, then 1rem = 16px.
Used to define most dimensions in the system: fonts, spacings (margin, padding), component sizes (width/height), and border radii.
em (element em)
Relates to the font size of the parent element. If the parent has font-size: 20px, then 1em = 20px, even if the root font is 16px.
It is practical to use for paddings within a specific component so they scale along with that component's font size.
% (Percentage values)
Relate to the size of the parent element or the viewport width and height.
Used to create fluid and adaptive layouts, such as for flexible columns (width: 50%) or elements that must occupy a certain share of the available space.
vw, vh, vmin, vmax (Viewport units)
Relate to the dimensions of the browser window (viewport). For example, 1vw equals 1% of the viewport width, while 1vh — 1% of its height.
Suitable for elements that should scale along with the browser window size, such as fluid typography, large headings, or full-screen background images.
pt (point) / dp (density-independent pixel) / sp (scale-independent pixel)
Units of measurement used in mobile operating systems. They are scaled by the OS depending on the device's screen pixel density (DPI/PPI). This allows elements to maintain the exact same physical size and readability across screens with different densities.
Spacings
A scalable set of standardized spatial values (design tokens) used to systematically manage margins and paddings between interface elements. It acts as an all-encompassing framework for the digital product, strictly regulating the distances around and within text blocks, buttons, images, cards, and other components, thereby ensuring visual integrity and technical consistency across layouts.
Space ×1
Space ×1
Space ×2
Space ×2
Space ×3
Space ×3
Space ×4
Space ×4
Space ×5
Space ×5
Space ×6
Space ×6
Border radius
Rounded corners make the interface less harsh and more user-friendly. Soft, smooth shapes are naturally more pleasing to the eye.
sm
md
lg
xl
xxl
pill / full / circle
Radius Hierarchy
By snapping corner radius values to the baseline grid, a perfect proportional ratio between dimensions is achieved.