Atlas Design System

Welcome to the Atlas Design System for OpenStreetMap! This project aims to provide a consistent and scalable foundation for creating user interfaces aligned with OpenStreetMap's visual identity and principles. Here, you'll find Design Tokens, Components, Icons, Resources, and guidelines for usage and contributions.

Design Tokens

Design Tokens are the foundation of our design system. They define colors, typography, spacing, borders, and other visual properties to ensure consistency across all products and platforms.

• Colors: Primary, secondary, and neutral color palettes.
• Typography: Fonts, sizes, and weights.
• Spacing: Margins, paddings, and grids.
• Borders and Shadows: Border styles and shadow effects.

Components and Icons

Our library of components and icons is designed to be modular and reusable, ensuring a cohesive user experience.

• Components: Buttons, forms, cards, modals, navigation, and more.
• Icons: We currently use Material Symbols as our icon library.

Resources

Here, you'll find additional resources to help with the implementation and understanding of the Design System.

• Figma Library: Component and style library in Figma.
• Documentation: Detailed guides on how to use and customize components.
• Usage Examples: Practical implementation examples.

Usage and Contributions

We want the OpenStreetMap Design System to be a useful tool for everyone. Here are some ways to start using and contributing to the project.

How to Use

1. Install the Design System package in your project.
2. Import the necessary components and tokens.
3. Follow the usage guidelines to ensure consistency.

How to Contribute

1. Fork the repository.
2. Create a branch for your contribution.
3. Submit a pull request with your changes.
4. Follow our contribution guidelines to ensure your contribution is accepted.

Maintainers

Atlas is maintained by a diverse group of designers and developers, with support from the University of Brasília, the Federal University of Espírito Santo, and the OpenStreetMap volunteer community.

Contact Us

If you have questions, suggestions, or need assistance, feel free to reach out to us:

• Discord: Design System Discord Channel
• GitHub Issues: Open an Issue

Guiding Principles

Our Design System is guided by the following core principles:

1. Consistency: Ensure a cohesive user experience across all products.
2. Accessibility: Prioritize accessibility in all components and guidelines.
3. Modularity: Create reusable and scalable components.
4. Transparency: Maintain an open and transparent process for contributions and feedback.

Inspirations

This project was inspired by Wikimedia's Codex, an open-source design system developed by the Wikimedia Foundation. Many of the guidelines and Design Tokens in this Design System were adapted or reused from Codex.