Color
We use colors in Go to communicate meaning, express our platform brands, communicate status and feedback, and help vendors understand information.
Text colors
| Token | Sample | Value | Usage |
|---|---|---|---|
| color.text.default | #0e191a | Default color for text elements. | |
| color.text.inverse | #ffffff | For text over backgrounds of opposite contrast, e.g. light text over dark backgrounds. | |
| color.text.secondary | #5f6b6c | Less emphasized color for secondary texts, e.g. subtitles and captions. | |
| color.text.disabled | #a6b3b5 | Subtler color for disabled/inactive texts. | |
| color.text.branded | #e21b70 | Platform's brand color. Used as accent color to highlight texts. | |
| color.text.on-branded | #ffffff | For text over branded backgrounds. | |
| color.text.danger | #e20338 | For error, danger or failure texts. | |
| color.text.success | #26ae5f | For success messages and other positive texts. | |
| color.text.pickup | #4368c4 | For text elements related to Pickup orders. |
Action colors
| Token | Sample | Value | Usage |
|---|---|---|---|
| color.action.primary | #e21b70 | Primary color for buttons. | |
| color.action.primary-hover | #871043 | Hover state color for primary buttons. | |
| color.action.on-branded | #ffffff | For buttons over branded surfaces. | |
| color.action.secondary | rgba(226,27,112, 10%) | Border color for secondary buttons. | |
| color.action.secondary-hover | rgba(226,27,112, 24%) | Hover state border color for secondary buttons. | |
| color.action.danger | #e20338 | Default color for destructive actions, e.g. declining or cancelling orders. | |
| color.action.danger-hover | #af0005 | Hover state color for danger buttons. | |
| color.action.success | #26ae5f | Default color for positive actions such as accepting orders. | |
| color.action.success-hover | #025d2b | Hover state for success button. | |
| color.action.info | #5199ff | Standard color for order update actions, e.g. marking as ready or picked up. | |
| color.action.info-hover | #3d56a9 | Hover state for tertiary buttons. | |
| color.action.pickup | #4368c4 | Default color for Pickup-related buttons. | |
| color.action.pickup-hover | #3d56a9 | Hover state color for Pickup buttons. | |
| color.action.pickup-secondary | rgba(67,104,196, 10%) | Lighter shade of the Pickup color for secondary buttons. | |
| color.action.pickup-secondary-hover | rgba(67,104,196, 24%) | Hover state color for secondary Pickup actions. | |
| color.action.inverse | #ffffff | For actions over backgrounds of opposite contrast, e.g. actions over dark backgrounds. | |
| color.action.disabled | #ebeff0 | Background color for disabled buttons. |
Surface colors
| Token | Sample | Value | Usage |
|---|---|---|---|
| color.surface.default | #ffffff | Default background color for Go interfaces. | |
| color.surface.inverse | #0e191a | Background color of opposite contrast. | |
| color.surface.grey-normal | #f4f6f6 | Default grey color for component backgrounds and hover states. | |
| color.surface.grey-high | #ebeff0 | Medium-intensity grey for elements over normal grey surfaces. Also used as background for small elements. | |
| color.surface.grey-highest | #dce5e6 | Highest-intensity grey for elements over high grey surfaces. Also used as background for x-small elements. | |
| color.surface.branded | #e21b70 | Platform's background color for full-screen messages. | |
| color.surface.branded-low | rgba(226,27,112, 10%) | Platform's light background color for subtly branded backgrounds. | |
| color.surface.danger | #e20338 | Default color for full-screen failure messages. | |
| color.surface.success | #26ae5f | Default color for full-screen success messages. | |
| color.surface.overlay | rgba(14,25,26, 30%) | Default color for overlays. |
Icon colors
| Token | Sample | Value | Usage |
|---|---|---|---|
| color.icon.default | #0e191a | Default color for icons. | |
| color.icon.inverse | #ffffff | For icons over opposite-contrast backgrounds, such as over dark backgrounds. | |
| color.icon.secondary | #5f6b6c | Less emphasized color for secondary icons. | |
| color.icon.disabled | #a6b3b5 | Subtler color for disabled/inactive icons. | |
| color.icon.branded | #e21b70 | Platform's brand color. Used as accent color to highlight icons. | |
| color.icon.on-branded | #ffffff | For icons over branded backgrounds. | |
| color.icon.danger | #e20338 | For error, danger or failure icons. | |
| color.icon.success | #26ae5f | For success and other positive icons. |
Status colors
| Token | Sample | Value | Usage |
|---|---|---|---|
| color.status.branded | #e21b70 | Default color for notification badges and messaging components. | |
| color.status.danger | #e20338 | For 'Vendor Unavailable' and other critical status indicators. | |
| color.status.warning | #ffc030 | For 'Vendor Busy', 'Item Unavailable' and other warning status indicators. | |
| color.status.success | #26ae5f | For 'Vendor Open' and other success status indicators. | |
| color.status.information | #5199ff | For non-critical messaging components, e.g. 'New support message' toast. | |
| color.status.pickup | #4368c4 | Default color for Pickup type indicators. | |
| color.status.neutral | #869394 | For 'Item Unavailable' and other inactive status indicators. | |
| color.status.branded-low | rgba(226,27,112, 10%) | Default background color for notification components. | |
| color.status.danger-low | #ffebf0 | Default background color for error/failure messages. | |
| color.status.warning-low | #fff8e3 | Default background color for warning messages. | |
| color.status.success-low | #e7f5eb | Default background color for success messages. | |
| color.status.information-low | #e5f3ff | Default background color for information messages. | |
| color.status.neutral-low | #f4f6f6 | Default background color for neutral messages. |
Border colors
| Token | Sample | Value | Usage |
|---|---|---|---|
| color.border.normal | #ebeff0 | Default color for dividers and subtle component borders. | |
| color.border.high | #dce5e6 | For dividers over grey surfaces. | |
| color.border.highest | #a6b3b5 | For bordered components on hover. | |
| color.border.branded | #e21b70 | Branded border color for selected components, e.g. Tags. | |
| color.border.branded-low | rgba(226,27,112, 10%) | Lighter shade of the platform's color for subtle branded borders. |