Color
The color system is structured across three layers of abstraction: primitive, semantic and component tokens. This layered approach allows color decisions to scale across brands, themes and components while keeping usage consistent and predictable.
This section documents primitive and semantic color tokens. Component tokens are defined and documented within each individual component, where their context and usage are more explicit.
Primitive
Section titled “Primitive”Core tokens define the raw color values of the system.
They represent the foundational palette and do not carry any usage meaning on their own.
Core tokens should never be used directly in layouts or components.
They exist to:
- Centralise color values
- Enable theming and brand customisation
- Serve as the source of truth for semantic and component tokens
Neutral
Section titled “Neutral”--tng-color-neutral-black#000000--tng-color-neutral-white#ffffff--tng-color-neutral-black#000000--tng-color-neutral-white#ffffff--tng-color-grey-100#fbfbfc--tng-color-grey-200#f5f5f5--tng-color-grey-300#e4e4e4--tng-color-grey-400#e5e3e1--tng-color-grey-500#d4d2d1--tng-color-grey-600#a8aaac--tng-color-grey-700#999999--tng-color-grey-800#6c7073--tng-color-grey-900#666666--tng-color-grey-1000#4d4d4d--tng-color-grey-1100#333333--tng-color-grey-1200#282830--tng-color-grey-1300#1a1a1a--tng-color-grey-1400#15151b--tng-color-grey-100#fbfbfc--tng-color-grey-200#f5f5f5--tng-color-grey-300#e4e4e4--tng-color-grey-400#e5e3e1--tng-color-grey-500#d4d2d1--tng-color-grey-600#a8aaac--tng-color-grey-700#999999--tng-color-grey-800#6c7073--tng-color-grey-900#666666--tng-color-grey-1000#4d4d4d--tng-color-grey-1100#333333--tng-color-grey-1200#282830--tng-color-grey-1300#1a1a1a--tng-color-grey-1400#15151b--tng-color-blue-100#e9f4ff--tng-color-blue-200#c6e3ff--tng-color-blue-300#95c6ff--tng-color-blue-400#60a7ff--tng-color-blue-500#0072f0--tng-color-blue-600#001874--tng-color-blue-700#00004e--tng-color-blue-800#00001d--tng-color-blue-100#e9f4ff--tng-color-blue-200#c6e3ff--tng-color-blue-300#95c6ff--tng-color-blue-400#60a7ff--tng-color-blue-500#0072f0--tng-color-blue-600#001874--tng-color-blue-700#00004e--tng-color-blue-800#00001dCopper
Section titled “Copper”--tng-color-copper-100#f3e2da--tng-color-copper-200#e4bca9--tng-color-copper-300#d49677--tng-color-copper-400#c57046--tng-color-copper-500#905233--tng-color-copper-100#f3e2da--tng-color-copper-200#e4bca9--tng-color-copper-300#d49677--tng-color-copper-400#c57046--tng-color-copper-500#905233--tng-color-green-100#ebfaeb--tng-color-green-200#c9e7ca--tng-color-green-300#93f694--tng-color-green-400#6fd171--tng-color-green-500#4caf50--tng-color-green-600#208a2b--tng-color-green-700#006800--tng-color-green-800#004600--tng-color-green-100#ebfaeb--tng-color-green-200#c9e7ca--tng-color-green-300#93f694--tng-color-green-400#6fd171--tng-color-green-500#4caf50--tng-color-green-600#208a2b--tng-color-green-700#006800--tng-color-green-800#004600Indigo
Section titled “Indigo”--tng-color-indigo-100#e5e9ed--tng-color-indigo-200#ccd3db--tng-color-indigo-300#8899ac--tng-color-indigo-400#445e7c--tng-color-indigo-500#00244d--tng-color-indigo-600#001a38--tng-color-indigo-700#001834--tng-color-indigo-100#e5e9ed--tng-color-indigo-200#ccd3db--tng-color-indigo-300#8899ac--tng-color-indigo-400#445e7c--tng-color-indigo-500#00244d--tng-color-indigo-600#001a38--tng-color-indigo-700#001834--tng-color-red-100#fdaaaa--tng-color-red-200#fc7979--tng-color-red-300#fa4747--tng-color-red-400#ff0022--tng-color-red-500#d40605--tng-color-red-600#a40404--tng-color-red-700#720303--tng-color-red-800#410202--tng-color-red-100#fdaaaa--tng-color-red-200#fc7979--tng-color-red-300#fa4747--tng-color-red-400#ff0022--tng-color-red-500#d40605--tng-color-red-600#a40404--tng-color-red-700#720303--tng-color-red-800#410202Yellow
Section titled “Yellow”--tng-color-yellow-100#fff9e5--tng-color-yellow-200#fff4cc--tng-color-yellow-300#ffefb2--tng-color-yellow-400#ffe066--tng-color-yellow-500#e5b700--tng-color-yellow-600#cca300--tng-color-yellow-700#7f6600--tng-color-yellow-800#4c3d00--tng-color-yellow-100#fff9e5--tng-color-yellow-200#fff4cc--tng-color-yellow-300#ffefb2--tng-color-yellow-400#ffe066--tng-color-yellow-500#e5b700--tng-color-yellow-600#cca300--tng-color-yellow-700#7f6600--tng-color-yellow-800#4c3d00--tng-color-blur-blur-dark-25rgba(0, 0, 0, 0.25)--tng-color-blur-blur-dark-55rgba(0, 0, 0, 0.55)--tng-color-blur-blur-dark-65rgba(0, 0, 0, 0.65)--tng-color-blur-blur-dark-25rgba(0, 0, 0, 0.25)--tng-color-blur-blur-dark-55rgba(0, 0, 0, 0.55)--tng-color-blur-blur-dark-65rgba(0, 0, 0, 0.65)--tng-color-teal-bz4-x-bz4-x#003641--tng-color-teal-bz4-x-bz4-x-2#006d7a--tng-color-teal-bz4-x-bz4-x-3#328994--tng-color-teal-bz4-x-bz4-x#003641--tng-color-teal-bz4-x-bz4-x-2#006d7a--tng-color-teal-bz4-x-bz4-x-3#328994Energy
Section titled “Energy”--tng-color-energy-energy-a#fff200--tng-color-energy-energy-aa#bfd730--tng-color-energy-energy-aaa#50b848--tng-color-energy-energy-aaaa#00a651--tng-color-energy-energy-b#fdb913--tng-color-energy-energy-bright-a#00ff00--tng-color-energy-energy-bright-b#4dff00--tng-color-energy-energy-bright-c#b3ff00--tng-color-energy-energy-bright-d#ffff00--tng-color-energy-energy-bright-e#ffb300--tng-color-energy-energy-bright-f#ff4d00--tng-color-energy-energy-bright-g#ff0000--tng-color-energy-energy-c#f37021--tng-color-energy-energy-d#ed1c24--tng-color-energy-energy-e#ed1c24--tng-color-energy-energy-f#ed1c24--tng-color-energy-energy-g#ed1c24--tng-color-energy-energy-a#fff200--tng-color-energy-energy-aa#bfd730--tng-color-energy-energy-aaa#50b848--tng-color-energy-energy-aaaa#00a651--tng-color-energy-energy-b#fdb913--tng-color-energy-energy-bright-a#00ff00--tng-color-energy-energy-bright-b#4dff00--tng-color-energy-energy-bright-c#b3ff00--tng-color-energy-energy-bright-d#ffff00--tng-color-energy-energy-bright-e#ffb300--tng-color-energy-energy-bright-f#ff4d00--tng-color-energy-energy-bright-g#ff0000--tng-color-energy-energy-c#f37021--tng-color-energy-energy-d#ed1c24--tng-color-energy-energy-e#ed1c24--tng-color-energy-energy-f#ed1c24--tng-color-energy-energy-g#ed1c24Notification Red
Section titled “Notification Red”--tng-color-notification-red-100#ffeeec--tng-color-notification-red-200#ffd0c9--tng-color-notification-red-300#ff3333--tng-color-notification-red-400#cc0000--tng-color-notification-red-100#ffeeec--tng-color-notification-red-200#ffd0c9--tng-color-notification-red-300#ff3333--tng-color-notification-red-400#cc0000Opacity
Section titled “Opacity”--tng-color-opacity-dark-20rgba(0, 0, 0, 0.2)--tng-color-opacity-dark-25rgba(0, 0, 0, 0.25)--tng-color-opacity-dark-30rgba(0, 0, 0, 0.3)--tng-color-opacity-dark-35rgba(0, 0, 0, 0.35)--tng-color-opacity-dark-40rgba(0, 0, 0, 0.4)--tng-color-opacity-dark-45rgba(0, 0, 0, 0.45)--tng-color-opacity-dark-55rgba(0, 0, 0, 0.55)--tng-color-opacity-dark-65rgba(0, 0, 0, 0.65)--tng-color-opacity-light-0rgba(255, 255, 255, 0)--tng-color-opacity-light-20rgba(255, 255, 255, 0.2)--tng-color-opacity-light-30rgba(255, 255, 255, 0.3)--tng-color-opacity-light-35rgba(255, 255, 255, 0.35)--tng-color-opacity-light-45rgba(255, 255, 255, 0.45)--tng-color-opacity-light-50rgba(255, 255, 255, 0.5)--tng-color-opacity-dark-20rgba(0, 0, 0, 0.2)--tng-color-opacity-dark-25rgba(0, 0, 0, 0.25)--tng-color-opacity-dark-30rgba(0, 0, 0, 0.3)--tng-color-opacity-dark-35rgba(0, 0, 0, 0.35)--tng-color-opacity-dark-40rgba(0, 0, 0, 0.4)--tng-color-opacity-dark-45rgba(0, 0, 0, 0.45)--tng-color-opacity-dark-55rgba(0, 0, 0, 0.55)--tng-color-opacity-dark-65rgba(0, 0, 0, 0.65)--tng-color-opacity-light-0rgba(255, 255, 255, 0)--tng-color-opacity-light-20rgba(255, 255, 255, 0.2)--tng-color-opacity-light-30rgba(255, 255, 255, 0.3)--tng-color-opacity-light-35rgba(255, 255, 255, 0.35)--tng-color-opacity-light-45rgba(255, 255, 255, 0.45)--tng-color-opacity-light-50rgba(255, 255, 255, 0.5)Semantic Tokens
Section titled “Semantic Tokens”Semantic tokens map core colors to intent and purpose. They describe why a color exists, not what it looks like.
Semantic tokens are the primary interface between design and development and should be used in all layouts and components unless a component-specific token is required.
Semantic color tokens are organised into functional groups based on usage and context.
Background
Surface
Background
Section titled “Background”Background semantic tokens define colors used for page-level surfaces only. They establish the overall visual context of a page and should not be used for component backgrounds.
Variants (default, subtle, muted) represent different levels of visual weight to create hierarchy between page sections.
--tng-color-background-contrast-defaultPrimary dark background for pages that require high contrast, such as dark mode layouts or contexts where content must stand out clearly.#000000--tng-color-background-contrast-mutedA more subdued dark background for secondary areas in high-contrast layouts, providing hierarchy while preserving accessibility.#15151b--tng-color-background-contrast-subtleA softened dark background used for sections within high-contrast pages, maintaining cohesion without being as dominant as the default background.#1a1a1a--tng-color-background-neutral-defaultPrimary background color for pages that require a clean, distraction-free surface. Used as the main neutral foundation across layouts.#ffffff--tng-color-background-neutral-mutedA more pronounced neutral background for secondary areas that need clearer separation from the main page surface.#e5e3e1--tng-color-background-neutral-subtleA slightly contrasted neutral background used to differentiate sections within a page without adding strong visual weight.#f5f5f5--tng-color-background-contrast-defaultPrimary dark background for pages that require high contrast, such as dark mode layouts or contexts where content must stand out clearly.#282830--tng-color-background-contrast-mutedA more subdued dark background for secondary areas in high-contrast layouts, providing hierarchy while preserving accessibility.#15151b--tng-color-background-contrast-subtleA softened dark background used for sections within high-contrast pages, maintaining cohesion without being as dominant as the default background.#15151b--tng-color-background-neutral-defaultPrimary background color for pages that require a clean, distraction-free surface. Used as the main neutral foundation across layouts.#ffffff--tng-color-background-neutral-mutedA more pronounced neutral background for secondary areas that need clearer separation from the main page surface.#e5e3e1--tng-color-background-neutral-subtleA slightly contrasted neutral background used to differentiate sections within a page without adding strong visual weight.#e4e4e4Border
Section titled “Border”Border tokens define outlines and separators for components.
They follow the same semantic structure as fill and foreground, enabling consistent expression of hierarchy, brand emphasis and feedback.
Border-dim tokens provide opacity-based borders to soften visual separation without removing structural boundaries.
--tng-color-border-bz4x-defaultSecondary brand border used for complementary emphasis on component outlines.#003641--tng-color-border-bz4x-mutedMuted secondary border used for the least prominent brand expression.#328994--tng-color-border-bz4x-subtleSoft secondary border used for low-priority brand-related boundaries.#006d7a--tng-color-border-contrast-defaultStandard contrast border used to define component boundaries on dark or high-contrast surfaces.#e4e4e4--tng-color-border-contrast-emphasisHigh-contrast border used to strongly outline components in dark or high-contrast contexts.#ffffff--tng-color-border-contrast-mutedMuted contrast border used for minimal separation while maintaining visibility in dark themes.#6c7073--tng-color-border-contrast-subtleSoft contrast border used for secondary boundaries in dark contexts.#a8aaac--tng-color-border-dim-contrast-defaultA high-opacity contrast dimmed border used to apply opacity to component outlines in dark or high-contrast contexts while preserving visibility.
rgba(255, 255, 255, 0.5)--tng-color-border-dim-contrast-mutedA low-opacity contrast dimmed border used for minimal boundary definition in high-contrast themes.rgba(255, 255, 255, 0.2)--tng-color-border-dim-contrast-subtleA medium-opacity contrast dimmed border used to gently soften component boundaries in dark environments.rgba(255, 255, 255, 0.3)--tng-color-border-dim-neutral-defaultA high-opacity neutral dimmed border used to apply opacity to component outlines while maintaining clear separation.rgba(0, 0, 0, 0.65)--tng-color-border-dim-neutral-mutedA low-opacity neutral dimmed border used for the most subtle boundary definition with minimal visual impact.rgba(0, 0, 0, 0.25)--tng-color-border-dim-neutral-subtleA medium-opacity neutral dimmed border used to softly reduce the visual weight of component boundaries.rgba(0, 0, 0, 0.55)--tng-color-border-error-defaultError border used to outline components that require attention or indicate an issue.#cc0000--tng-color-border-error-mutedMuted error border used for minimal error emphasis.#ffd0c9--tng-color-border-error-subtleSoft error border used for lower-priority error indication.#ff3333--tng-color-border-ev-defaultEV-specific border color used to highlight or reference electric vehicle-related elements.#d49677--tng-color-border-focus-contrast-defaultHigh-contrast focus border used to indicate focus on components placed on dark or high-contrast backgrounds.#60a7ff--tng-color-border-focus-neutral-defaultNeutral focus border used to clearly indicate focus on components placed on neutral backgrounds.#0072f0--tng-color-border-info-defaultInformational border used to outline elements that provide guidance or contextual information.#001874--tng-color-border-info-mutedMuted info border used for the least prominent informational boundaries.#c6e3ff--tng-color-border-info-subtleSoft info border used for secondary informational emphasis.#0072f0--tng-color-border-neutral-defaultStandard neutral border used to define component edges and separate elements in a balanced, unobtrusive way.#282830--tng-color-border-neutral-emphasisHigh-emphasis neutral border used to strongly define component boundaries or highlight key elements.#000000--tng-color-border-neutral-mutedVery light neutral border used for the most subtle separation with minimal visual impact.#a8aaac--tng-color-border-neutral-subtleSoft neutral border used for low-priority boundaries or gentle separation between elements.#999999--tng-color-border-primary-defaultPrimary brand border used to highlight important components or reinforce brand presence.#15151b--tng-color-border-primary-mutedMuted primary border used for minimal brand emphasis on component boundaries.#6c7073--tng-color-border-primary-subtleSoft primary border used for secondary emphasis or supportive brand cues.#282830--tng-color-border-secondary-defaultSecondary brand border used for complementary emphasis on component outlines.#c57046--tng-color-border-secondary-mutedMuted secondary border used for the least prominent brand expression.#e4bca9--tng-color-border-secondary-subtleSoft secondary border used for low-priority brand-related boundaries.#d49677--tng-color-border-success-defaultSuccess border used to outline components associated with positive outcomes or confirmations.#006800--tng-color-border-success-mutedMuted success border used for minimal positive emphasis.#6fd171--tng-color-border-success-subtleSoft success border used for secondary positive indicators.#4caf50--tng-color-border-warning-defaultWarning border used to highlight elements that require caution or attention.#e5b700--tng-color-border-bz4x-defaultSecondary brand border used for complementary emphasis on component outlines.#003641--tng-color-border-bz4x-mutedMuted secondary border used for the least prominent brand expression.#328994--tng-color-border-bz4x-subtleSoft secondary border used for low-priority brand-related boundaries.#006d7a--tng-color-border-contrast-defaultStandard contrast border used to define component boundaries on dark or high-contrast surfaces.#e4e4e4--tng-color-border-contrast-emphasisHigh-contrast border used to strongly outline components in dark or high-contrast contexts.#ffffff--tng-color-border-contrast-mutedMuted contrast border used for minimal separation while maintaining visibility in dark themes.#6c7073--tng-color-border-contrast-subtleSoft contrast border used for secondary boundaries in dark contexts.#a8aaac--tng-color-border-dim-contrast-defaultA high-opacity contrast dimmed border used to apply opacity to component outlines in dark or high-contrast contexts while preserving visibility.
rgba(255, 255, 255, 0.45)--tng-color-border-dim-contrast-mutedA low-opacity contrast dimmed border used for minimal boundary definition in high-contrast themes.rgba(255, 255, 255, 0.2)--tng-color-border-dim-contrast-subtleA medium-opacity contrast dimmed border used to gently soften component boundaries in dark environments.rgba(255, 255, 255, 0.35)--tng-color-border-dim-neutral-defaultA high-opacity neutral dimmed border used to apply opacity to component outlines while maintaining clear separation.rgba(0, 0, 0, 0.65)--tng-color-border-dim-neutral-mutedA low-opacity neutral dimmed border used for the most subtle boundary definition with minimal visual impact.rgba(0, 0, 0, 0.25)--tng-color-border-dim-neutral-subtleA medium-opacity neutral dimmed border used to softly reduce the visual weight of component boundaries.rgba(0, 0, 0, 0.55)--tng-color-border-error-defaultError border used to outline components that require attention or indicate an issue.#cc0000--tng-color-border-error-mutedMuted error border used for minimal error emphasis.#ffd0c9--tng-color-border-error-subtleSoft error border used for lower-priority error indication.#ff3333--tng-color-border-ev-defaultEV-specific border color used to highlight or reference electric vehicle-related elements.#0072f0--tng-color-border-focus-contrast-defaultHigh-contrast focus border used to indicate focus on components placed on dark or high-contrast backgrounds.#60a7ff--tng-color-border-focus-neutral-defaultNeutral focus border used to clearly indicate focus on components placed on neutral backgrounds.#0072f0--tng-color-border-info-defaultInformational border used to outline elements that provide guidance or contextual information.#001874--tng-color-border-info-mutedMuted info border used for the least prominent informational boundaries.#c6e3ff--tng-color-border-info-subtleSoft info border used for secondary informational emphasis.#0072f0--tng-color-border-neutral-defaultStandard neutral border used to define component edges and separate elements in a balanced, unobtrusive way.#282830--tng-color-border-neutral-emphasisHigh-emphasis neutral border used to strongly define component boundaries or highlight key elements.#15151b--tng-color-border-neutral-mutedVery light neutral border used for the most subtle separation with minimal visual impact.#a8aaac--tng-color-border-neutral-subtleSoft neutral border used for low-priority boundaries or gentle separation between elements.#6c7073--tng-color-border-primary-defaultPrimary brand border used to highlight important components or reinforce brand presence.#ff0022--tng-color-border-primary-mutedMuted primary border used for minimal brand emphasis on component boundaries.#fdaaaa--tng-color-border-primary-subtleSoft primary border used for secondary emphasis or supportive brand cues.#fa4747--tng-color-border-secondary-defaultSecondary brand border used for complementary emphasis on component outlines.#003641--tng-color-border-secondary-mutedMuted secondary border used for the least prominent brand expression.#328994--tng-color-border-secondary-subtleSoft secondary border used for low-priority brand-related boundaries.#006d7a--tng-color-border-success-defaultSuccess border used to outline components associated with positive outcomes or confirmations.#006800--tng-color-border-success-mutedMuted success border used for minimal positive emphasis.#6fd171--tng-color-border-success-subtleSoft success border used for secondary positive indicators.#4caf50--tng-color-border-warning-defaultWarning border used to highlight elements that require caution or attention.#e5b700Fill tokens are used for filled UI elements such as buttons, chips, badges and decorative component areas.
They are grouped by intent:
- Neutral and contrast
- Brand (primary, secondary, model-specific)
- Feedback (success, error, warning, info)
Variants (emphasis, default, subtle, muted) control visual hierarchy.
Fill-dim tokens apply opacity to fill colors and should be used whenever reduced emphasis or transparency is required, instead of applying custom opacity values.
--tng-color-fill-bz4x-defaultMain BZ4X model color fill used for components that reference or highlight this specific vehicle.#003641--tng-color-fill-bz4x-mutedMuted BZ4X fill used to provide a very subtle reference to the vehicle color with minimal visual weight.#328994--tng-color-fill-bz4x-subtleSofter BZ4X fill for secondary UI elements that require a hint of the model’s identity.#006d7a--tng-color-fill-contrast-defaultStandard contrast fill for components in dark or high-contrast environments, providing clear separation from the background.#d4d2d1--tng-color-fill-contrast-emphasisHigh-contrast fill used for key elements in dark or high-contrast colors, ensuring maximum visibility and strong focus.#f5f5f5--tng-color-fill-contrast-mutedLow-contrast fill for minimal emphasis in dark themes, offering a very light layer of contrast.#333333--tng-color-fill-contrast-subtleA softened contrast fill for secondary surfaces in dark contexts, maintaining hierarchy without dominating.#4d4d4d--tng-color-fill-dim-contrast-defaultA high-opacity contrast dimmed fill used to apply opacity to components in dark or high-contrast themes while maintaining legibility.rgba(255, 255, 255, 0.45)--tng-color-fill-dim-contrast-mutedA low-opacity contrast dimmed fill used for minimal opacity application in high-contrast environments, preserving visibility of underlying elements.rgba(255, 255, 255, 0.2)--tng-color-fill-dim-contrast-subtleA medium-opacity contrast dimmed fill used to gently reduce visual emphasis in dark contexts without losing clarity.rgba(255, 255, 255, 0.35)--tng-color-fill-dim-neutral-defaultA high-opacity neutral dimmed fill used to apply opacity to components, reducing visual prominence while keeping the original color context.rgba(0, 0, 0, 0.65)--tng-color-fill-dim-neutral-mutedA low-opacity neutral dimmed fill used to apply the lightest level of opacity, allowing the underlying content to remain clearly visible.rgba(0, 0, 0, 0.25)--tng-color-fill-dim-neutral-subtleA medium-opacity neutral dimmed fill used to softly lower emphasis on components while preserving clarity and hierarchy.rgba(0, 0, 0, 0.55)--tng-color-fill-error-defaultPrimary error fill used to highlight critical states, validation errors or destructive actions.#cc0000--tng-color-fill-error-mutedMuted error fill used for the weakest form of error indication or contextual background hints.#ffeeec--tng-color-fill-error-subtleSoft error fill for low-priority alerts or inline validations that should not dominate the layout.#ffd0c9--tng-color-fill-info-defaultPrimary informational fill used for neutral alerts, guidance messages or contextual information.#001874--tng-color-fill-info-mutedMuted info fill used for the most subtle informational hints in the interface.#c6e3ff--tng-color-fill-info-subtleSoft info fill used for low-priority informational cues or background emphasis.#0072f0--tng-color-fill-neutral-defaultStandard neutral fill for components, used as the main background for elements like tags, chips or neutral buttons.#999999--tng-color-fill-neutral-emphasisHigh-emphasis neutral fill for components that need strong visual weight, such as active states or primary interactive surfaces.#4d4d4d--tng-color-fill-neutral-mutedVery light neutral fill used for the faintest component surfaces, offering minimal contrast and subtle separation.#f5f5f5--tng-color-fill-neutral-subtleSoft neutral fill for low-priority component areas or secondary states that require gentle contrast.#e5e3e1--tng-color-fill-primary-defaultPrimary brand fill used for main interactive elements such as primary buttons, active states and key CTAs.#001a38--tng-color-fill-primary-mutedMuted primary fill used for low-priority states, providing brand tone with minimal emphasis.#8899ac--tng-color-fill-primary-subtleA softer primary fill for secondary actions or supportive states that still require brand presence.#00244d--tng-color-fill-secondary-defaultSecondary brand fill used for complementary actions or components that sit below the primary hierarchy.#d49677--tng-color-fill-secondary-mutedLight secondary fill used for the most subtle brand-related surfaces in the component layer.#c57046--tng-color-fill-secondary-subtleA softened secondary fill for low-emphasis UI elements that require a gentle brand reference.#c57046--tng-color-fill-success-defaultPrimary success fill used for positive states, confirmations and completed actions.#006800--tng-color-fill-success-mutedVery subtle success fill used for the faintest positive feedback.#c9e7ca--tng-color-fill-success-subtleSoft success fill for low-emphasis positive indicators such as background hints or secondary confirmations.#93f694--tng-color-fill-warning-defaultPrimary warning fill used for caution states, risk alerts or elements requiring attention.#fff9e5--tng-color-fill-bz4x-defaultMain BZ4X model color fill used for components that reference or highlight this specific vehicle.#003641--tng-color-fill-bz4x-mutedMuted BZ4X fill used to provide a very subtle reference to the vehicle color with minimal visual weight.#328994--tng-color-fill-bz4x-subtleSofter BZ4X fill for secondary UI elements that require a hint of the model’s identity.#006d7a--tng-color-fill-contrast-defaultStandard contrast fill for components in dark or high-contrast environments, providing clear separation from the background.#e4e4e4--tng-color-fill-contrast-emphasisHigh-contrast fill used for key elements in dark or high-contrast colors, ensuring maximum visibility and strong focus.#ffffff--tng-color-fill-contrast-mutedLow-contrast fill for minimal emphasis in dark themes, offering a very light layer of contrast.#6c7073--tng-color-fill-contrast-subtleA softened contrast fill for secondary surfaces in dark contexts, maintaining hierarchy without dominating.#a8aaac--tng-color-fill-dim-contrast-defaultA high-opacity contrast dimmed fill used to apply opacity to components in dark or high-contrast themes while maintaining legibility.rgba(255, 255, 255, 0.45)--tng-color-fill-dim-contrast-mutedA low-opacity contrast dimmed fill used for minimal opacity application in high-contrast environments, preserving visibility of underlying elements.rgba(255, 255, 255, 0.2)--tng-color-fill-dim-contrast-subtleA medium-opacity contrast dimmed fill used to gently reduce visual emphasis in dark contexts without losing clarity.rgba(255, 255, 255, 0.35)--tng-color-fill-dim-neutral-defaultA high-opacity neutral dimmed fill used to apply opacity to components, reducing visual prominence while keeping the original color context.rgba(0, 0, 0, 0.65)--tng-color-fill-dim-neutral-mutedA low-opacity neutral dimmed fill used to apply the lightest level of opacity, allowing the underlying content to remain clearly visible.rgba(0, 0, 0, 0.25)--tng-color-fill-dim-neutral-subtleA medium-opacity neutral dimmed fill used to softly lower emphasis on components while preserving clarity and hierarchy.rgba(0, 0, 0, 0.55)--tng-color-fill-error-defaultPrimary error fill used to highlight critical states, validation errors or destructive actions.#cc0000--tng-color-fill-error-mutedMuted error fill used for the weakest form of error indication or contextual background hints.#ffeeec--tng-color-fill-error-subtleSoft error fill for low-priority alerts or inline validations that should not dominate the layout.#ffd0c9--tng-color-fill-info-defaultPrimary informational fill used for neutral alerts, guidance messages or contextual information.#001874--tng-color-fill-info-mutedMuted info fill used for the most subtle informational hints in the interface.#c6e3ff--tng-color-fill-info-subtleSoft info fill used for low-priority informational cues or background emphasis.#0072f0--tng-color-fill-neutral-defaultStandard neutral fill for components, used as the main background for elements like tags, chips or neutral buttons.#282830--tng-color-fill-neutral-emphasisHigh-emphasis neutral fill for components that need strong visual weight, such as active states or primary interactive surfaces.#000000--tng-color-fill-neutral-mutedVery light neutral fill used for the faintest component surfaces, offering minimal contrast and subtle separation.#a8aaac--tng-color-fill-neutral-subtleSoft neutral fill for low-priority component areas or secondary states that require gentle contrast.#6c7073--tng-color-fill-primary-defaultPrimary brand fill used for main interactive elements such as primary buttons, active states and key CTAs.#d40605--tng-color-fill-primary-mutedMuted primary fill used for low-priority states, providing brand tone with minimal emphasis.#fdaaaa--tng-color-fill-primary-subtleA softer primary fill for secondary actions or supportive states that still require brand presence.#fa4747--tng-color-fill-secondary-defaultSecondary brand fill used for complementary actions or components that sit below the primary hierarchy.#d40605--tng-color-fill-secondary-mutedLight secondary fill used for the most subtle brand-related surfaces in the component layer.#fdaaaa--tng-color-fill-secondary-subtleA softened secondary fill for low-emphasis UI elements that require a gentle brand reference.#fa4747--tng-color-fill-success-defaultPrimary success fill used for positive states, confirmations and completed actions.#006800--tng-color-fill-success-mutedVery subtle success fill used for the faintest positive feedback.#c9e7ca--tng-color-fill-success-subtleSoft success fill for low-emphasis positive indicators such as background hints or secondary confirmations.#93f694--tng-color-fill-warning-defaultPrimary warning fill used for caution states, risk alerts or elements requiring attention.#fff9e5Foreground
Section titled “Foreground”Foreground tokens define colors for text and icons.
They are separated by:
- Background context (neutral, contrast)
- Brand usage (primary on-neutral, primary on-contrast)
- Feedback intent (success, error, warning, info)
Hierarchy variants help maintain readability and accessibility across different surfaces.
--tng-color-foreground-contrast-defaultStandard contrast foreground color used for primary text and icons on dark or high-contrast surfaces.#fbfbfc--tng-color-foreground-contrast-emphasisHigh-contrast foreground color used for key text or icons in dark or high-contrast contexts.#ffffff--tng-color-foreground-contrast-mutedMuted contrast foreground used for low-priority text or icons while maintaining legibility.#666666--tng-color-foreground-contrast-subtleSoft contrast foreground used for secondary text or icons in dark contexts.#d4d2d1--tng-color-foreground-error-defaultError foreground color used for text or icons that communicate errors or critical issues.#cc0000--tng-color-foreground-error-mutedMuted error foreground used for low-emphasis error information.#ffd0c9--tng-color-foreground-error-subtleSoft error foreground used for secondary error messaging or less prominent indicators.#ff3333--tng-color-foreground-info-defaultInformational foreground color used for text or icons that provide neutral guidance or context.#001874--tng-color-foreground-info-mutedMuted info foreground used for the least prominent informational cues.#c6e3ff--tng-color-foreground-info-subtleSoft info foreground used for secondary informational content.#0072f0--tng-color-foreground-neutral-defaultStandard neutral foreground color used for primary text and icons across the interface.#333333--tng-color-foreground-neutral-emphasisHigh-emphasis neutral foreground color used for the most important text or icons, ensuring maximum readability and visual priority.#000000--tng-color-foreground-neutral-mutedVery light neutral foreground used for the least prominent text or icons, providing minimal visual emphasis.#999999--tng-color-foreground-neutral-subtleSoft neutral foreground used for secondary text or icons with lower visual priority.#4d4d4d--tng-color-foreground-primary-on-contrast-defaultPrimary brand foreground color used for text or icons on contrast or dark backgrounds, ensuring clear readability.#00244d--tng-color-foreground-primary-on-contrast-mutedMuted primary foreground used on contrast backgrounds for minimal brand emphasis while preserving legibility.#ccd3db--tng-color-foreground-primary-on-contrast-subtleSoftened primary foreground used on contrast backgrounds for secondary emphasis with less visual dominance.#8899ac--tng-color-foreground-primary-on-neutral-defaultPrimary brand foreground color used for text or icons on neutral backgrounds, providing standard brand emphasis and readability.#00244d--tng-color-foreground-primary-on-neutral-mutedMuted primary foreground used on neutral backgrounds for the lowest level of brand emphasis while remaining legible.#ccd3db--tng-color-foreground-primary-on-neutral-subtleSoftened primary foreground used on neutral backgrounds for secondary brand emphasis with reduced visual weight.#8899ac--tng-color-foreground-secondary-defaultSecondary brand foreground color used for text or icons that require less emphasis than primary but still reflect brand identity.#d49677--tng-color-foreground-secondary-mutedMuted secondary foreground used for the most subtle brand presence in text or iconography.#c57046--tng-color-foreground-secondary-subtleSoft secondary foreground used for lower-priority brand-related text or icons.#c57046--tng-color-foreground-success-defaultSuccess foreground color used for text or icons that communicate positive or successful outcomes.#006800--tng-color-foreground-success-mutedMuted success foreground used for minimal positive indication with low visual prominence.#6fd171--tng-color-foreground-success-subtleSoft success foreground used for secondary or supportive positive messaging.#4caf50--tng-color-foreground-warning-defaultWarning foreground color used for text or icons that require attention or indicate caution.#fff9e5--tng-color-foreground-contrast-defaultStandard contrast foreground color used for primary text and icons on dark or high-contrast surfaces.#fbfbfc--tng-color-foreground-contrast-emphasisHigh-contrast foreground color used for key text or icons in dark or high-contrast contexts.#ffffff--tng-color-foreground-contrast-mutedMuted contrast foreground used for low-priority text or icons while maintaining legibility.#e4e4e4--tng-color-foreground-contrast-subtleSoft contrast foreground used for secondary text or icons in dark contexts.#f5f5f5--tng-color-foreground-error-defaultError foreground color used for text or icons that communicate errors or critical issues.#cc0000--tng-color-foreground-error-mutedMuted error foreground used for low-emphasis error information.#ffd0c9--tng-color-foreground-error-subtleSoft error foreground used for secondary error messaging or less prominent indicators.#ff3333--tng-color-foreground-info-defaultInformational foreground color used for text or icons that provide neutral guidance or context.#001874--tng-color-foreground-info-mutedMuted info foreground used for the least prominent informational cues.#95c6ff--tng-color-foreground-info-subtleSoft info foreground used for secondary informational content.#0072f0--tng-color-foreground-neutral-defaultStandard neutral foreground color used for primary text and icons across the interface.#282830--tng-color-foreground-neutral-emphasisHigh-emphasis neutral foreground color used for the most important text or icons, ensuring maximum readability and visual priority.#15151b--tng-color-foreground-neutral-mutedVery light neutral foreground used for the least prominent text or icons, providing minimal visual emphasis.#a8aaac--tng-color-foreground-neutral-subtleSoft neutral foreground used for secondary text or icons with lower visual priority.#6c7073--tng-color-foreground-primary-on-contrast-defaultPrimary brand foreground color used for text or icons on contrast or dark backgrounds, ensuring clear readability.#d40605--tng-color-foreground-primary-on-contrast-mutedMuted primary foreground used on contrast backgrounds for minimal brand emphasis while preserving legibility.#fdaaaa--tng-color-foreground-primary-on-contrast-subtleSoftened primary foreground used on contrast backgrounds for secondary emphasis with less visual dominance.#ff0022--tng-color-foreground-primary-on-neutral-defaultPrimary brand foreground color used for text or icons on neutral backgrounds, providing standard brand emphasis and readability.#d40605--tng-color-foreground-primary-on-neutral-mutedMuted primary foreground used on neutral backgrounds for the lowest level of brand emphasis while remaining legible.#fdaaaa--tng-color-foreground-primary-on-neutral-subtleSoftened primary foreground used on neutral backgrounds for secondary brand emphasis with reduced visual weight.#ff0022--tng-color-foreground-secondary-defaultSecondary brand foreground color used for text or icons that require less emphasis than primary but still reflect brand identity.#003641--tng-color-foreground-secondary-mutedMuted secondary foreground used for the most subtle brand presence in text or iconography.#328994--tng-color-foreground-secondary-subtleSoft secondary foreground used for lower-priority brand-related text or icons.#006d7a--tng-color-foreground-success-defaultSuccess foreground color used for text or icons that communicate positive or successful outcomes.#006800--tng-color-foreground-success-mutedMuted success foreground used for minimal positive indication with low visual prominence.#6fd171--tng-color-foreground-success-subtleSoft success foreground used for secondary or supportive positive messaging.#4caf50--tng-color-foreground-warning-defaultWarning foreground color used for text or icons that require attention or indicate caution.#fff9e5Surface
Section titled “Surface”Surface tokens define solid background colors for component-level surfaces such as cards, panels, drawers or modals.
Surface-dim tokens are opacity-based variants of surface colors, used to introduce layering, depth or soft separation while preserving the underlying color context.
--tng-color-surface-contrast-defaultPrimary high-contrast surface color for components in dark or high-contrast themes. Used as the main surface for cards, inputs and panels in contrast contexts.#000000--tng-color-surface-contrast-errorHigh-contrast surface variant used to display error states in dark or contrast-heavy environments while preserving readability and accessibility.#ff0022--tng-color-surface-contrast-mutedA low-emphasis high-contrast surface used for secondary or nested component surfaces in dark contexts.
Not intended for page backgrounds.#00244d--tng-color-surface-contrast-subtleA softer high-contrast surface used for component-level surfaces that require hierarchy within dark or high-contrast layouts.
Not intended for page backgrounds.#1a1a1a--tng-color-surface-contrast-successHigh-contrast surface for success states in dark or high-contrast contexts, offering positive feedback with clear visibility.#6fd171--tng-color-surface-dim-contrast-defaultA high-contrast dimmed surface with medium opacity for overlays or elevated components in dark or contrast-heavy themes, ensuring separation while maintaining clarity.rgba(255, 255, 255, 0.45)--tng-color-surface-dim-contrast-mutedA low-opacity contrast surface that provides the most subtle dimming effect, used when only a slight layer of depth is required in high-contrast environments.rgba(255, 255, 255, 0.2)--tng-color-surface-dim-contrast-subtleA softer contrast dimmed surface used for secondary overlays where a lighter, less dominant separation is needed in dark contexts.rgba(255, 255, 255, 0.35)--tng-color-surface-dim-neutral-defaultA neutral surface with medium opacity used to create dimming layers over content, ideal for drawers, side panels or elevated components that require separation without fully obscuring the background.rgba(0, 0, 0, 0.65)--tng-color-surface-dim-neutral-mutedA low-opacity neutral surface used for the softest dimming effects, offering minimal visual interruption while still adding a perceptible layer of separation.rgba(0, 0, 0, 0.25)--tng-color-surface-dim-neutral-subtleA lighter neutral dimmed surface that adds gentle depth for secondary overlays or component states where the underlying content should remain more visible.rgba(0, 0, 0, 0.55)--tng-color-surface-neutral-defaultPrimary neutral surface color for components. Used as the main background for cards, panels, inputs and other UI elements.#ffffff--tng-color-surface-neutral-errorNeutral-toned surface used to highlight error states within components, providing clear visual feedback without overwhelming the layout.#ff0022--tng-color-surface-neutral-mutedA more pronounced neutral surface that helps differentiate nested or secondary component areas while maintaining a cohesive appearance.#e5e9ed--tng-color-surface-neutral-subtleA slightly lighter or softer neutral surface used to create gentle hierarchy within components or among grouped elements.#f5f5f5--tng-color-surface-neutral-successNeutral surface variant for success states, used to communicate positive feedback in components in a subtle, non-intrusive way.#006800--tng-color-surface-contrast-defaultPrimary high-contrast surface color for components in dark or high-contrast themes. Used as the main surface for cards, inputs and panels in contrast contexts.#000000--tng-color-surface-contrast-errorHigh-contrast surface variant used to display error states in dark or contrast-heavy environments while preserving readability and accessibility.#ff0022--tng-color-surface-contrast-mutedA low-emphasis high-contrast surface used for secondary or nested component surfaces in dark contexts.
Not intended for page backgrounds.#282830--tng-color-surface-contrast-subtleA softer high-contrast surface used for component-level surfaces that require hierarchy within dark or high-contrast layouts.
Not intended for page backgrounds.#282830--tng-color-surface-contrast-successHigh-contrast surface for success states in dark or high-contrast contexts, offering positive feedback with clear visibility.#6fd171--tng-color-surface-dim-contrast-defaultA high-contrast dimmed surface with medium opacity for overlays or elevated components in dark or contrast-heavy themes, ensuring separation while maintaining clarity.rgba(255, 255, 255, 0.45)--tng-color-surface-dim-contrast-mutedA low-opacity contrast surface that provides the most subtle dimming effect, used when only a slight layer of depth is required in high-contrast environments.rgba(255, 255, 255, 0.2)--tng-color-surface-dim-contrast-subtleA softer contrast dimmed surface used for secondary overlays where a lighter, less dominant separation is needed in dark contexts.rgba(255, 255, 255, 0.35)--tng-color-surface-dim-neutral-defaultA neutral surface with medium opacity used to create dimming layers over content, ideal for drawers, side panels or elevated components that require separation without fully obscuring the background.rgba(0, 0, 0, 0.65)--tng-color-surface-dim-neutral-mutedA low-opacity neutral surface used for the softest dimming effects, offering minimal visual interruption while still adding a perceptible layer of separation.rgba(0, 0, 0, 0.25)--tng-color-surface-dim-neutral-subtleA lighter neutral dimmed surface that adds gentle depth for secondary overlays or component states where the underlying content should remain more visible.rgba(0, 0, 0, 0.55)--tng-color-surface-neutral-defaultPrimary neutral surface color for components. Used as the main background for cards, panels, inputs and other UI elements.#ffffff--tng-color-surface-neutral-errorNeutral-toned surface used to highlight error states within components, providing clear visual feedback without overwhelming the layout.#ff0022--tng-color-surface-neutral-mutedA more pronounced neutral surface that helps differentiate nested or secondary component areas while maintaining a cohesive appearance.#e4e4e4--tng-color-surface-neutral-subtleA slightly lighter or softer neutral surface used to create gentle hierarchy within components or among grouped elements.#f5f5f5--tng-color-surface-neutral-successNeutral surface variant for success states, used to communicate positive feedback in components in a subtle, non-intrusive way.#006800- Never use core tokens directly in UI.
- Use semantic tokens based on intent, not appearance.
- Use background tokens only for page-level surfaces.
- Use dim variants instead of custom opacity values.
- Do not repurpose feedback tokens for non-feedback use cases.
- Component tokens should only be defined when semantic tokens are not expressive enough.