Skip to main content
Version: 1.6.X

Themes

Within magmalte/app is a theme directory intended to better unify the front-end design system to that found within the design files.

At the moment the default.js file exports 3 core design types, though more will probably follow in the future as they are needed:

Colors​

Colors are broken into subgroups (primary, secondary, state, data, and code), and then defined based off of the hex color code. Generally speaking, they should match closely with those found in the design file.

In the case you need to add a color, I used this site to generate names based off of the color hex.

Typography​

We've adapted the Symphony styles to better reflect the typography found in the design file, with the following possible variants:

  • h1
  • h2
  • h3
  • h4
  • h5
  • subtitle1
  • subtitle2
  • body1
  • body2
  • body3
  • code
  • button
  • caption
  • overline

Shadows​

We've generated a few different elevations to leverage depending on the context in which you are designing for. In most cases, we tend to keep content within the page flat, reserving shadows for content like dialogs and modals.