Theme

The Atlas color palette is used to bring visual meaning to interface elements and convey specific messages in certain instances. The primary colors used are various shades of gray as textual and foundational elements, blue as progressive elements, and red, yellow, and green to convey status. To check the contrast ratio between two colors, visit the WebAIM contrast checker.

For documentation on the entire color palette, visit Colors.

TIP

Some colors vary between light and dark modes. Use the color mode switcher in the site header to see the colors in the different modes. Using design tokens rather than raw hex codes will ensure you're automatically using the right color for the chosen mode.

Class First

The Atlas color system follows a class-first approach, which means you can apply styles directly using utility classes like color-accent, bg-primary, text-link, and others. This enables faster and more consistent interface development without relying on inline styles or custom CSS for each element.

These classes are based on Atlas’s design tokens and ensure all elements adhere to the OpenStreetMap visual identity, including accessibility, contrast, and responsiveness. By using classes like color-accent, you apply the accent color defined in the active theme (whether light or dark) ensuring visual harmony across all contexts.

The class-first approach also simplifies maintenance and scalability of the design system and allows smoother integration with utility-based frameworks like Tailwind CSS.

Theming

You can easily adapt Atlas to your project’s color scheme thanks to the use of Design Tokens. This makes it simple to customize elements like color-accent while preserving the system’s visual consistency and structure.

We recommend keeping Atlas’s original background colors to maintain contrast and accessibility. When customizing, prioritize adjusting the color-accent and always check contrast with background elements to ensure readability.

Text color

Color tokens applied to text and icons

Color	Token	When to use
	color-base	Default color of all text styles and icons
	color-subtle	Subtle text/icons that shouldn't be distracting (e.g. subtitles, descriptions)
	color-emphasized	Emphasized text/icons (e.g., Headings)
	color-base-hover	Tertiary buttons text/icons on hover
	color-disable	Use it for disabled text/icons in interactive elements (e.g. input, form items).
	color-accent	Active color for accents text and icons
	color-accent-hover	Hover color of primary text elements
	color-accent-active	Text on darker backgrounds
	color-foreground	Icons on hover
	color-inverse	Text and icons on darker backgrounds
	color-link	Links
	color-link-active	Links active
	color-link-visted	Visited links
	color-success	Success messages and icons
	color-info	Info messages and icons
	color-warning	Warning messages and icons
	color-error	Error messages and icons

Background colors

Color tokens applied in backgrounds

Color	Token	When to use
	bgn-base	Base background
	bgn-surface	Surface background
	bgn-surface-hover	Hovered menu options, active tertiary buttons
	bgn-disable	Disabled background of interactive elements (e.g. button)
	bgn-accent	Default accent backgrounds
	bgn-accent-hover	Hover accent backgrounds
	bgn-accent-active	Active accent backgrounds
	bgn-foreground	Foreground background
	bgn-danger	Default danger/error backgrounds
	bgn-danger--hover	Hover on danger/error interactive backgrounds
	bgn-danger--active	Active danger/error backgrounds (e.g. active selected-error checkbox)
	bgn-info	Info feedback background
	bgn-sucess	Success feedback background
	bgn-warning	Warning feedback backgorund
	bgn-error	Error feedbacks backgorund

Border colors

Color tokens applied to borders on form items and buttons

Color	Token	Reference
	border-color-base	Default for interactive elements, dialogs, menus
	border-base-color-hover	When interactive elements on hover
	border-color-subtle	Dividers and thumbnail borders
	border-color-accent	Disabled form item borders
	border-color-focus
	border-color-info	``
	border-color-success	``
	border-color-warning	``
	border-color-error	``