Design Tokens
A comprehensive reference of all design tokens used throughout the Common Origin design system.
Border
| Token Name | Value | Usage | Example |
|---|---|---|---|
| border.default | 0.0625rem solid #e9ecef | Standard component borders | Sample |
| border.subtle | 0.0625rem solid #dee2e6 | Subtle dividers and separators | Sample |
| border.strong | 0.0625rem solid #343a40 | Emphasized borders | Sample |
| border.focus | 0.125rem solid #343a40 | Focus indicators | Sample |
| border.tooltip | 0.125rem dotted #dee2e6 | Tooltip borders | Sample |
Border Radius
| Token Name | Value | Usage |
|---|---|---|
| border.radius.1 | 0.125rem | Border radius value |
| border.radius.2 | 0.25rem | Border radius value |
| border.radius.3 | 0.5rem | Border radius value |
| border.radius.4 | 0.75rem | Border radius value |
| border.radius.5 | 1rem | Border radius value |
| border.radius.6 | 1.5rem | Border radius value |
| border.radius.7 | 2rem | Border radius value |
| border.radius.circle | 10rem | Border radius value |
Border Width
| Token Name | Value | Usage |
|---|---|---|
| border.width.0 | 0 | Border width value |
| border.width.1 | 0.0625rem | Border width value |
| border.width.2 | 0.125rem | Border width value |
| border.width.3 | 0.1875rem | Border width value |
| border.width.4 | 0.25rem | Border width value |
| border.width.5 | 0.3125rem | Border width value |
| border.width.6 | 0.375rem | Border width value |
| border.width.8 | 0.5rem | Border width value |