Overview


The Formstack Brand Design System includes tokens, helpers, and components to help our Design Team build a consistent and harmonious experience across our Brand site. Rather than continuously re-inventing the wheel and focusing on solely on pixel building, our team can focus on user experience, interaction, creativity, and efficiency. In order to maintain a living and breathing design system, these guidelines have space for flexibility and are continuously updated and revised as our brand evolves.

Getting Started

  1. Get an overview of our tokens, which define how to use colors, font sizes, spacing, weights, line-heights, borders, and more.
  2. Review the utility classes, which assist with general padding, margin, text color, and other various properties. These classes help cut down on custom Sass, and assist with scalability of our system.
  3. Familiarize yourself with the existing Components, which can be incorporated into any design. Each component provides documentation and mark-up.

Version

1.0.1

Last Updated

09.04.19

Elements, Compentents and Modules

Elements

Elements reside within components or stand alone within a section. These are typically paragraphs, heading, buttons, icons, etc.

Components

Components contain a set of elements. Examples of this would cards, callout box, forms.

Modules

Modules contain elements and components. They will typically take up an entire section or most of it and should be built in such a way that it can be repeatedly used throughout the site or page. Modifications can be made to a module by changing a class or variable while still maintaining the overall look or function of the module.

Show Elements

Show Components

Show Module

Elements Example
Components Example
Module Example