For our Spacing Tokens refer to Spacing in Tokens & Guidelines
8px Baseline Grid
Playbook Spacing Tokens
Margin and Padding
Layout Guidelines
Accessibility Standards
Effective spacing in product design is key for user-friendliness. Playbook uses spacing tokens for consistency, simplifying design and enabling clear, functional layouts. Various spacing types contribute to a structured hierarchy. Consistency ensures precision and user-friendly design.
Playbook provides spacing tokens for creating clear, functional responsive layouts. It utilizes an 8px spacing system for consistency and ease of development across components, ensuring visually appealing and accessible layouts on various devices. This approach supports responsive design, enhancing the overall user experience.
Playbook's spacing tokens are vital for consistent interfaces and accessibility. They improve clarity and readability, especially for important information, assisting designers in creating user-friendly, easy-to-navigate interfaces. Accessibility and readability are core principles in the Playbook design system.
| Size | Name & Token | Pixel Size | Usage |
|---|---|---|---|
| xl $space_xl |
40px | Largest value that can be used for page margins and between content containers | |
| lg $space_lg |
32px | Good for larger spaces between groupings of smaller elements | |
| md $space_md |
24px | Mid sized spacing, best used between elements that are loosely related within a larger UI | |
| sm $space_sm |
16px | Most commonly used spacing size, ideal for separating mostly related UI, such as form fields | |
| xs $space_xs |
8px | Smaller spacing between related components | |
| xxs $space_xxs |
4px | Best used for spacing between small elements that are related, such as an xs icon and caption size small |
Margins and padding are very important for UI design, affecting layout, readability, and user experience. Margins control outer spacing, reducing clutter and enhancing readability, while padding manages inner spacing for a clean and organized interface. Playbook priorities carefully crafted margins and paddings to construct its components, ensuring enough clicking space, optimal readability, and solid accessibility standards.
Hierarchy
UI hierarchy is essential for accessibility. It visually connects elements and enhances readability. Spacing aligns with this hierarchy. Important elements get more space for focus, less important ones get less for reduced emphasis. All Playbook's components, such as Dialog, are built prioritizing hierarchy.
Consistency
Consistent spacing between elements based on their similarity or function enhances unity, user navigation, and comprehension. Playbook's library has thoroughly designed components, ensuring consistent spacing to unify similar elements and establish a cohesive UI.
Proximity
Group related elements closely together and create space between distinct sections to visually separate content. Playbook uses proximity across all complex components to establish hierarchy.
Responsive Spacing
Optimize spacing for diverse screens, adjusting proportionally to maintain legibility and hierarchy, ensuring a consistent interfaces. Playbook's library supports responsive layout in all components.
Whitespace
Utilize intentional whitespace to delineate elements, establish hierarchy, prevent clutter, and enable user focus on critical content. Playbook has the Flex kit to define white spacing and consistency of all the UI elements.
Improving accessibility via spacing design tokens ensures consistency, scalability, and adaptability across different screen sizes. Ample spacing facilitates smoother navigation.
Tap area spacing accessibility ensures there's enough space around interactive elements for easy tapping. This approach enhances accessibility by reducing the likelihood of accidental taps and improving usability for individuals with mobility or vision impairments.
Both iOS and Android recommend touch targets for optimal usability. iOS suggests a minimum of 44x44 pixels, while Android suggests 48x48 dp, corresponding to a 9mm physical size. Android's varied pixel densities necessitate consideration for consistent user experience.
In accessibility, it's important to provide adequate spacing between text elements for readability. Recommendations include:
Some Playbook text examples can be found in the Typography Guidelines.
