Size
Size tokens provide width and height values for UI elements. Use them to create consistent component dimensions that align to the 8pt grid system.
Size tokens provide width and height values for UI elements. Use them to create consistent component dimensions that align to the 8pt grid system.
8pt Grid
Canvas’s spacing scale is built around a base unit of 8. This base unit is the foundation for all dimension-related tokens, including space, shape, size, font-size, and line-height. A baseline grid of 8 is built off the browser’s default font size of 16 to ensure consistent scaling and rhythm across viewports and devices.
Most components align to the 8pt grid. However, icons, text, and smaller UI elements (like Status Indicator) may use the 4pt grid instead.
Anatomy
- Category: Size represents a component’s height or width
- Size: T-shirt size used in the scale
- Value: Size tokens reference a base size token
Size Tokens
Size tokens control component dimensions. They’re typically applied to height but may be applied to width as well.
| Token | Value | Usage |
|---|---|---|
size.xxxs | size.200 | Switch toggle |
size.xxs | size.250 | Status Indicator, Count Badge |
size.xs | size.300 | Small Buttons, Pills, Checkbox, Radio |
size.sm | size.400 | Buttons, Segmented Control, Tooltip, Avatar |
size.md | size.500 | Default size. Buttons, Segmented Control, Banner, Input Fields, Menu List Items |
size.lg | size.600 | Large Buttons, Segmented Controls, Expandable Trigger, Tabs, Avatar |
size.xl | size.700 | Table Cell, Toast |
size.xxl | size.800 | Expandable container (not expanded) |
Extra Extra Small
Value: size.200
Compact toggle components. Used for switch toggles.
Extra Extra Small
Value: size.250
Compact indicators. Used for status indicators and count badges.
size.xs
Value: size.300
Compact interactive elements. Used for small buttons, pills, checkboxes, and radio buttons.
Small
Value: size.400
Standard interactive components. Used for buttons, segmented controls, tooltips, and avatars.
Medium
Value: size.500
Default size for most components. Used for buttons, segmented controls, banners, input fields, and menu list items.
Large
Value: size.600
Prominent components. Used for large buttons, segmented controls, expandable triggers, tabs, and avatars.
Extra Large
Value: size.700
Content containers. Used for table cells and toasts.
Extra Extra Large
Value: size.800
Expandable containers. Used for expandable containers in their collapsed state.
Using our Sizes
Use size tokens when applying to a componnet’s dimensions.
Size tokens are normally used on component heights, but may be applied to component widths as well.
Do
- Use size tokens to enforce fixed heights when a component needs a specific, consistent height regardless of content.
- Apply size tokens directly to the height or width property to ensure components align to the grid and maintain consistent visual rhythm.
- Component heights and widths generally use the 8pt baseline grid. Icons, typography, and smaller components (like Status Indicator) may use the 4pt grid instead.
- Use content-based heights when a component should expand or contract based on its content. These elements would not apply a size token, allowing for flexible layouts that accommodate varying amounts of text or elements.
Don’t
- Don’t use base size tokens directly on components. Use system size tokens instead.
- Don’t use system size tokens to control the space between or inside components. Use space tokens (padding, gap) instead.
- Don’t use size tokens for components that should expand based on content. Use content-based heights instead.
Web Examples
Javascript / Typescript
// styles.ts
import {system} from '@workday/canvas-tokens-web';
const styles = {
height: `var(${system.size.md})`,
width: `var(${system.size.lg})`,
};CSS
// styles.css
@import '@workday/canvas-tokens-web/css/system/_variables.css';
.button {
height: var(--cnvs-sys-size-md);
width: var(--cnvs-sys-size-lg);
}| Sample | CSS Variable | JS Variable | Value | Calculated Value | Pixel Value |
|---|---|---|---|---|---|
| --cnvs-sys-size-xxxs | system. | 0rem | 0px | ||
| --cnvs-sys-size-xxs | system. | 0rem | 0px | ||
| --cnvs-sys-size-xs | system. | 0rem | 0px | ||
| --cnvs-sys-size-sm | system. | 0rem | 0px | ||
| --cnvs-sys-size-md | system. | 0rem | 0px | ||
| --cnvs-sys-size-lg | system. | 0rem | 0px | ||
| --cnvs-sys-size-xl | system. | 0rem | 0px | ||
| --cnvs-sys-size-xxl | system. | 0rem | 0px |
iOS Examples
Coming soon!
Android Examples
Coming soon!
Can't Find What You Need?
Check out our FAQ section which may help you find the information you're looking for. For further information, contact the #ask-canvas-design or #ask-canvas-kitchannels on Slack.