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

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

--tng-color-neutral-black

#000000

--tng-color-neutral-white

#ffffff

--tng-color-neutral-black

#000000

--tng-color-neutral-white

#ffffff

Grey

--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

Blue

--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

#00001d

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

Green

--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

#004600

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

Red

--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

#410202

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

Blur

--tng-color-blur-blur-dark-25

rgba(0, 0, 0, 0.25)

--tng-color-blur-blur-dark-55

rgba(0, 0, 0, 0.55)

--tng-color-blur-blur-dark-65

rgba(0, 0, 0, 0.65)

--tng-color-blur-blur-dark-25

rgba(0, 0, 0, 0.25)

--tng-color-blur-blur-dark-55

rgba(0, 0, 0, 0.55)

--tng-color-blur-blur-dark-65

rgba(0, 0, 0, 0.65)

BZ4X

--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

#328994

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

#ed1c24

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

#cc0000

Opacity

--tng-color-opacity-dark-20

rgba(0, 0, 0, 0.2)

--tng-color-opacity-dark-25

rgba(0, 0, 0, 0.25)

--tng-color-opacity-dark-30

rgba(0, 0, 0, 0.3)

--tng-color-opacity-dark-35

rgba(0, 0, 0, 0.35)

--tng-color-opacity-dark-40

rgba(0, 0, 0, 0.4)

--tng-color-opacity-dark-45

rgba(0, 0, 0, 0.45)

--tng-color-opacity-dark-55

rgba(0, 0, 0, 0.55)

--tng-color-opacity-dark-65

rgba(0, 0, 0, 0.65)

--tng-color-opacity-light-0

rgba(255, 255, 255, 0)

--tng-color-opacity-light-20

rgba(255, 255, 255, 0.2)

--tng-color-opacity-light-30

rgba(255, 255, 255, 0.3)

--tng-color-opacity-light-35

rgba(255, 255, 255, 0.35)

--tng-color-opacity-light-45

rgba(255, 255, 255, 0.45)

--tng-color-opacity-light-50

rgba(255, 255, 255, 0.5)

--tng-color-opacity-dark-20

rgba(0, 0, 0, 0.2)

--tng-color-opacity-dark-25

rgba(0, 0, 0, 0.25)

--tng-color-opacity-dark-30

rgba(0, 0, 0, 0.3)

--tng-color-opacity-dark-35

rgba(0, 0, 0, 0.35)

--tng-color-opacity-dark-40

rgba(0, 0, 0, 0.4)

--tng-color-opacity-dark-45

rgba(0, 0, 0, 0.45)

--tng-color-opacity-dark-55

rgba(0, 0, 0, 0.55)

--tng-color-opacity-dark-65

rgba(0, 0, 0, 0.65)

--tng-color-opacity-light-0

rgba(255, 255, 255, 0)

--tng-color-opacity-light-20

rgba(255, 255, 255, 0.2)

--tng-color-opacity-light-30

rgba(255, 255, 255, 0.3)

--tng-color-opacity-light-35

rgba(255, 255, 255, 0.35)

--tng-color-opacity-light-45

rgba(255, 255, 255, 0.45)

--tng-color-opacity-light-50

rgba(255, 255, 255, 0.5)

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

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-default Primary 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-muted A more subdued dark background for secondary areas in high-contrast layouts, providing hierarchy while preserving accessibility.

#15151b

--tng-color-background-contrast-subtle A 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-default Primary background color for pages that require a clean, distraction-free surface. Used as the main neutral foundation across layouts.

#ffffff

--tng-color-background-neutral-muted A more pronounced neutral background for secondary areas that need clearer separation from the main page surface.

#e5e3e1

--tng-color-background-neutral-subtle A slightly contrasted neutral background used to differentiate sections within a page without adding strong visual weight.

#f5f5f5

--tng-color-background-contrast-default Primary 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-muted A more subdued dark background for secondary areas in high-contrast layouts, providing hierarchy while preserving accessibility.

#15151b

--tng-color-background-contrast-subtle A 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-default Primary background color for pages that require a clean, distraction-free surface. Used as the main neutral foundation across layouts.

#ffffff

--tng-color-background-neutral-muted A more pronounced neutral background for secondary areas that need clearer separation from the main page surface.

#e5e3e1

--tng-color-background-neutral-subtle A slightly contrasted neutral background used to differentiate sections within a page without adding strong visual weight.

#e4e4e4

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-default Secondary brand border used for complementary emphasis on component outlines.

#003641

--tng-color-border-bz4x-muted Muted secondary border used for the least prominent brand expression.

#328994

--tng-color-border-bz4x-subtle Soft secondary border used for low-priority brand-related boundaries.

#006d7a

--tng-color-border-contrast-default Standard contrast border used to define component boundaries on dark or high-contrast surfaces.

#e4e4e4

--tng-color-border-contrast-emphasis High-contrast border used to strongly outline components in dark or high-contrast contexts.

#ffffff

--tng-color-border-contrast-muted Muted contrast border used for minimal separation while maintaining visibility in dark themes.

#6c7073

--tng-color-border-contrast-subtle Soft contrast border used for secondary boundaries in dark contexts.

#a8aaac

--tng-color-border-dim-contrast-default A 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-muted A 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-subtle A 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-default A 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-muted A 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-subtle A 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-default Error border used to outline components that require attention or indicate an issue.

#cc0000

--tng-color-border-error-muted Muted error border used for minimal error emphasis.

#ffd0c9

--tng-color-border-error-subtle Soft error border used for lower-priority error indication.

#ff3333

--tng-color-border-ev-default EV-specific border color used to highlight or reference electric vehicle-related elements.

#d49677

--tng-color-border-focus-contrast-default High-contrast focus border used to indicate focus on components placed on dark or high-contrast backgrounds.

#60a7ff

--tng-color-border-focus-neutral-default Neutral focus border used to clearly indicate focus on components placed on neutral backgrounds.

#0072f0

--tng-color-border-info-default Informational border used to outline elements that provide guidance or contextual information.

#001874

--tng-color-border-info-muted Muted info border used for the least prominent informational boundaries.

#c6e3ff

--tng-color-border-info-subtle Soft info border used for secondary informational emphasis.

#0072f0

--tng-color-border-neutral-default Standard neutral border used to define component edges and separate elements in a balanced, unobtrusive way.

#282830

--tng-color-border-neutral-emphasis High-emphasis neutral border used to strongly define component boundaries or highlight key elements.

#000000

--tng-color-border-neutral-muted Very light neutral border used for the most subtle separation with minimal visual impact.

#a8aaac

--tng-color-border-neutral-subtle Soft neutral border used for low-priority boundaries or gentle separation between elements.

#999999

--tng-color-border-primary-default Primary brand border used to highlight important components or reinforce brand presence.

#15151b

--tng-color-border-primary-muted Muted primary border used for minimal brand emphasis on component boundaries.

#6c7073

--tng-color-border-primary-subtle Soft primary border used for secondary emphasis or supportive brand cues.

#282830

--tng-color-border-secondary-default Secondary brand border used for complementary emphasis on component outlines.

#c57046

--tng-color-border-secondary-muted Muted secondary border used for the least prominent brand expression.

#e4bca9

--tng-color-border-secondary-subtle Soft secondary border used for low-priority brand-related boundaries.

#d49677

--tng-color-border-success-default Success border used to outline components associated with positive outcomes or confirmations.

#006800

--tng-color-border-success-muted Muted success border used for minimal positive emphasis.

#6fd171

--tng-color-border-success-subtle Soft success border used for secondary positive indicators.

#4caf50

--tng-color-border-warning-default Warning border used to highlight elements that require caution or attention.

#e5b700

--tng-color-border-bz4x-default Secondary brand border used for complementary emphasis on component outlines.

#003641

--tng-color-border-bz4x-muted Muted secondary border used for the least prominent brand expression.

#328994

--tng-color-border-bz4x-subtle Soft secondary border used for low-priority brand-related boundaries.

#006d7a

--tng-color-border-contrast-default Standard contrast border used to define component boundaries on dark or high-contrast surfaces.

#e4e4e4

--tng-color-border-contrast-emphasis High-contrast border used to strongly outline components in dark or high-contrast contexts.

#ffffff

--tng-color-border-contrast-muted Muted contrast border used for minimal separation while maintaining visibility in dark themes.

#6c7073

--tng-color-border-contrast-subtle Soft contrast border used for secondary boundaries in dark contexts.

#a8aaac

--tng-color-border-dim-contrast-default A 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-muted A 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-subtle A 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-default A 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-muted A 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-subtle A 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-default Error border used to outline components that require attention or indicate an issue.

#cc0000

--tng-color-border-error-muted Muted error border used for minimal error emphasis.

#ffd0c9

--tng-color-border-error-subtle Soft error border used for lower-priority error indication.

#ff3333

--tng-color-border-ev-default EV-specific border color used to highlight or reference electric vehicle-related elements.

#0072f0

--tng-color-border-focus-contrast-default High-contrast focus border used to indicate focus on components placed on dark or high-contrast backgrounds.

#60a7ff

--tng-color-border-focus-neutral-default Neutral focus border used to clearly indicate focus on components placed on neutral backgrounds.

#0072f0

--tng-color-border-info-default Informational border used to outline elements that provide guidance or contextual information.

#001874

--tng-color-border-info-muted Muted info border used for the least prominent informational boundaries.

#c6e3ff

--tng-color-border-info-subtle Soft info border used for secondary informational emphasis.

#0072f0

--tng-color-border-neutral-default Standard neutral border used to define component edges and separate elements in a balanced, unobtrusive way.

#282830

--tng-color-border-neutral-emphasis High-emphasis neutral border used to strongly define component boundaries or highlight key elements.

#15151b

--tng-color-border-neutral-muted Very light neutral border used for the most subtle separation with minimal visual impact.

#a8aaac

--tng-color-border-neutral-subtle Soft neutral border used for low-priority boundaries or gentle separation between elements.

#6c7073

--tng-color-border-primary-default Primary brand border used to highlight important components or reinforce brand presence.

#ff0022

--tng-color-border-primary-muted Muted primary border used for minimal brand emphasis on component boundaries.

#fdaaaa

--tng-color-border-primary-subtle Soft primary border used for secondary emphasis or supportive brand cues.

#fa4747

--tng-color-border-secondary-default Secondary brand border used for complementary emphasis on component outlines.

#003641

--tng-color-border-secondary-muted Muted secondary border used for the least prominent brand expression.

#328994

--tng-color-border-secondary-subtle Soft secondary border used for low-priority brand-related boundaries.

#006d7a

--tng-color-border-success-default Success border used to outline components associated with positive outcomes or confirmations.

#006800

--tng-color-border-success-muted Muted success border used for minimal positive emphasis.

#6fd171

--tng-color-border-success-subtle Soft success border used for secondary positive indicators.

#4caf50

--tng-color-border-warning-default Warning border used to highlight elements that require caution or attention.

#e5b700

Fill

Fill 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-default Main BZ4X model color fill used for components that reference or highlight this specific vehicle.

#003641

--tng-color-fill-bz4x-muted Muted BZ4X fill used to provide a very subtle reference to the vehicle color with minimal visual weight.

#328994

--tng-color-fill-bz4x-subtle Softer BZ4X fill for secondary UI elements that require a hint of the model’s identity.

#006d7a

--tng-color-fill-contrast-default Standard contrast fill for components in dark or high-contrast environments, providing clear separation from the background.

#d4d2d1

--tng-color-fill-contrast-emphasis High-contrast fill used for key elements in dark or high-contrast colors, ensuring maximum visibility and strong focus.

#f5f5f5

--tng-color-fill-contrast-muted Low-contrast fill for minimal emphasis in dark themes, offering a very light layer of contrast.

#333333

--tng-color-fill-contrast-subtle A softened contrast fill for secondary surfaces in dark contexts, maintaining hierarchy without dominating.

#4d4d4d

--tng-color-fill-dim-contrast-default A 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-muted A 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-subtle A 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-default A 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-muted A 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-subtle A 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-default Primary error fill used to highlight critical states, validation errors or destructive actions.

#cc0000

--tng-color-fill-error-muted Muted error fill used for the weakest form of error indication or contextual background hints.

#ffeeec

--tng-color-fill-error-subtle Soft error fill for low-priority alerts or inline validations that should not dominate the layout.

#ffd0c9

--tng-color-fill-info-default Primary informational fill used for neutral alerts, guidance messages or contextual information.

#001874

--tng-color-fill-info-muted Muted info fill used for the most subtle informational hints in the interface.

#c6e3ff

--tng-color-fill-info-subtle Soft info fill used for low-priority informational cues or background emphasis.

#0072f0

--tng-color-fill-neutral-default Standard neutral fill for components, used as the main background for elements like tags, chips or neutral buttons.

#999999

--tng-color-fill-neutral-emphasis High-emphasis neutral fill for components that need strong visual weight, such as active states or primary interactive surfaces.

#4d4d4d

--tng-color-fill-neutral-muted Very light neutral fill used for the faintest component surfaces, offering minimal contrast and subtle separation.

#f5f5f5

--tng-color-fill-neutral-subtle Soft neutral fill for low-priority component areas or secondary states that require gentle contrast.

#e5e3e1

--tng-color-fill-primary-default Primary brand fill used for main interactive elements such as primary buttons, active states and key CTAs.

#001a38

--tng-color-fill-primary-muted Muted primary fill used for low-priority states, providing brand tone with minimal emphasis.

#8899ac

--tng-color-fill-primary-subtle A softer primary fill for secondary actions or supportive states that still require brand presence.

#00244d

--tng-color-fill-secondary-default Secondary brand fill used for complementary actions or components that sit below the primary hierarchy.

#d49677

--tng-color-fill-secondary-muted Light secondary fill used for the most subtle brand-related surfaces in the component layer.

#c57046

--tng-color-fill-secondary-subtle A softened secondary fill for low-emphasis UI elements that require a gentle brand reference.

#c57046

--tng-color-fill-success-default Primary success fill used for positive states, confirmations and completed actions.

#006800

--tng-color-fill-success-muted Very subtle success fill used for the faintest positive feedback.

#c9e7ca

--tng-color-fill-success-subtle Soft success fill for low-emphasis positive indicators such as background hints or secondary confirmations.

#93f694

--tng-color-fill-warning-default Primary warning fill used for caution states, risk alerts or elements requiring attention.

#fff9e5

--tng-color-fill-bz4x-default Main BZ4X model color fill used for components that reference or highlight this specific vehicle.

#003641

--tng-color-fill-bz4x-muted Muted BZ4X fill used to provide a very subtle reference to the vehicle color with minimal visual weight.

#328994

--tng-color-fill-bz4x-subtle Softer BZ4X fill for secondary UI elements that require a hint of the model’s identity.

#006d7a

--tng-color-fill-contrast-default Standard contrast fill for components in dark or high-contrast environments, providing clear separation from the background.

#e4e4e4

--tng-color-fill-contrast-emphasis High-contrast fill used for key elements in dark or high-contrast colors, ensuring maximum visibility and strong focus.

#ffffff

--tng-color-fill-contrast-muted Low-contrast fill for minimal emphasis in dark themes, offering a very light layer of contrast.

#6c7073

--tng-color-fill-contrast-subtle A softened contrast fill for secondary surfaces in dark contexts, maintaining hierarchy without dominating.

#a8aaac

--tng-color-fill-dim-contrast-default A 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-muted A 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-subtle A 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-default A 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-muted A 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-subtle A 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-default Primary error fill used to highlight critical states, validation errors or destructive actions.

#cc0000

--tng-color-fill-error-muted Muted error fill used for the weakest form of error indication or contextual background hints.

#ffeeec

--tng-color-fill-error-subtle Soft error fill for low-priority alerts or inline validations that should not dominate the layout.

#ffd0c9

--tng-color-fill-info-default Primary informational fill used for neutral alerts, guidance messages or contextual information.

#001874

--tng-color-fill-info-muted Muted info fill used for the most subtle informational hints in the interface.

#c6e3ff

--tng-color-fill-info-subtle Soft info fill used for low-priority informational cues or background emphasis.

#0072f0

--tng-color-fill-neutral-default Standard neutral fill for components, used as the main background for elements like tags, chips or neutral buttons.

#282830

--tng-color-fill-neutral-emphasis High-emphasis neutral fill for components that need strong visual weight, such as active states or primary interactive surfaces.

#000000

--tng-color-fill-neutral-muted Very light neutral fill used for the faintest component surfaces, offering minimal contrast and subtle separation.

#a8aaac

--tng-color-fill-neutral-subtle Soft neutral fill for low-priority component areas or secondary states that require gentle contrast.

#6c7073

--tng-color-fill-primary-default Primary brand fill used for main interactive elements such as primary buttons, active states and key CTAs.

#d40605

--tng-color-fill-primary-muted Muted primary fill used for low-priority states, providing brand tone with minimal emphasis.

#fdaaaa

--tng-color-fill-primary-subtle A softer primary fill for secondary actions or supportive states that still require brand presence.

#fa4747

--tng-color-fill-secondary-default Secondary brand fill used for complementary actions or components that sit below the primary hierarchy.

#d40605

--tng-color-fill-secondary-muted Light secondary fill used for the most subtle brand-related surfaces in the component layer.

#fdaaaa

--tng-color-fill-secondary-subtle A softened secondary fill for low-emphasis UI elements that require a gentle brand reference.

#fa4747

--tng-color-fill-success-default Primary success fill used for positive states, confirmations and completed actions.

#006800

--tng-color-fill-success-muted Very subtle success fill used for the faintest positive feedback.

#c9e7ca

--tng-color-fill-success-subtle Soft success fill for low-emphasis positive indicators such as background hints or secondary confirmations.

#93f694

--tng-color-fill-warning-default Primary warning fill used for caution states, risk alerts or elements requiring attention.

#fff9e5

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-default Standard contrast foreground color used for primary text and icons on dark or high-contrast surfaces.

#fbfbfc

--tng-color-foreground-contrast-emphasis High-contrast foreground color used for key text or icons in dark or high-contrast contexts.

#ffffff

--tng-color-foreground-contrast-muted Muted contrast foreground used for low-priority text or icons while maintaining legibility.

#666666

--tng-color-foreground-contrast-subtle Soft contrast foreground used for secondary text or icons in dark contexts.

#d4d2d1

--tng-color-foreground-error-default Error foreground color used for text or icons that communicate errors or critical issues.

#cc0000

--tng-color-foreground-error-muted Muted error foreground used for low-emphasis error information.

#ffd0c9

--tng-color-foreground-error-subtle Soft error foreground used for secondary error messaging or less prominent indicators.

#ff3333

--tng-color-foreground-info-default Informational foreground color used for text or icons that provide neutral guidance or context.

#001874

--tng-color-foreground-info-muted Muted info foreground used for the least prominent informational cues.

#c6e3ff

--tng-color-foreground-info-subtle Soft info foreground used for secondary informational content.

#0072f0

--tng-color-foreground-neutral-default Standard neutral foreground color used for primary text and icons across the interface.

#333333

--tng-color-foreground-neutral-emphasis High-emphasis neutral foreground color used for the most important text or icons, ensuring maximum readability and visual priority.

#000000

--tng-color-foreground-neutral-muted Very light neutral foreground used for the least prominent text or icons, providing minimal visual emphasis.

#999999

--tng-color-foreground-neutral-subtle Soft neutral foreground used for secondary text or icons with lower visual priority.

#4d4d4d

--tng-color-foreground-primary-on-contrast-default Primary brand foreground color used for text or icons on contrast or dark backgrounds, ensuring clear readability.

#00244d

--tng-color-foreground-primary-on-contrast-muted Muted primary foreground used on contrast backgrounds for minimal brand emphasis while preserving legibility.

#ccd3db

--tng-color-foreground-primary-on-contrast-subtle Softened primary foreground used on contrast backgrounds for secondary emphasis with less visual dominance.

#8899ac

--tng-color-foreground-primary-on-neutral-default Primary brand foreground color used for text or icons on neutral backgrounds, providing standard brand emphasis and readability.

#00244d

--tng-color-foreground-primary-on-neutral-muted Muted primary foreground used on neutral backgrounds for the lowest level of brand emphasis while remaining legible.

#ccd3db

--tng-color-foreground-primary-on-neutral-subtle Softened primary foreground used on neutral backgrounds for secondary brand emphasis with reduced visual weight.

#8899ac

--tng-color-foreground-secondary-default Secondary brand foreground color used for text or icons that require less emphasis than primary but still reflect brand identity.

#d49677

--tng-color-foreground-secondary-muted Muted secondary foreground used for the most subtle brand presence in text or iconography.

#c57046

--tng-color-foreground-secondary-subtle Soft secondary foreground used for lower-priority brand-related text or icons.

#c57046

--tng-color-foreground-success-default Success foreground color used for text or icons that communicate positive or successful outcomes.

#006800

--tng-color-foreground-success-muted Muted success foreground used for minimal positive indication with low visual prominence.

#6fd171

--tng-color-foreground-success-subtle Soft success foreground used for secondary or supportive positive messaging.

#4caf50

--tng-color-foreground-warning-default Warning foreground color used for text or icons that require attention or indicate caution.

#fff9e5

--tng-color-foreground-contrast-default Standard contrast foreground color used for primary text and icons on dark or high-contrast surfaces.

#fbfbfc

--tng-color-foreground-contrast-emphasis High-contrast foreground color used for key text or icons in dark or high-contrast contexts.

#ffffff

--tng-color-foreground-contrast-muted Muted contrast foreground used for low-priority text or icons while maintaining legibility.

#e4e4e4

--tng-color-foreground-contrast-subtle Soft contrast foreground used for secondary text or icons in dark contexts.

#f5f5f5

--tng-color-foreground-error-default Error foreground color used for text or icons that communicate errors or critical issues.

#cc0000

--tng-color-foreground-error-muted Muted error foreground used for low-emphasis error information.

#ffd0c9

--tng-color-foreground-error-subtle Soft error foreground used for secondary error messaging or less prominent indicators.

#ff3333

--tng-color-foreground-info-default Informational foreground color used for text or icons that provide neutral guidance or context.

#001874

--tng-color-foreground-info-muted Muted info foreground used for the least prominent informational cues.

#95c6ff

--tng-color-foreground-info-subtle Soft info foreground used for secondary informational content.

#0072f0

--tng-color-foreground-neutral-default Standard neutral foreground color used for primary text and icons across the interface.

#282830

--tng-color-foreground-neutral-emphasis High-emphasis neutral foreground color used for the most important text or icons, ensuring maximum readability and visual priority.

#15151b

--tng-color-foreground-neutral-muted Very light neutral foreground used for the least prominent text or icons, providing minimal visual emphasis.

#a8aaac

--tng-color-foreground-neutral-subtle Soft neutral foreground used for secondary text or icons with lower visual priority.

#6c7073

--tng-color-foreground-primary-on-contrast-default Primary brand foreground color used for text or icons on contrast or dark backgrounds, ensuring clear readability.

#d40605

--tng-color-foreground-primary-on-contrast-muted Muted primary foreground used on contrast backgrounds for minimal brand emphasis while preserving legibility.

#fdaaaa

--tng-color-foreground-primary-on-contrast-subtle Softened primary foreground used on contrast backgrounds for secondary emphasis with less visual dominance.

#ff0022

--tng-color-foreground-primary-on-neutral-default Primary brand foreground color used for text or icons on neutral backgrounds, providing standard brand emphasis and readability.

#d40605

--tng-color-foreground-primary-on-neutral-muted Muted primary foreground used on neutral backgrounds for the lowest level of brand emphasis while remaining legible.

#fdaaaa

--tng-color-foreground-primary-on-neutral-subtle Softened primary foreground used on neutral backgrounds for secondary brand emphasis with reduced visual weight.

#ff0022

--tng-color-foreground-secondary-default Secondary brand foreground color used for text or icons that require less emphasis than primary but still reflect brand identity.

#003641

--tng-color-foreground-secondary-muted Muted secondary foreground used for the most subtle brand presence in text or iconography.

#328994

--tng-color-foreground-secondary-subtle Soft secondary foreground used for lower-priority brand-related text or icons.

#006d7a

--tng-color-foreground-success-default Success foreground color used for text or icons that communicate positive or successful outcomes.

#006800

--tng-color-foreground-success-muted Muted success foreground used for minimal positive indication with low visual prominence.

#6fd171

--tng-color-foreground-success-subtle Soft success foreground used for secondary or supportive positive messaging.

#4caf50

--tng-color-foreground-warning-default Warning foreground color used for text or icons that require attention or indicate caution.

#fff9e5

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-default Primary 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-error High-contrast surface variant used to display error states in dark or contrast-heavy environments while preserving readability and accessibility.

#ff0022

--tng-color-surface-contrast-muted A 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-subtle A 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-success High-contrast surface for success states in dark or high-contrast contexts, offering positive feedback with clear visibility.

#6fd171

--tng-color-surface-dim-contrast-default A 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-muted A 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-subtle A 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-default A 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-muted A 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-subtle A 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-default Primary neutral surface color for components. Used as the main background for cards, panels, inputs and other UI elements.

#ffffff

--tng-color-surface-neutral-error Neutral-toned surface used to highlight error states within components, providing clear visual feedback without overwhelming the layout.

#ff0022

--tng-color-surface-neutral-muted A more pronounced neutral surface that helps differentiate nested or secondary component areas while maintaining a cohesive appearance.

#e5e9ed

--tng-color-surface-neutral-subtle A slightly lighter or softer neutral surface used to create gentle hierarchy within components or among grouped elements.

#f5f5f5

--tng-color-surface-neutral-success Neutral surface variant for success states, used to communicate positive feedback in components in a subtle, non-intrusive way.

#006800

--tng-color-surface-contrast-default Primary 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-error High-contrast surface variant used to display error states in dark or contrast-heavy environments while preserving readability and accessibility.

#ff0022

--tng-color-surface-contrast-muted A 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-subtle A 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-success High-contrast surface for success states in dark or high-contrast contexts, offering positive feedback with clear visibility.

#6fd171

rgba(255, 255, 255, 0.45)

--tng-color-surface-dim-contrast-muted A 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-subtle A 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)

rgba(0, 0, 0, 0.65)

--tng-color-surface-dim-neutral-muted A 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-subtle A 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-default Primary neutral surface color for components. Used as the main background for cards, panels, inputs and other UI elements.

#ffffff

--tng-color-surface-neutral-error Neutral-toned surface used to highlight error states within components, providing clear visual feedback without overwhelming the layout.

#ff0022

--tng-color-surface-neutral-muted A more pronounced neutral surface that helps differentiate nested or secondary component areas while maintaining a cohesive appearance.

#e4e4e4

--tng-color-surface-neutral-subtle A slightly lighter or softer neutral surface used to create gentle hierarchy within components or among grouped elements.

#f5f5f5

--tng-color-surface-neutral-success Neutral surface variant for success states, used to communicate positive feedback in components in a subtle, non-intrusive way.

#006800