Docs
Design patterns

Design patterns

Bundled with your Rails UI template is a complete design system we dub as "Design patterns". Think of the these as documention for how to go about presenting elements on a page.

Design system

Design patterns are a collection of the following (with more to come):

Content

Content patterns include typography, image formatting, table layouts, and text treatments.

UI components

Everything from form inputs to more complicated modal dialog design. They are designed to be drop-in branded UI wiht JavaScript already integrated as necessary via Stimulus.js.

We believe the design of UI components should be separate from their implementation. Because of this, the code you see for each component is theme-based, yet completely customizeable. There is no strong buy-in to front-end frameworks or package managers.

Authentication templates and helpers

Professionally designs authetnication solutions based on the Devise gem. Every page, email template, and integration is tailored to each template.

Mailers

Custom email templates and mailer layouts designed for responsive emails. Transactional, promotional, minimal and more to come.

Single-click to copy code snippets

Each pattern offers a simple one-click copy feature to gather and use the code in your templates. Choose from HTML, ERB, or HAML with more support coming soon for other view frameworks.

Origins

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. From there we go straight to code and design there before shipping the final versions.

On this page