Apollo Design System

Description

The Apollo design system is a collection of ViewComponents styled using Tailwind CSS based on a modified version of Tailwind UI. Apollo components may also utilize Stimulus or Alpine.js to provide interactivity to a component.

The primary goals of Apollo are to

1. Provide a consistent look and feel across the app.
2. Make it easy for engineers to build UIs.

To achieve this, Apollo components strive to be opinionated. They should be flexible enough to easily build what you want. However, they should be constrained enough that any UI built with Apollo feels cohesive. Ideally this reduces the number of decisions engineers need to make to deliver a good UI.

Apollo is designed to be generic and without Wunder-specific code. This approach helps us maintain separation between the design system and the rest of the application. For shared UIs specific to Wunder, we build components, partials, or helpers outside of Apollo, using its components as a sturdy and stable base.

Technology Status at Wunder

Adopt. This is our preferred technology for building UIs.

Notes/Resources

• For client side interaction see the section on Hotwire.

• When in doubt about adding a new option or component in Apollo we generally reference what is in Tailwind UI and decide if the new option or component is needed. We can often get close enough by using existing components. If these solutions are too cumbersome or do not meet the UI requirements, we will modify Apollo to better suit our needs.