This page provides a comprehensive overview of width tokens, ensuring that you can efficiently structure your design layouts with precision.
Width Tokens
Within this Style Guide, you’ll find a collection of carefully crafted width tokens, catering to both desktop and mobile breakpoints. These tokens are designed to simplify the process of defining and maintaining width values in your design, enhancing your workflow and ensuring a consistent design system.
The available width tokens include:
- Width XS
- Width S
- Width M
- Width L
- Width XL
- Width XXL
- Content width
Additionally, we provide a versatile “Width 50%” token, which represents 50% of the website width. This token offers flexibility when you need to create responsive designs that adapt seamlessly to various screen sizes.
Value Representation
For your convenience, each width token is accompanied by a precise numerical representation in pixels. These values serve as a quick reference for understanding the exact dimensions associated with each token.
Visual Representation
In addition to numerical values, visual representations are provided for each width token. These visual cues offer a clear visualization of how each width token impacts the layout of your design, making it easier to evaluate and select the most suitable width for your project.
Important Reminder
While this Style Guide offers valuable insights into width values and their visual impact, it’s essential to emphasise that direct modifications to width values should not be made on this page. Instead, we recommend adjusting width values through ACSS Width Tokens settings. This ensures that your width values remain consistent and aligned with your design system.
For detailed instructions on customizing width settings and harnessing the full potential of width tokens, please visit our dedicated documentation page on ACSS Tokens width settings.