Over the past 20 years, OpenStreetMap has become one of the world’s largest and most impactful crowdsourcing projects. Thousands of communities have formed around collaborative mapping, connecting people and fostering the sharing of geographic knowledge.

Today, OpenStreetMap is an essential source of geographic data, powering a wide range of map services used by thousands of people daily and serving as a vital tool in managing climate and humanitarian crises. Although the main site, OSM.org, is not designed as a direct navigation tool, the experience of new users plays a crucial role in attracting new mappers. Improving usability for the public, therefore, benefits the entire community, alongside the millions of organizations that use OSM data.

In recent years, the OpenStreetMap ecosystem has grown significantly, expanding to every corner of the world and yet, the user interface of OSM.org is much the same as it was when OSM was founded in 2004. Among other challenges, it is not optimized for mobile devices, nor does it meet modern accessibility standards. We believe this is the time to prioritize a more cohesive, intuitive, and enjoyable user experience while making it easier for developers and contributors to create solutions.

To achieve this goal, we are developing a design system, a set of reusable guidelines and components that unify the design and functionality of digital interfaces. This system has been designed to meet the community’s needs, promoting consistency, accessibility, and scalability. It will ensure that interfaces are inclusive, modern, and capable of addressing the needs of a diverse global community.

Discover the Atlas

Atlas will be the design system of OpenStreetMap, designed to unify and modernize the user experience across all platforms. Currently under development, it is intended to be introduced as part of a new version of OSM.org and the OSMF website, bringing consistency, accessibility, and innovation to the global community.

Let’s take a closer look at the design system.

Our principles

A Map for Everyone: Our goal is to create a map for everyone, regardless of ability, language, device, or technical expertise. We aim to eliminate barriers between users and the knowledge OpenStreetMap provides, ensuring that everyone can access and contribute to the map seamlessly.

This involves:

• Accessibility for all, regardless of abilities or limitations.
• Multiple languages and content formats.
• Device and network compatibility with various devices and networks.
• Easy-to-use tools and resources, suitable for non-technologists and technologists alike require no advanced technical knowledge.

• Representation and respect for all cultures, ethnicities, and genders, ensuring inclusivity and representation for all

  In short, we aim to create a map that can be a powerful tool for communities to assert their regional identity while promoting inclusion and diversity. Everyone, regardless of their background or abilities, should feel welcome and empowered to contribute to OpenStreetMap.

Reliable and Consistent: OpenStreetMap must be a trusted source of geographic data, inspiring confidence through its accurate and accessible solutions. Achieving this requires consistency in our designs, ensuring that users can easily navigate and trust the experience we offer.

By using familiar concepts and common patterns, we make OSM intuitive and straightforward to use across platforms, languages, and formats. This helps users feel secure and confident when exploring OSM, knowing they are engaging with a platform that values precision and quality without compromising usability.

Our goal is to remain a reliable source of geographic data while keeping the platform intuitive, accessible, and constantly updated. By maintaining consistency in our design, we ensure that OSM continues to be a valuable, trustworthy tool that provides a high-quality user experience.

Recognition: We want OpenStreetMap to become as recognizable and respected as other free knowledge-sharing software projects, such as Wikipedia. Achieving this level of recognition will attract more local mappers and strengthen the community, positioning OSM as a global reference in collaborative mapping and geographic knowledge sharing.

Reusable components:

Atlas consists of various reusable elements that translate design decisions into tokens, assets, and components. These elements can be used to build interfaces fully aligned with Atlas.

Design tokens: Design tokens are standardized values that represent design decisions, such as colors, typography, spacing, and styles. For example, the token color-accent may have the value #57814C or #82BF71, depending on the applied theme (light or dark). This token is used to define the color of buttons or other highlight elements, ensuring design consistency and simplifying the development process.

Assets: Assets are visual resources that help recognize available actions (icons), promote engagement, or represent our brand/organization (logos). Atlas currently uses the Material Symbols library as the basis for its icons.

Components: Atlas is constantly evolving and continues to expand its component library. Components are combinations of elements and assets styled by design tokens, which can be reused across different products and adapted to various use cases. Currently, components are developed using Svelte and a CSS only version, without requiring JavaScript.

How can this benefit designers, developers, and others?

If you contribute to building applications for the OpenStreetMap (OSM) ecosystem, you might be wondering: how can this benefit me? Our goal is to ensure that everyone working on the front-end can take advantage of a well-structured design system:

• Consistent experience: Atlas will provide accessible, consistent, and well-tested standards that can be used across the OSM ecosystem. This will result in a more cohesive experience for users. Delivering a great experience, regardless of language, disability, device, browser, or connection speed, is essential for a truly global map.

• Scalability and flexibility: A well-designed system makes it easier to scale products and features while ensuring that new components and designs are seamlessly integrated. It offers flexibility for customization while maintaining consistency, enabling teams to work efficiently on a variety of projects.

• No need for modifications: Currently, the front end of OSM.org is built using Bootstrap. While this approach offers benefits like a quick starting point for development, it also introduces challenges. Heavy reliance on Bootstrap styles and classes makes customization difficult, can lead to visual inconsistencies, and adds unnecessary code bloat to projects.

• Focus on what really matters: Since Atlas is composed of pre-made design decisions, designers and developers can focus their efforts on solving more critical problems for their projects. This eliminates the need to spend time on repetitive basic details, boosting productivity and creativity.

• Open to collaboration: Our goal is to replicate the core philosophy of OSM, being open and collaborative. You can contribute to both design and development. Currently, we are using Figma as our design tool, but we plan to release a version compatible with Penpot to make collaboration even more accessible to different contributors.

Considerations

When migrating to Atlas there are several factors to consider, as with any transition to modern tools. It’s important to keep in mind that the system is still under development. Before adopting it for a new project or migrating an existing one, evaluate whether Atlas provides the necessary components to meet your project’s needs. Currently, we are focused on supporting web applications, but we plan to expand to mobile platforms in the future.

How I can stay update and contributed?

Atlas is currently a collaborative effort between the University of Brasília and the OSMF Foundation, supported by the Communication Working Group. Our team consists of 10 passionate designers and developers dedicated to this initiative.

We warmly welcome contributions and collaborations from the entire OpenStreetMap community. Whether you’re a designer, developer, or simply interested in our work, there are many ways to get involved or stay updated:

• Subscribe to tasks and join the discussion on our GitHub repository.
• Participate in the design process, whether by creating new components or contributing assets.
• Write and submit code to improve or expand the system.
• Review existing code to ensure quality and consistency.
• Update and enhance the library’s documentation to make it more accessible to all.

Contributions to Atlas are guided by the OSM Code of Conduct, ensuring a respectful and collaborative environment.

We’re thrilled to work together to break down technical barriers to accessing free map data, and we hope you share our excitement!

Atlas will be at STOMUS 2025! Come learn more about the project and find out how you can contribute. If you’re attending the event, don’t miss this chance! see the schedule.

We are proposing this project for funding through the Engineering Microgrants 2025 program. With this support, it will be possible to boost the development of Atlas and make OpenStreetMap more accessible to everyone. So don’t forget to show your support by commenting and sharing the project, your participation could be decisive for it to be selected and funded!
Take a look at our proposal! link

Special thanks to the Wikimedia Codex team, you laid the foundation for this project!