From typography, layouts and grids, colors, icons, components and coding conventions, to voice and tone, style-guide and documentation, a design system is bringing all of these together in a way that allows your entire team to learn, build, and grow. The overview tab in each page will give a high-level look on the atom, molecule, organism, or template. Essentially just showing how they will render on a Frankie page.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

properties

edit

style-guide

Button Link Primary Color Button Link Disabled Primary Color

This tabbed section is mainly to show classes, ID's or parameters for thew given component. There is often a raw html snippet of the element for reference even though the "Develop" section will contain the actual partial we want to use globally.

button--primary-color
button--secondary-color
button--tertiary-color
button--quaternary-color
button--quinary-color
button--senary-color

The bread AND butter that contains the real code we will use on a global scale throughout the app. It showcases the required parameters for each component in context.