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 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.
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.
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.
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.
- Install the Design System package in your project.
- Import the necessary components and tokens.
- Follow the usage guidelines to ensure consistency.
- Fork the repository.
- Create a branch for your contribution.
- Submit a pull request with your changes.
- Follow our contribution guidelines to ensure your contribution is accepted.
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.
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
Our Design System is guided by the following core principles:
- Consistency: Ensure a cohesive user experience across all products.
- Accessibility: Prioritize accessibility in all components and guidelines.
- Modularity: Create reusable and scalable components.
- Transparency: Maintain an open and transparent process for contributions and feedback.