Design System 101 - Everything about it

What is Design System? What are the contents? Examples of a good Design System? and more...

So What's a Design System?

A design system is a set of guidelines, rules, and assets that define how a brand or organization should be represented visually across all touchpoints. It includes elements such as the brand mission, value propositions, voice and tone, logo usage, iconography, brand colors, fonts and typography, signage specs, media formatting, and photography and graphic styles. A well-designed system ensures that the brand is represented consistently and effectively, and that all branding decisions align with the brand's mission and values.

I've listed the most important elements of a Design System (in the most accurate order). I have referred to many websites, blogs & articles on Design Systems to curate the most valuable & informative resource (ChatGPT for help)

Brand Mission:

The brand mission defines the overarching purpose of the brand and what it strives to achieve. It should be clear, concise, and inspirational, and should guide all branding decisions and actions.

Value Propositions and Differentiators:

Value propositions and differentiators highlight the unique benefits that the brand offers to its customers and what sets it apart from competitors. It should communicate the brand's value simply and memorably.

Voice and Tone:

Voice and tone are the characteristics that define the brand's personality and how it communicates with its audience. It should be consistent across all touchpoints and reflect the brand's values, mission, and target audience.

Logo Usage:

Logo usage refers to the rules and guidelines for how the brand's logo should be used in various contexts, such as size, placement, and color. It should ensure that the logo is always represented accurately and consistently.

Iconography:

Iconography consists of the symbols, icons, and visual elements used to represent the brand in a concise and recognizable way. It should be consistent with the brand's style and messaging.

Brand Colors:

Brand colors are the specific colors used to represent the brand and evoke certain emotions and associations. It should be consistent across all touchpoints and have guidelines for usage in different contexts.

Fonts and Typography:

Fonts and typography refer to the specific typefaces used for the brand's messaging, including headlines, body text, and other design elements. It should be consistent with the brand's style and messaging.

Signage Specs:

Signage specs refer to the specifications for the design, placement, and materials used for brand signage, including outdoor and indoor signs, banners, and posters. It should ensure that the brand is represented consistently and effectively.

Media Formatting:

Media formatting refers to the specifications for how brand media should be formatted and used, such as for print, digital, or social media. It should ensure that all media is consistent and optimized for its intended platform.

Photography and Graphic Styles:

Photography and graphic styles refer to the specific style and aesthetic used for brand photography and graphics. It should be consistent with the brand's style and messaging and evoke the desired emotions and associations.

Examples of Design Systems

  • Material Design by Google

  • IBM Design Language

  • Microsoft Fluent Design System

  • Adobe Spectrum

  • Salesforce Lightning Design System

  • Shopify Polaris

  • Atlassian Design Guidelines

  • Airbnb Design System

Did you find this article valuable?

Support Hari Prasad Designer by becoming a sponsor. Any amount is appreciated!