GA Patterns Library: Matter, Atoms and Beyond
ATOMIC DESIGN
MODULAR SCALE
UI DESIGN
As General Assembly continues to grow, we strive for team efficiency, brand consistency, and business scalability. The GA Design System aka Patterns Library is built with these standards in mind as we create harmony and consistency to the Front-End of GA's website and products. We use an adapted Atomic Design Method to build components from Matter to Pages. This structure allows us to design more unified user interfaces and build more consistent and accessible user experiences.
Type and Spacing: Building a Modular Scale —
GA’s newly adopted type pattern takes cues from Robert Bringhurst and Tim Brown (More Meaningful Typography). “Meaningful ratios rooted in geormetry, music, nature, and history can be expressed as modular scales and put to work on the web.”
The goal: to choose a ratio that would offer a visually harmonious scale of fonts and would be appropriate for all the needs of GA’s website and products. With this in mind, we tested several culturally relevant ratios such as the augmented fourth (1:√2), perfect fourth (3:4), major third (4:5), minor third (5:6) and major second (8:9).
Below is a test example of a ratio that did not meet the needs of GA’s visual language. This was primarily because the augmented fourth ratio (1:√2 or 1.414) meant the steps between each size were too large. Similarly, a line height based on this ratio meant that at high sizes, the line heights were too tall; at small sizes the line heights were too condensed. The augmented fourth scale based on 16px font size would not provide enough options, create too much typography color contrast at small sizes, and dilute the effectiveness of other areas of white space at large sizes.
Type Scale base on Augmented Fourth Ratio and 16px Base Font
Type and Spacing: Adopting Minor Third Type Scale —
Our final proposal for a modular scale was to adopt the minor third ratio (5:6 or 1.2x). This is applied to both header type sizes, line-heights and spacing at a base of 16px. At paragraph body sizes, we made adjustments in line-height for more comfortable readability. In order to design for different screen sizes, we used the same scale and selected different intervals.
Final proposal for using Minor Third modular type scale
Color System: Striving for Accessibility —
Roughly 10% of the global population is estimated to have poor vision. As an education company with a wide audience, the GA team strives to comply with WCAG 2.0 Level AA guidelines to improve users' experience of our website and products. Color contrast is one aspect that we have investigated and continue to improve on.
We audited our loosely defined brand palette and investigated digital colors that would attempt to adhere to web accessibilty standards. Many inital proposals for new brand colors did not meet these standards and had to be scrapped. The chart below shows how poorly some colors paired (below 3:1 ratio) and only a select group would pass the criteria (above 3:1 ratio).
Evaluating the color contrast ratios between the proposed refresh colors. Color combinations that meet the 3:1 ratio (for large text) highlighted in green.
Version 1 of our primary, secondary and tints/shades were determined with equal parts brand and accessibility in mind. Our tints/shades combine to make Levels 100-900 of select primary and secondary colors, with each level defined by its ability to pair with default colors at an accessible standard. For General Assembly, this is a major step towards building better web accessible products.
Continuing the conversation —
As we keep building the GA visual language, one of the lessons we strive to keep in mind is the importance of communication between brand, product, and engineering. Designing a pattern library with a brand voice in silos had proved to reach many dead ends; constant communication, testing, and feedback have been adopted to move forward on this large-scale project.
