Max Barrass

Max Barrass

Founder

Design Language System

2 minute read

Introduction

A design language system is a collection of design principles and components that unite product teams around a common visual language.

  • Design is the description of visual aesthetics that are inferred from Brand Guidelines.

  • Language is the common dictionary of terms that describe the design elements and design options that apply to components components

    • Design Elements refers to general design conventions that can be applied across all components and govern general component behaviour

    • Design Options refers to a subset of design conventions that apply to specific components

  • System is the definition of components and their behaviour and their relations with Design and Language.

The DLS can be considered the source of truth for how elements look and behave.

  • Designers, developers and content authors can use the DLS to check if an element of design already exists.

  • Content authors can use the DLS for instructions on how to use certain design components.

Like a natural language, the DLS is supposed to grow over time as components are progressively added to it

Design Language systems are aimed to be a shared Language for understanding design, that transparently leads to understanding implementation. Following definitions are made to ensure discrete understanding terms that are used

Design Language is a vocabulary that is used to describe the design.

Design Language System is a reference implementation of a Design Language.

Reference for Terms

Design Language System Table of Contents

Here is a list of things that you would cover as you define your Design Language System.

  1. Principles - The principles provide the overall direction and connect the brand and goals to the design system. The principles are the why of the design system exist.
    1. Brand
    2. Experience Vision
    3. Design Principles
  2. Guidelines - These guidelines describe how to bring to life aspects of the experience and design system through the use of the foundations and components. The guidelines are the **how **of the design system.
    1. Experience Contexts
    2. Accessibility
      1. Visual
      2. Inclusive
      3. International
      4. Bi-directional
    3. Movement
      1. Interactions
      2. Motion
      3. Choreography
      4. Animation
    4. Naming
      1. Tokens
    5. Getting Started
      1. For designers
      2. For developers
  3. Foundations - The foundations are the global constructs that inform and are used to construct all the components. The foundations are what of the design system.
    1. Branding
    2. Colours
    3. Typography
    4. Fonts
    5. Illustrations
    6. Sounds
    7. Iconography
    8. Spacing
    9. Visualisation
      1. Data
      2. Charts
  4. Content
    1. Voice and Tone
    2. Vocabulary - Author related
    3. Language
    4. Grammar
    5. Alternative Text
    6. Photography
    7. Icons
      1. Logos
      2. Chevrons
    8. Internationalization
  5. Patterns - Experiences
    1. Layouts
      1. Grid
      2. Dialogs
      3. Popups/Popovers
      4. Trays
      5. Toast
    2. Messaging
      1. Error
      2. Info
      3. Warning
    3. Tour
  6. Unique Experiences
    1. Homepage
    2. Article List
      1. Article
    3. About Page
    4. Terms and Conditions
  7. Components - Reference from AEM.Design - A component is a discrete part of the design system that can be used in multiple contexts throughout the ecosystem. Components can have nested components and can be grouped.
    1. Content
      1. Content Fragment
      2. Content Template
      3. File Download Link
      4. Embed Source
      5. External
      6. Link
      7. Content Reference
      8. Table
      9. Rich Text
      10. Tool Tip
      11. Page Author
      12. Page Date
      13. Page Description
      14. Page Tags
      15. Page Title
    2. Details
      1. Contact Details
      2. Event Details
      3. Location Details
      4. News Details
      5. Page Details
      6. Generic Details
    3. Layout
      1. Article
      2. Aside
      3. Breadcrumb
      4. Columns
      5. Content Block
      6. Content Block Menu
      7. Content Tabs
      8. Footer
      9. Header
      10. Nav Bar
    4. Lists
      1. Asset List
      2. Contact List
      3. Event List
      4. Lang Nav
      5. List
      6. List Nav
      7. Location List
      8. News List
      9. Page List
      10. Search Results List
      11. Tag List
      12. Nav List
    5. Media
      1. Audio
      2. Image
      3. Video
    6. Template
      1. One Column Page
      2. Three Column Page
      3. Two Column Page

Updated:

Leave a Comment

You May Also Enjoy