Design system

Bundled with your Rails UI theme is a complete design system. Think of the system as documented design patterns for repeatable elements and content within your application.

Each theme contains different elements, styles, and standards, all of which are customizable depending on the CSS framework your Rails UI configuration leverages.

Design system


When creating new themes, the design systems are created first. To develop atomic patterns, we use this exercise to be more efficient in an application with many views. In the software world, you can think of this as practicing the D.R.Y. (don't repeat yourself) principle.

Screenshot of Rails UI theme design inside Figma

Much of the initial work begins in a tool called Figma where we move quickly finding balance in color, scale, typography, imagery, and more.