Shape
Shape tokens provide border radius values for UI elements. Use them to create consistent rounded corners across components, from sharp edges to fully rounded elements.
Usage Guidance
Shape tokens define border radius values for UI elements. Apply them to create consistent rounded corners across similar components.
Shape Tokens
Shape tokens are aliased to base size tokens to define border radius. Each token corresponds to a specific use case and component type.
Shape Tokens
| Token | Value | Size (px) | Usage |
|---|---|---|---|
shape.none | size.0 | 0px | No border radius |
shape.sm | size.50 | 4px | Small border radius for compact components |
shape.md | size.100 | 8px | Medium border radius for form components |
shape.lg | size.150 | 12px | Large border radius for content editors |
shape.xl | size.200 | 16px | Extra large for smaller cards |
shape.xxl | size.300 | 24px | Extra extra large for cards |
shape.xxxl | size.400 | 32px | Maximum for large elevated containers |
shape.full | size.75 * 100 | 999px | Full rounding for high-visibility components |
None
Value: size.0
No border radius. Use for full-width and background containers, fixed navigation containers such as headers and side-panels.
Small
Value: size.50
Small border radius for compact components. Used for pills, status indicators, and checkboxes.
Medium
Value: size.100
Medium border radius for form components and notifications. Used for inputs, toasts, tooltips, and snackbars.
Large
Value: size.150
Large border radius for content editors. Used for rich text editors.
Extra Large
Value: size.200
Extra large border radius for smaller cards and containers. Used for compact card components and smaller content containers.
Extra Extra Large
Value: size.300
Extra extra large border radius for cards and list items. Used for card components and large content containers.
Extra Extra Extra Large
Value: size.400
Maximum border radius for large elevated containers. Used for dialogs, modals, bottom sheets, and other elevated parent containers with substantial content.
Full
Value: size.75 * 100
Full rounding for high-visibility components intended to draw attention. Used for buttons, badges, status indicators, essential inputs, and border containers (not cards).
Using our Shapes
Do
- Apply the same border radius value to all corners of an element. This ensures the shape doesn’t get distorted.
- Choose shape tokens based on component type and use case. Follow the recommended usage for each token size.
Don’t
- Don’t combine different border radius values on the same element.
- Don’t use different values for different corners unless specifically required.
Web Examples
Javascript / Typescript
// styles.ts
import {system} from '@workday/canvas-tokens-web';
const styles = {
borderRadius: `var(${system.shape.xxl})`,
};CSS
// styles.css
@import '@workday/canvas-tokens-web/css/system/_variables.css';
.card {
border-radius: var(--cnvs-sys-shape-xxl);
}| Sample | CSS Variable | JS Variable | Value | Calculated Value | Pixel Value |
|---|---|---|---|---|---|
| --cnvs-sys-shape-zero | system. | 0rem | 0px | ||
| --cnvs-sys-shape-half | system. | 0rem | 0px | ||
| --cnvs-sys-shape-x1 | system. | 0rem | 0px | ||
| --cnvs-sys-shape-x1-half | system. | 0rem | 0px | ||
| --cnvs-sys-shape-x2 | system. | 0rem | 0px | ||
| --cnvs-sys-shape-x4 | system. | 0rem | 0px | ||
| --cnvs-sys-shape-x6 | system. | 0rem | 0px | ||
| --cnvs-sys-shape-round | system. | 0rem | 0px | ||
| --cnvs-sys-shape-none | system. | 0rem | 0px | ||
| --cnvs-sys-shape-sm | system. | 0rem | 0px | ||
| --cnvs-sys-shape-md | system. | 0rem | 0px | ||
| --cnvs-sys-shape-lg | system. | 0rem | 0px | ||
| --cnvs-sys-shape-xl | system. | 0rem | 0px | ||
| --cnvs-sys-shape-xxl | system. | 0rem | 0px | ||
| --cnvs-sys-shape-xxxl | system. | 0rem | 0px | ||
| --cnvs-sys-shape-full | 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.