Design System 101 - Everything about it
What is Design System? What are the contents? Examples of a good Design System? and more...

Artist, Designer & Developer
Search for a command to run...
What is Design System? What are the contents? Examples of a good Design System? and more...

Artist, Designer & Developer
No comments yet. Be the first to comment.
Here I've shared the most easy & straight forward method to achieve Smooth Scrolling in React / Next Js applications (with source code)

We will be creating a NextJs component that receives a string as a prop & animates it, Code below 👇 Note: Use Variable fonts to get seamless animation. Mona Sans is used for this example As a bonus, We will be using Framer motion & Tailwind CSS to t...

Here are some fundamentals design principles you must know

Here you will find a few definitions of Design by various authors & popular designers

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)
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 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 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 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 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 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 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 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 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 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.
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