Current version: 7.0

What is Astro?

Learn what Astro is and what a design system can do for you and your applications.

Start Designing

Jumping into icons, layouts, components, and Figma files to get you started designing with Astro.

Start Developing

Find out how to implement Astro design system into code using design tokens and our code base.

Astro Community

Upcoming Events

02/13/2023 7:00 PM UTC
Astro UX Working Group
Request an invite by email: support@astrouxds.com

Request an invite to this meeting please send an email to support@astrouxds.com 

02/15/2023 3:30 PM UTC
Astro Office Hours
422 E Vermijo Ave, Colorado Springs, CO 80903, USA
Join us for Astro Office Hours every Wednesday!
02/22/2023 3:30 PM UTC
Astro Office Hours
422 E Vermijo Ave, Colorado Springs, CO 80903, USA
Join us for Astro Office Hours every Wednesday!
02/27/2023 7:00 PM UTC
Astro UX Working Group
Request an invite by email: support@astrouxds.com

Request an invite to this meeting please send an email to support@astrouxds.com 

03/01/2023 3:30 PM UTC
Astro Office Hours
422 E Vermijo Ave, Colorado Springs, CO 80903, USA
Join us for Astro Office Hours every Wednesday!
03/08/2023 3:30 PM UTC
Astro Office Hours
422 E Vermijo Ave, Colorado Springs, CO 80903, USA
Join us for Astro Office Hours every Wednesday!

Articles

Testing pixel perfection in Figma and code

“Pixel Perfect”. The Holy Grail. The Dream. The ability to take an asset designed in Figma and implement in code is the superpower...

Astro Beyond the Web

Transforming a web design system for new platforms is, unsurprisingly, an exercise in making tradeoffs.

How to Implement a Light to Dark Theme Switch Using Astro UXDS

This quick four-step tutorial will show you how to implement a light to dark theme Switch without losing the user’s preferred state.

Reworking a Color System for Flexibility and Growth

When your color system gets ugly, how do you make it pretty again, and keep it that way?

Styling an input range to have different track heights before and after the thumb

Styling native HTML elements can be tricky, and the range input is certainly no different.

View all articles