Astro
An open source design system by Magnetis
Overview
Astro is a design system developed by Magnetis. It is designed to help designers, developers, product managers, data analysts, data scientists, stakeholders, and enthusiasts at Magnetis to maintain brand consistency, enhance user experience, and improve the efficiency of designing and building products for customers. Astro is built based on Atomic Design principles and follows accessibility guidelines. It currently supports React as its official library.
Features
- Atomic Design: Astro is based on Atomic Design principles, allowing designers and developers to use its style set and components to enhance product interfaces.
- Open Design Assets: Magnetis believes in contributing to the community and sharing design and code assets, so Astro is an open system.
- Accessibility: Astro follows basic accessibility guidelines from the WCAG, ensuring good legibility, screen reading solutions, and tested contrast ratios.
Summary
Astro is a design system developed by Magnetis to promote brand consistency, enhance user experience, and improve the efficiency of designing and building products. It is based on Atomic Design principles, follows accessibility guidelines, and currently supports React. By providing an open system, Magnetis aims to contribute to the design and development community. Astro can be installed via terminal or used via CDN, and it offers a variety of components and styles that can be easily customized for different projects.
- UI Kits & Components
A UI kit provides developers with a set of reusable components that can be easily integrated into a website or application. These components are pre-designed with consistent styling and functionality, allowing developers to save time and effort in the design and development process. UI kits can be either custom-built or third-party, and often include components for buttons, forms, typography, icons, and more.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- GitHub Pages
Gridsome is a Vue.js-based static site generator that makes it easy to build fast and flexible websites and applications by leveraging modern web technologies like GraphQL, Webpack, and hot reloading
- Stylelint
Stylelint is a modern linter for CSS that helps you avoid errors and enforce consistent styling conventions. It provides rules for detecting errors and warnings, and can be configured to match your specific project's requirements.