Tokens Reference (Light/Dark mode)
🔄 Status: Reference (Design Intent) + Implementation in Progress
Purpose: This page documents Design System color token mapping ( design intent) for Light/Dark modes. Important Note: SDK support may vary by platform/version.
Validate overrides on your target SDK version. Some tokens may behave differently until implementation is finalized.
Last updated: 11 Mar 2026.
Logic
Prizma uses 3-layer logic of tokenization for max color customization flexibility:
raw HEX values -> Primitive Tokens -> Semantic Tokens -> Component Tokens
Primitive define a raw value into a repeatable behavior. This token serves as the foundation and should never be used directly on code.
Semantic represent small, repeatable design decisions. Instead of using raw hex values, we refer to a 'semantic' token that gives general instructions into where it should be used.
Component are also semantic tokens, but they represent a specific repeatable design decision for a specific UI element. This makes it easy to differentiate & modify between tokens used in general places like backgrounds and more specific places like a button.
For further details check Tokens.
Component Tokens
| Component Token | 🌞 Light Mode Value Chain (Semantic -> Primitive) | 🌚 Dark Mode Value Chain (Semantic -> Primitive) | Resolved Light Value | Resolved Dark Value |
|---|---|---|---|---|
| Card.Surface.Primary | Surface.Neutral.800 -> Color.Gray.800 | Surface.Neutral.800 -> Color.Gray.100 | #262831 | #ebecef |
| Card.Text.Subtitle | Text.Body.500 (Secondary) -> Color.Gray.500 | Text.Body.500 (Secondary) -> Color.Gray.300 | #60667c | #a3a8b8 |
| Card.Text.Title | Surface.Neutral.100 -> Color.Gray.100 | Surface.Neutral.100 -> Color.Gray.800 | #ebecef | #262831 |
| Checkbox.Border.Default | Border.Neutral.400 -> Color.Gray.400 | Border.Neutral.400 -> Color.Gray.500 | #82879a | #60667c |
| Checkbox.Border.Disabled | Border.Neutral.400 -> Color.Gray.400 | Border.Neutral.400 -> Color.Gray.500 | #82879a | #60667c |
| Checkbox.Border.Negative | Border.Status.Negative -> Color.Negative.500 | Border.Status.Negative -> Color.Negative.400 | #e71111 | #ff5a5f |
| Checkbox.Icon.Default | Surface.Neutral.0 Static -> Color.Gray.0 | Surface.Neutral.0 Static -> Color.Gray.0 | #ffffff | #ffffff |
| Checkbox.Surface.Default | Surface.Neutral.50 -> Color.Gray.50 | Surface.Neutral.50 -> Color.Gray.900 | #fcfcfd | #14151a |
| Checkbox.Surface.Disabled | Surface.Neutral.400 -> Color.Gray.400 | Surface.Neutral.400 -> Color.Gray.500 | #82879a | #60667c |
| Checkbox.Surface.Selected | Surface.Brand.500 Static -> Color.Brand.500 | Surface.Brand.500 Static -> Color.Brand.500 | #006aff | #006aff |
| Checkbox.Text.Default | Text.Body.800 (Primary) -> Color.Gray.800 | Text.Body.800 (Primary) -> Color.Gray.50 | #262831 | #fcfcfd |
| Checkbox.Text.Disabled | Text.Body.500 (Secondary) -> Color.Gray.500 | Text.Body.500 (Secondary) -> Color.Gray.300 | #60667c | #a3a8b8 |
| Checkbox.Text.Negative | Text.Status.Negative -> Color.Negative.500 | Text.Status.Negative -> Color.Negative.400 | #e71111 | #ff5a5f |
| Countdown.Surface.Default | Surface.Neutral.900 Static -> Color.Gray.900 | Surface.Neutral.900 Static -> Color.Gray.900 | #14151a | #14151a |
| Countdown.Text.Default | Text.Body.0 Static -> Color.Gray.0 | Text.Body.0 Static -> Color.Gray.0 | #ffffff | #ffffff |
| Dropdown.Border.Default | Border.Neutral.400 -> Color.Gray.400 | Border.Neutral.400 -> Color.Gray.500 | #82879a | #60667c |
| Dropdown.Border.Disabled | Border.Neutral.100 -> Color.Gray.100 | Border.Neutral.100 -> Color.Gray.700 | #ebecef | #3a3e4b |
| Dropdown.Border.Focused | Border.Status.Focus -> Color.Focus.500 | Border.Status.Focus -> Color.Focus.400 | #006aff | #0099ff |
| Dropdown.Border.Negative | Border.Status.Negative -> Color.Negative.500 | Border.Status.Negative -> Color.Negative.400 | #e71111 | #ff5a5f |
| Dropdown.Icon.Negative | Icon.Status.Negative -> Color.Negative.500 | Icon.Status.Negative -> Color.Negative.400 | #e71111 | #ff5a5f |
| Dropdown.Icon.Neutral | Icon.Neutral.300 -> Color.Gray.300 | Icon.Neutral.300 -> Color.Gray.500 | #a3a8b8 | #60667c |
| Dropdown.Icon.Positive | Icon.Status.Positive -> Color.Positive.500 | Icon.Status.Positive -> Color.Positive.400 | #189f60 | #45b380 |
| Dropdown.Icon.Warning | Icon.Status.Warning -> Color.Warning.500 | Icon.Status.Warning -> Color.Warning.400 | #ff9900 | #ffb647 |
| Dropdown.Surface.Default | Surface.Neutral.50 -> Color.Gray.50 | Surface.Neutral.50 -> Color.Gray.900 | #fcfcfd | #14151a |
| Dropdown.Surface.Disabled | Surface.Neutral.100 -> Color.Gray.100 | Surface.Neutral.100 -> Color.Gray.800 | #ebecef | #262831 |
| Dropdown.Surface.Focused | Surface.Neutral.50 -> Color.Gray.50 | Surface.Neutral.50 -> Color.Gray.900 | #fcfcfd | #14151a |
| Dropdown.Surface.Negative | Surface.Neutral.50 -> Color.Gray.50 | Surface.Neutral.50 -> Color.Gray.900 | #fcfcfd | #14151a |
| Dropdown.Text.Helper.Default | Text.Body.800 (Primary) -> Color.Gray.800 | Text.Body.800 (Primary) -> Color.Gray.50 | #262831 | #fcfcfd |
| Dropdown.Text.Helper.Negative | Text.Status.Negative -> Color.Negative.500 | Text.Status.Negative -> Color.Negative.400 | #e71111 | #ff5a5f |
| Dropdown.Text.Input.Default | Text.Body.800 (Primary) -> Color.Gray.800 | Text.Body.800 (Primary) -> Color.Gray.50 | #262831 | #fcfcfd |
| Dropdown.Text.Input.Disabled | Text.Body.400 -> Color.Gray.400 | Text.Body.400 -> Color.Gray.500 | #82879a | #60667c |
| Dropdown.Text.Input.Placeholder | Text.Body.400 -> Color.Gray.400 | Text.Body.400 -> Color.Gray.500 | #82879a | #60667c |
| Dropdown.Text.Label.Default | Text.Body.800 (Primary) -> Color.Gray.800 | Text.Body.800 (Primary) -> Color.Gray.50 | #262831 | #fcfcfd |
| Input.Border.Default | Border.Neutral.400 -> Color.Gray.400 | Border.Neutral.400 -> Color.Gray.500 | #82879a | #60667c |
| Input.Border.Disabled | Border.Neutral.100 -> Color.Gray.100 | Border.Neutral.100 -> Color.Gray.700 | #ebecef | #3a3e4b |
| Input.Border.Focused | Border.Status.Focus -> Color.Focus.500 | Border.Status.Focus -> Color.Focus.400 | #006aff | #0099ff |
| Input.Border.Negative | Border.Status.Negative -> Color.Negative.500 | Border.Status.Negative -> Color.Negative.400 | #e71111 | #ff5a5f |
| Input.Icon.Negative | Icon.Status.Negative -> Color.Negative.500 | Icon.Status.Negative -> Color.Negative.400 | #e71111 | #ff5a5f |
| Input.Icon.Neutral | Icon.Neutral.300 -> Color.Gray.300 | Icon.Neutral.300 -> Color.Gray.500 | #a3a8b8 | #60667c |
| Input.Icon.Positive | Icon.Status.Positive -> Color.Positive.500 | Icon.Status.Positive -> Color.Positive.400 | #189f60 | #45b380 |
| Input.Icon.Warning | Icon.Status.Warning -> Color.Warning.500 | Icon.Status.Warning -> Color.Warning.400 | #ff9900 | #ffb647 |
| Input.Surface.Default | Surface.Neutral.50 -> Color.Gray.50 | Surface.Neutral.50 -> Color.Gray.900 | #fcfcfd | #14151a |
| Input.Surface.Disabled | Surface.Neutral.100 -> Color.Gray.100 | Surface.Neutral.100 -> Color.Gray.800 | #ebecef | #262831 |
| Input.Surface.Focused | Surface.Neutral.50 -> Color.Gray.50 | Surface.Neutral.50 -> Color.Gray.900 | #fcfcfd | #14151a |
| Input.Surface.Negative | Surface.Neutral.50 -> Color.Gray.50 | Surface.Neutral.50 -> Color.Gray.900 | #fcfcfd | #14151a |
| Input.Text.Field.Default | Text.Body.800 (Primary) -> Color.Gray.800 | Text.Body.800 (Primary) -> Color.Gray.50 | #262831 | #fcfcfd |
| Input.Text.Field.Disabled | Text.Body.400 -> Color.Gray.400 | Text.Body.400 -> Color.Gray.500 | #82879a | #60667c |
| Input.Text.Field.Placeholder | Text.Body.400 -> Color.Gray.400 | Text.Body.400 -> Color.Gray.500 | #82879a | #60667c |
| Input.Text.Helper.Default | Text.Body.800 (Primary) -> Color.Gray.800 | Text.Body.800 (Primary) -> Color.Gray.50 | #262831 | #fcfcfd |
| Input.Text.Helper.Negative | Text.Status.Negative -> Color.Negative.500 | Text.Status.Negative -> Color.Negative.400 | #e71111 | #ff5a5f |
| Input.Text.Label.Default | Text.Body.800 (Primary) -> Color.Gray.800 | Text.Body.800 (Primary) -> Color.Gray.50 | #262831 | #fcfcfd |
| Link.Default | Text.Link.Default -> Color.Brand.500 | Text.Link.Default -> Color.Brand.400 | #006aff | #3388ff |
| Link.Disabled | Text.Body.500 (Secondary) -> Color.Gray.500 | Text.Body.500 (Secondary) -> Color.Gray.300 | #60667c | #a3a8b8 |
| Link.Hover | Text.Body.800 (Primary) -> Color.Gray.800 | Text.Body.800 (Primary) -> Color.Gray.50 | #262831 | #fcfcfd |
| Link.Visited | Text.Link.Default -> Color.Brand.500 | Text.Link.Default -> Color.Brand.400 | #006aff | #3388ff |
| Radio button.Border.Default | Border.Neutral.400 -> Color.Gray.400 | Border.Neutral.400 -> Color.Gray.500 | #82879a | #60667c |
| Radio button.Border.Disabled | Border.Neutral.400 -> Color.Gray.400 | Border.Neutral.400 -> Color.Gray.500 | #82879a | #60667c |
| Radio button.Icon.Default | Surface.Neutral.0 Static -> Color.Gray.0 | Surface.Neutral.0 Static -> Color.Gray.0 | #ffffff | #ffffff |
| Radio button.Surface.Default | Surface.Neutral.50 -> Color.Gray.50 | Surface.Neutral.50 -> Color.Gray.900 | #fcfcfd | #14151a |
| Radio button.Surface.Disabled | Surface.Neutral.400 -> Color.Gray.400 | Surface.Neutral.400 -> Color.Gray.500 | #82879a | #60667c |
| Radio button.Surface.Selected | Surface.Brand.500 Static -> Color.Brand.500 | Surface.Brand.500 Static -> Color.Brand.500 | #006aff | #006aff |
| Radio button.Text.Default | Text.Body.800 (Primary) -> Color.Gray.800 | Text.Body.800 (Primary) -> Color.Gray.50 | #262831 | #fcfcfd |
| Radio button.Text.Disabled | Text.Body.500 Static (Secondary) -> Color.Gray.500 | Text.Body.500 Static (Secondary) -> Color.Gray.500 | #60667c | #60667c |
| Sheet.Action.Default | Text.Body.800 (Primary) -> Color.Gray.800 | Text.Body.800 (Primary) -> Color.Gray.50 | #262831 | #fcfcfd |
| Sheet.Action.Disabled | Text.Body.500 (Secondary) -> Color.Gray.500 | Text.Body.500 (Secondary) -> Color.Gray.300 | #60667c | #a3a8b8 |
| Sheet.Icon.Neutral | Icon.Neutral.800 -> Color.Gray.800 | Icon.Neutral.800 -> Color.Gray.100 | #262831 | #ebecef |
| Sheet.Item.Default | Surface.Neutral.0 -> Color.Gray.0 | Surface.Neutral.0 -> Color.Gray.1000 | #ffffff | #000000 |
| Sheet.Surface.Default | Surface.Neutral.0 -> Color.Gray.0 | Surface.Neutral.0 -> Color.Gray.1000 | #ffffff | #000000 |
| Snackbar.Border.Negative | Border.Status.Negative -> Color.Negative.500 | Border.Status.Negative -> Color.Negative.400 | #e71111 | #ff5a5f |
| Snackbar.Border.Neutral | Border.Brand.500 -> Color.Brand.500 | Border.Brand.500 -> Color.Brand.500 | #006aff | #006aff |
| Snackbar.Border.Positive | Border.Status.Positive Static -> Color.Positive.500 | Border.Status.Positive Static -> Color.Positive.500 | #189f60 | #189f60 |
| Snackbar.Border.Warning | Border.Status.Warning -> Color.Warning.500 | Border.Status.Warning -> Color.Warning.400 | #ff9900 | #ffb647 |
| Snackbar.Icon.Negative | Icon.Status.Negative -> Color.Negative.500 | Icon.Status.Negative -> Color.Negative.400 | #e71111 | #ff5a5f |
| Snackbar.Icon.Neutral | Icon.Brand.500 Static -> Color.Brand.500 | Icon.Brand.500 Static -> Color.Brand.500 | #006aff | #006aff |
| Snackbar.Icon.Positive | Icon.Status.Positive -> Color.Positive.500 | Icon.Status.Positive -> Color.Positive.400 | #189f60 | #45b380 |
| Snackbar.Icon.Warning | Icon.Status.Warning -> Color.Warning.500 | Icon.Status.Warning -> Color.Warning.400 | #ff9900 | #ffb647 |
| Snackbar.Surface.Negative | Surface.Status.Negative.50 -> Color.Negative.50 | Surface.Status.Negative.50 -> Color.Negative.950 | #fff0f0 | #240001 |
| Snackbar.Surface.Neutral | Surface.Brand.50 -> Color.Brand.50 | Surface.Brand.50 -> Color.Brand.900 | #e5f0ff | #21273b |
| Snackbar.Surface.Positive | Surface.Status.Positive.50 -> Color.Positive.50 | Surface.Status.Positive.50 -> Color.Positive.950 | #e4fbf0 | #03190e |
| Snackbar.Surface.Warning | Surface.Status.Warning.50 -> Color.Warning.50 | Surface.Status.Warning.50 -> Color.Warning.950 | #fff7eb | #271400 |
| Snackbar.Text.Negative | Text.Status.Negative -> Color.Negative.500 | Text.Status.Negative -> Color.Negative.400 | #e71111 | #ff5a5f |
| Snackbar.Text.Neutral | Text.Body.800 (Primary) -> Color.Gray.800 | Text.Body.800 (Primary) -> Color.Gray.50 | #262831 | #fcfcfd |
| Snackbar.Text.Positive | Text.Status.Positive -> Color.Positive.500 | Text.Status.Positive -> Color.Positive.500 | #189f60 | #189f60 |
| Snackbar.Text.Warning | Text.Status.Warning -> Color.Warning.500 | Text.Status.Warning -> Color.Warning.400 | #ff9900 | #ffb647 |
| Spinner.Surface.Primary | Surface.Brand.500 Static -> Color.Brand.500 | Surface.Brand.500 Static -> Color.Brand.500 | #006aff | #006aff |
| Spinner.Surface.Secondary | Surface.Brand.50 -> Color.Brand.50 | Surface.Brand.50 -> Color.Brand.900 | #e5f0ff | #21273b |
| Spinner.Text.Subtitle | Text.Body.500 (Secondary) -> Color.Gray.500 | Text.Body.500 (Secondary) -> Color.Gray.300 | #60667c | #a3a8b8 |
| Spinner.Text.Title | Text.Body.800 (Primary) -> Color.Gray.800 | Text.Body.800 (Primary) -> Color.Gray.50 | #262831 | #fcfcfd |
| Toggle-switch.Surface.Primary.Disabled | Surface.Neutral.200 -> Color.Gray.200 | Surface.Neutral.200 -> Color.Gray.700 | #c6c8d2 | #3a3e4b |
| Toggle-switch.Surface.Primary.Off | Surface.Neutral.400 -> Color.Gray.400 | Surface.Neutral.400 -> Color.Gray.500 | #82879a | #60667c |
| Toggle-switch.Surface.Primary.On | Surface.Brand.500 Static -> Color.Brand.500 | Surface.Brand.500 Static -> Color.Brand.500 | #006aff | #006aff |
| Toggle-switch.Surface.Secondary.Disabled | Surface.Neutral.300 -> Color.Gray.300 | Surface.Neutral.300 -> Color.Gray.500 | #a3a8b8 | #60667c |
| Toggle-switch.Surface.Secondary.Off | Surface.Neutral.0 Static -> Color.Gray.0 | Surface.Neutral.0 Static -> Color.Gray.0 | #ffffff | #ffffff |
| Toggle-switch.Surface.Secondary.On | Surface.Neutral.0 Static -> Color.Gray.0 | Surface.Neutral.0 Static -> Color.Gray.0 | #ffffff | #ffffff |
| Toggle-switch.Text.Default | Text.Body.800 (Primary) -> Color.Gray.800 | Text.Body.800 (Primary) -> Color.Gray.50 | #262831 | #fcfcfd |
| Toggle-switch.Text.Disabled | Text.Body.500 (Secondary) -> Color.Gray.500 | Text.Body.500 (Secondary) -> Color.Gray.300 | #60667c | #a3a8b8 |
| Toggle-switch.Text.Link | Text.Link.Default -> Color.Brand.500 | Text.Link.Default -> Color.Brand.400 | #006aff | #3388ff |
| Toggle-switch.Text.Negative | Text.Status.Negative -> Color.Negative.500 | Text.Status.Negative -> Color.Negative.400 | #e71111 | #ff5a5f |
| Tooltip.Surface.Neutral | Surface.Neutral.900 Static -> Color.Gray.900 | Surface.Neutral.900 Static -> Color.Gray.900 | #14151a | #14151a |
| Tooltip.Text.Neutral | Text.Body.0 Static -> Color.Gray.0 | Text.Body.0 Static -> Color.Gray.0 | #ffffff | #ffffff |
Semantic Tokens (Color Modes)
| Semantic Token | 🌞 Light Mode Value Chain (Primitive -> raw) |
🌚 Dark Mode Value Chain (Primitive -> raw) |
|---|---|---|
| Border.Brand.500 | Color.Brand.500 -> #006aff | Color.Brand.500 -> #006aff |
| Border.Brand.600 | Color.Brand.600 -> #0055cc | Color.Brand.400 -> #3388ff |
| Border.Neutral.100 | Color.Gray.100 -> #ebecef | Color.Gray.700 -> #3a3e4b |
| Border.Neutral.100 Static | Color.Gray.100 -> #ebecef | Color.Gray.100 -> #ebecef |
| Border.Neutral.200 | Color.Gray.200 -> #c6c8d2 | Color.Gray.600 -> #4d5264 |
| Border.Neutral.250 | Color.Gray.250 -> #b5b8c5 | Color.Gray.600 -> #4d5264 |
| Border.Neutral.300 | Color.Gray.300 -> #a3a8b8 | Color.Gray.500 -> #60667c |
| Border.Neutral.400 | Color.Gray.400 -> #82879a | Color.Gray.500 -> #60667c |
| Border.Neutral.500 | Color.Gray.500 -> #60667c | Color.Gray.300 -> #a3a8b8 |
| Border.Status.Focus | Color.Focus.500 -> #006aff | Color.Focus.400 -> #0099ff |
| Border.Status.Negative | Color.Negative.500 -> #e71111 | Color.Negative.400 -> #ff5a5f |
| Border.Status.Negative Static | Color.Negative.500 -> #e71111 | Color.Negative.500 -> #e71111 |
| Border.Status.Positive Static | Color.Positive.500 -> #189f60 | Color.Positive.500 -> #189f60 |
| Border.Status.Warning | Color.Warning.500 -> #ff9900 | Color.Warning.400 -> #ffb647 |
| Border.Status.Warning Static | Color.Warning.500 -> #ff9900 | Color.Warning.500 -> #ff9900 |
| Icon.Brand.500 Static | Color.Brand.500 -> #006aff | Color.Brand.500 -> #006aff |
| Icon.Neutral.0 | Color.Gray.0 -> #ffffff | Color.Gray.800 -> #262831 |
| Icon.Neutral.0 Static | Color.Gray.0 -> #ffffff | Color.Gray.0 -> #ffffff |
| Icon.Neutral.300 | Color.Gray.300 -> #a3a8b8 | Color.Gray.500 -> #60667c |
| Icon.Neutral.300 Static | Color.Gray.300 -> #a3a8b8 | Color.Gray.300 -> #a3a8b8 |
| Icon.Neutral.50 Static | Color.Gray.50 -> #fcfcfd | Color.Gray.50 -> #fcfcfd |
| Icon.Neutral.500 | Color.Gray.500 -> #60667c | Color.Gray.300 -> #a3a8b8 |
| Icon.Neutral.500 Static | Color.Gray.500 -> #60667c | Color.Gray.500 -> #60667c |
| Icon.Neutral.800 | Color.Gray.800 -> #262831 | Color.Gray.100 -> #ebecef |
| Icon.Status.Negative | Color.Negative.500 -> #e71111 | Color.Negative.400 -> #ff5a5f |
| Icon.Status.Positive | Color.Positive.500 -> #189f60 | Color.Positive.400 -> #45b380 |
| Icon.Status.Warning | Color.Warning.500 -> #ff9900 | Color.Warning.400 -> #ffb647 |
| Surface.Brand.50 | Color.Brand.50 -> #e5f0ff | Color.Brand.900 -> #21273b |
| Surface.Brand.500 Static | Color.Brand.500 -> #006aff | Color.Brand.500 -> #006aff |
| Surface.Brand.600 Static | Color.Brand.600 -> #0055cc | Color.Brand.600 -> #0055cc |
| Surface.Neutral.0 | Color.Gray.0 -> #ffffff | Color.Gray.1000 -> #000000 |
| Surface.Neutral.0 Static | Color.Gray.0 -> #ffffff | Color.Gray.0 -> #ffffff |
| Surface.Neutral.50 | Color.Gray.50 -> #fcfcfd | Color.Gray.900 -> #14151a |
| Surface.Neutral.100 | Color.Gray.100 -> #ebecef | Color.Gray.800 -> #262831 |
| Surface.Neutral.200 | Color.Gray.200 -> #c6c8d2 | Color.Gray.700 -> #3a3e4b |
| Surface.Neutral.300 | Color.Gray.300 -> #a3a8b8 | Color.Gray.600 -> #4d5264 |
| Surface.Neutral.400 | Color.Gray.400 -> #82879a | Color.Gray.500 -> #60667c |
| Surface.Neutral.800 | Color.Gray.800 -> #262831 | Color.Gray.100 -> #ebecef |
| Surface.Neutral.900 Static | Color.Gray.900 -> #14151a | Color.Gray.900 -> #14151a |
| Surface.Status.Negative.50 | Color.Negative.50 -> #fff0f0 | Color.Negative.950 -> #240001 |
| Surface.Status.Positive.50 | Color.Positive.50 -> #e4fbf0 | Color.Positive.950 -> #03190e |
| Surface.Status.Warning.50 | Color.Warning.50 -> #fff7eb | Color.Warning.950 -> #271400 |
| Text.Accent.Brand | Color.Brand.500 -> #006aff | Color.Brand.500 -> #006aff |
| Text.Body.0 Static | Color.Gray.0 -> #ffffff | Color.Gray.0 -> #ffffff |
| Text.Body.400 | Color.Gray.400 -> #82879a | Color.Gray.500 -> #60667c |
| Text.Body.500 (Secondary) | Color.Gray.500 -> #60667c | Color.Gray.300 -> #a3a8b8 |
| Text.Body.500 Static (Secondary) | Color.Gray.500 -> #60667c | Color.Gray.500 -> #60667c |
| Text.Body.800 (Primary) | Color.Gray.800 -> #262831 | Color.Gray.50 -> #fcfcfd |
| Text.Link.Default | Color.Brand.500 -> #006aff | Color.Brand.400 -> #3388ff |
| Text.Status.Negative | Color.Negative.500 -> #e71111 | Color.Negative.400 -> #ff5a5f |
| Text.Status.Positive | Color.Positive.500 -> #189f60 | Color.Positive.500 -> #189f60 |
| Text.Status.Warning | Color.Warning.500 -> #ff9900 | Color.Warning.400 -> #ffb647 |
Primitives (Color.*)
| Primitive Token | Raw Value | Color Preview |
|---|---|---|
| Color.Brand.50 | #e5f0ff | |
| Color.Brand.100 | #bfdfff | |
| Color.Brand.200 | #99ceff | |
| Color.Brand.300 | #66a6ff | |
| Color.Brand.400 | #3388ff | |
| Color.Brand.500 | #006aff | |
| Color.Brand.600 | #0055cc | |
| Color.Brand.900 | #21273b | |
| Color.Focus.400 | #0099ff | |
| Color.Focus.500 | #006aff | |
| Color.Gray.0 | #ffffff | |
| Color.Gray.0 80% | #ffffffcc | |
| Color.Gray.50 | #fcfcfd | |
| Color.Gray.100 | #ebecef | |
| Color.Gray.150 | #d9dae1 | |
| Color.Gray.200 | #c6c8d2 | |
| Color.Gray.250 | #b5b8c5 | |
| Color.Gray.300 | #a3a8b8 | |
| Color.Gray.400 | #82879a | |
| Color.Gray.500 | #60667c | |
| Color.Gray.600 | #4d5264 | |
| Color.Gray.700 | #3a3e4b | |
| Color.Gray.750 | #30333e | |
| Color.Gray.800 | #262831 | |
| Color.Gray.900 | #14151a | |
| Color.Gray.900 80% | #14151acc | |
| Color.Gray.1000 | #000000 | |
| Color.Gray.1000 80% | #000000cc | |
| Color.Negative.50 | #fff0f0 | |
| Color.Negative.400 | #ff5a5f | |
| Color.Negative.500 | #e71111 | |
| Color.Negative.950 | #240001 | |
| Color.Positive.50 | #e4fbf0 | |
| Color.Positive.400 | #45b380 | |
| Color.Positive.500 | #189f60 | |
| Color.Positive.750 | #0c5030 | |
| Color.Positive.950 | #03190e | |
| Color.Warning.50 | #fff7eb | |
| Color.Warning.400 | #ffb647 | |
| Color.Warning.500 | #ff9900 | |
| Color.Warning.750 | #523100 | |
| Color.Warning.950 | #271400 |