Despite saying I’d “start with typography” in my Diving into Design Systems entry, after doing more reading, I realized I needed to think through and decide on some larger concepts. Smashing’s Design Systems and A Book Apart’s Expressive Design Systems describe broad principles to consider before getting granular.
Guiding Principles
Smashing’s Design Systems says when developing design system principles to consider:
- Purpose,
- Shared themes, and
- Audience.
Brettro’s mission (and purpose) is to provide quality, professional media design with Madison Avenue style on a Main Street budget. Our client base is focused on small businesses and people who want extreme value for professional design. And Brettro’s design language has always been described as “modern vintage,” refined, clear, and professional with a bit of whimsy.
With that in mind, Brettro’s design system principles are:
- Clear
- Refined
- Effortless
- Whimsical
’Four Levers’
Expressive Design Systems describes “four levers” that are “broad, sweeping decisions about how…experiences should feel.” They are:
- Size: what size are elements on the page?
- Scale: what size are elements relative to one another?
- Density: how dense is the page? Should it feel airy or compact? (“Density is primarily communicated through space.”)
- Weight: how heavy is the page? (“Weight is communicated through typography and color.”
Starting from Brettro’s design language, our “four levers” are:
- Size: page elements are slightly larger than a typical size, making it easy to scan content and equally as nice to take a moment for a deeper read;
- Scale: imagery is large, type is not huge, but slightly larger to make it easily scannable and more readable;
- Density: light density; pages should be airy, type should be appropriately spaced;
- Weight: light, typography is contemporary and bold, but well spaced. Color is bold but used only when necessary.
What Does this All Mean?
Taking time to both consider and document broad design system principles, from look-and-feel to size, scale and weight provides a great foundation for diving into the more granular elements. And it serves as a reference point to ensure the systems components are consistent and maintain cohesion.