A system to maintain consistent size and scale.
Choosing Size vs. Space
Size
Size design tokens define intrinsic dimensions of UI components. Example CSS properties they correspond to: width, height, border-radius, border-width, positioning properties, i.e. top, left, etc.
Space
Space design tokens focus on controlling spatial relationships; that is, the space between and around elements. Example CSS properties they correspond to: padding, margin, gap
Usage
Setting a Specific Size
When assigning a size to an element, utilize Size Tokens for the value.
👍
width: var(--dt-size-400)
👎
width: var(--dt-space-400)
<style>
.box {
min-width: var(--dt-size-720);
}
</style>
<div class="box">Box</div>
Widths and Heights
For optimal layout flexibility and responsiveness, generally avoid using fixed widths or heights when defining element sizes. Instead, use percentages values or set min-width or min-height. This allows the elements to adjust naturally to different screen sizes.
Exceptions exist for select elements like Avatars, Icons, and Toggles. These elements require fixed dimensions to maintain consistent scale across devices within flexible layouts.
Text elements, typically occupy 100% of their allocated space, allowing text to flow freely within the designated area or until trucated.
Variable Sizing
The size of some components is determined by their content. Most expand vertically, while a select few expand horizontally.
This tooltip has a `min-width`, and its height depends on its content.
This button has a fixed `height`, a `min-width` and grows horizontally depending on its content.
Responsiveness
Adapting to different devices, sizes should be fluid across breakpoints. While most Dialtone components are responsive, their fluidity depends on the layout they live within.
Accessibility
To ensure clickable and interactive areas are easily accessible, we recommend a minimum area of var(--dt-size-300), except for links within text. In Dialtone we've applied these to components such as buttons, toggles, checkboxes, radio buttons, dropdowns, and inputs.
Tokens
Here are some frequently used tokens. For a complete list, visit the Size Tokens section.
Key Takeaways
- Use predefined tokens, they help maintain consistency and make it easier to update designs.
- Keep sizes and spacing consistent: This ensures a polished look across all devices.