Design Tokens
A comprehensive reference of all design tokens used throughout the Common Origin design system.
Text
| Token Name | Value | Usage | Example |
|---|---|---|---|
| color.text.default | #212529 | Primary text content | |
| color.text.emphasis | #343a40 | Important text that needs emphasis | |
| color.text.subdued | #495057 | Secondary or supporting text | |
| color.text.inverse | #ffffff | Text on dark backgrounds | |
| color.text.disabled | #6c757d | Disabled or inactive text | |
| color.text.interactive | #0265DC | Links and interactive text | |
| color.text.error | #D31510 | Error messages and validation | |
| color.text.success | #007A4D | Success messages and confirmations | |
| color.text.warning | #B14C00 | Warning messages and alerts |
Background
| Token Name | Value | Usage | Example |
|---|---|---|---|
| color.background.default | #f8f9fa | Default page background | |
| color.background.subtle | #ffffff | Card and component backgrounds | |
| color.background.emphasis | #212529 | High contrast backgrounds | |
| color.background.surface | #e9ecef | Elevated surface backgrounds | |
| color.background.inverse | #343a40 | Dark theme backgrounds | |
| color.background.interactive | #0265DC | Interactive elements like buttons | |
| color.background.interactive-subtle | #E0F2FF | Design token usage | |
| color.background.interactive-hover | #0054B6 | Hover state for interactive elements | |
| color.background.interactive-active | #004491 | Active/pressed state for interactive elements | |
| color.background.error | #D31510 | Error state backgrounds | |
| color.background.error-subtle | #FFEBE7 | Subtle error state backgrounds | |
| color.background.success | #007A4D | Success state backgrounds | |
| color.background.success-subtle | #CEF8E0 | Subtle success state backgrounds | |
| color.background.warning | #B14C00 | Warning state backgrounds | |
| color.background.warning-subtle | #FFECCC | Subtle warning state backgrounds | |
| color.background.disabled | #212529 | Disabled element backgrounds |
Border
| Token Name | Value | Usage | Example |
|---|---|---|---|
| color.border.default | #e9ecef | Standard borders and dividers | |
| color.border.subtle | #dee2e6 | Subtle borders and separators | |
| color.border.strong | #343a40 | Strong borders for emphasis | |
| color.border.interactive | #0265DC | Interactive element borders | |
| color.border.error | #D31510 | Error state borders | |
| color.border.success | #007A4D | Success state borders | |
| color.border.warning | #B14C00 | Warning state borders |
Icon
| Token Name | Value | Usage | Example |
|---|---|---|---|
| color.icon.default | #212529 | Standard icon color | |
| color.icon.emphasis | #343a40 | Important or emphasized icons | |
| color.icon.subdued | #6c757d | Secondary or supporting icons | |
| color.icon.disabled | #adb5bd | Disabled or inactive icons | |
| color.icon.inverse | #ffffff | Icons on dark backgrounds | |
| color.icon.interactive | #0265DC | Interactive icons and buttons | |
| color.icon.interactive-hover | #0054B6 | Design token usage | |
| color.icon.interactive-active | #004491 | Design token usage | |
| color.icon.error | #D31510 | Error state icons | |
| color.icon.success | #007A4D | Success state icons | |
| color.icon.warning | #B14C00 | Warning state icons |
Blue
| Token Name | Value | Example |
|---|---|---|
| color.blue.100 | #E0F2FF | |
| color.blue.200 | #CAE8FF | |
| color.blue.300 | #B5DEFF | |
| color.blue.400 | #96CEFD | |
| color.blue.500 | #78BBFA | |
| color.blue.600 | #59A7F6 | |
| color.blue.700 | #3892F3 | |
| color.blue.800 | #147AF3 | |
| color.blue.900 | #0265DC | |
| color.blue.1000 | #0054B6 | |
| color.blue.1100 | #004491 | |
| color.blue.1200 | #003571 | |
| color.blue.1300 | #002754 |
Neutral
| Token Name | Value | Example |
|---|---|---|
| color.neutral.100 | #f8f9fa | |
| color.neutral.200 | #e9ecef | |
| color.neutral.300 | #dee2e6 | |
| color.neutral.400 | #ced4da | |
| color.neutral.500 | #adb5bd | |
| color.neutral.600 | #6c757d | |
| color.neutral.700 | #495057 | |
| color.neutral.800 | #343a40 | |
| color.neutral.900 | #212529 | |
| color.neutral.1000 | #16191C | |
| color.neutral.000 | #ffffff |
Green
| Token Name | Value | Example |
|---|---|---|
| color.green.100 | #CEF8E0 | |
| color.green.200 | #ADF4CE | |
| color.green.300 | #89ECBC | |
| color.green.400 | #67DEA8 | |
| color.green.500 | #49CC93 | |
| color.green.600 | #2FB880 | |
| color.green.700 | #15A46E | |
| color.green.800 | #008F5D | |
| color.green.900 | #007A4D | |
| color.green.1000 | #00653E | |
| color.green.1100 | #005132 | |
| color.green.1200 | #053F27 | |
| color.green.1300 | #0A2E1D |
Orange
| Token Name | Value | Example |
|---|---|---|
| color.orange.100 | #FFECCC | |
| color.orange.200 | #FFDFAD | |
| color.orange.300 | #FDD291 | |
| color.orange.400 | #FFBB63 | |
| color.orange.500 | #FFA037 | |
| color.orange.600 | #F68511 | |
| color.orange.700 | #E46F00 | |
| color.orange.800 | #CB5D00 | |
| color.orange.900 | #B14C00 | |
| color.orange.1000 | #953D00 | |
| color.orange.1100 | #7A2F00 | |
| color.orange.1200 | #612300 | |
| color.orange.1300 | #491901 |
Red
| Token Name | Value | Example |
|---|---|---|
| color.red.100 | #FFEBE7 | |
| color.red.200 | #FFDDD6 | |
| color.red.300 | #FFCDC3 | |
| color.red.400 | #FFB7A9 | |
| color.red.500 | #FF9B88 | |
| color.red.600 | #FF7C65 | |
| color.red.700 | #F75C46 | |
| color.red.800 | #EA3829 | |
| color.red.900 | #D31510 | |
| color.red.1000 | #B40000 | |
| color.red.1100 | #930000 | |
| color.red.1200 | #740000 | |
| color.red.1300 | #590000 |