Theme builder

Theme Builder

The Theme Builder is a tool that combines brand design input + the structure of atomic design + logic to generate accessible atoms and molecules to output code which transforms a robust, out of the box Design Library and a React Component Library into a Branded and accessible Unified Design System.

Conceptual Workflow

For each of the following steps, a theme builder User may be a Designer or Person Needing Accommodations.

1. User opens Theme Building Tool.
2. User creates a new design system project within the Theme Building Tool.
3. User configures project to produce themes that are either Business (AA) or Government (AAA) WCAG Compatible.
4. User adds 10 shades of a color in light and dark mode with corresponding "on color" to the project.

5. User defines the base atoms for the theme. This lays the foundation for all light and dark mode calculations. The Theme Building Tool guides the User through the following steps that must occur in sequential order:

6. Select Primary, Secondary, and Tertiary Colors

7. Define Light mode background and dark mode background.

8. Define Gradient backgrounds, Buttons and Icons colors, and Gradient Text.

9. User defines other atomic elements (atoms, molecules) that will be used by the theme. The Theme Building Tool guides the User through the following steps:

10. Data independent preferences

    1. Specify minimum desktop target area
    2. Specify grid system
    3. Specify animation settings

11. Data dependent preferences using decisions associated with Primary, Secondary, Tertiary, Light and Dark Mode background colors. These attribute values are calculated:

    1. state colors
    2. Fonts / Typography
    3. Default Border Settings
    4. Elevations
    5. Bevels
    6. Chart colors

12. User applies atomic settings to molecules associated with the theme project.

13. User uses the Theme Building Tool to generate theme asset types (JSON, CSS, design tokens).