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 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.
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.