My Docs
DeploymentTrelloCalendar 🗓 Family Promise Roadmap
LAMBDA_LABS_Family_Promise
LAMBDA_LABS_Family_Promise
  • Home
  • navigation
    • Resume
    • My Notes:
    • NAVIGATION
    • Calendar
    • Youtube:
    • Roadmap:
    • TEAM MEMBERS
    • Running List Of Notes Links & Pertinent Info From Meetings
    • Trello
      • Github/Trello Integration
  • UX
    • UX_TOPICS
      • Action Items:
      • Accessibility
      • Figma Notes
        • Tables In Figma
        • Notes
        • Frames in Figma
        • Prototyping In Figma
        • More Notes
      • UX-Design
        • Facebook Graph API
      • Ant Design
        • ANT Components
          • Buttons
        • ANT DOCS
        • Application (Codesandbox)
      • Examples
      • How to add external URL links to your prototype
  • CANVAS
    • Interview
    • Design
      • What's Inclusive Design?
      • Accessibility
      • What are Design Systems?
    • Canvas
      • Career Readiness:
    • Notes
      • User Experience Design
      • User Research
      • Interaction Design
    • UX-Engineer
      • Accessibility
      • Patterns
      • Design Tools
      • UX Principles
      • Design Critiques
      • Product Review
      • Quiz
      • Seven Principles of Design
      • Other Articles
    • Labs
  • Front End
    • Frontend:
    • Redux
  • Back End
    • Backend:
      • API
  • Research
    • Research Navigation
      • Front End
      • Back End
      • UX
      • PTM
      • General
  • DS_API
    • Data Science API
  • ROLES
    • TEAM ROLES
      • Bryan Guner
  • Action Items
    • Trello
    • Maps
  • ARCHITECTURE
    • DNS
    • AWS
    • Heroku
  • Questions
    • From Previous Cohort
  • Standup Notes
    • Meeting Notes
      • Stakeholder Meeting 1
      • 9/29/2021
  • GitHub & Project Practice
    • GitHub
      • Github Guide
      • Github Actions:
      • Live Implementation
  • MISC
    • MISCELLANEOUS
      • Links
  • Background Information
    • Background Info
      • Swagger OPEN API SPECIFICATION
        • Swagger Docs (General)
      • GITHUB:
        • Git Bash
        • Git Prune:
  • DOCS
    • DS AP
    • What is JSON Web Token?
      • Environment Variables
      • Git Rebase:
      • Git Workflow:
      • Linting and Formatting
    • Project Docs
      • Eng-Docs-Home
      • Basic Node API
      • Contributing to this scaffold project
      • Examples:
    • PROJECT DESCRIPTION (Feature List)
    • Labs Learners Guide
    • REACT
      • Create React App
      • Awesome React
    • Labs Engineering Docs
      • Okta Basics
      • Roadmap
      • Repositories
  • Workflow
    • Workflow
    • Advice
  • AWS
    • AWS
      • Elastic Beanstalk
        • Elastic Beanstalk DNS
      • Amplify:
        • Amplify-DNS
    • Account Basics
    • AWS-Networking
  • Career & Job Hunt
    • Career
  • LABS
    • Introduction
    • User Stories
    • Why Pairing?
    • GitHub
    • Planning as an Engineer
    • Authentication and Authorization
      • Authentication VS Authorization
    • Giving Feedback
    • Modules Grades Understanding Your ISA
    • Rest Architecture
Powered by GitBook
On this page
  • What are Design Systems?
  • Why Use Design Systems?
  • Benefits of Design Systems
  • Industry Example: Shopify
  • Design Languages
  • What's a Design Language?
  • Industry Example: IBM
  • Pattern Libraries
  • What's a Pattern Library?
  • Industry Example: Ant Design

Was this helpful?

  1. CANVAS
  2. Design

What are Design Systems?

A design system is a comprehensive recipe of the user-facing elements that will make up a product.

What are Design Systems?

A design system is a comprehensive recipe of the user-facing elements that will make up a product.

You can think of a design system as a single source of truth for all the design-related things that go into designing and building a product.

At the core, a design system will contain definitions of components (technical documentation) and information on how those components will be used (functional documentation).

A design system can include a one or more design languages, style guides, and pattern libraries.

It can also include things like:

  • brand/identity standards

  • values

  • objectives

  • best practices for accessibility

Why use design systems? Glad you asked! Read on to find out 🙂

Why Use Design Systems?

Design systems are used to make sure there's one set of standard elements used everywhere, and everyone knows how to use them.

Benefits of Design Systems

Here are some big benefits of using a design system for your product.

Quality

The team alignment around design practices and the consistent use of elements and interactions across your product often leads to better products. That's because design systems themselves incorporate the unity principle of design, and allow us to define approaches to consistently leveraging the other principles of design throughout our product.

Speed

Once you've assembled the framework of a design system, it's often faster to build your product. That's because the team has:

  • a library of modular, reusable components to draw from and deploy.

  • a shared understanding of design decisions, so it's easy to understand how to implement components in context.

Scalability

A clear, consistent, and well-documented design system means there's less technical debt in your product's codebase. This often makes products easier to maintain and scale.

Iteration

Not having to focus as much time on building, quality assurance, and maintenance means your team can focus on building new features for your product. In many contexts, rapid iteration is a critical contributor to market success.

Industry Example: Shopify

Design Languages

What's a Design Language?

A design language is a definition of a style to drive design for a product or brand. It sets a standard for how to adhere to the style in things like the use of fonts, colors, and patterns.

Establishing a design language aligns a team on how to use components and style those components to achieve product goals in a consistent way, and it usually motivates why design decisions were made.

Design languages often include style guides and documentation.

Industry Example: IBM

Pattern Libraries

What's a Pattern Library?

A pattern library or (component library) is a collection of components and design patterns that lay out how to implement the design language specifically for a user interface. These can be symbols and assets themselves, along with descriptions of when and how to use them.

A pattern library might include code snippets for components and documentation related to each. For example, an entry for a button component in React might describe what props are available to be passed in, such as color and values for button states.

Industry Example: Ant Design

PreviousAccessibilityNextCanvas

Last updated 3 years ago

Was this helpful?

Check out for an example from the industry.

Check out for an example from the industry. It contains everything from the use of typography and color, to data visualization and layout, to the behind .

Check out for an example from the industry. Notice how the pattern library fits in with the rest of their design documentation. Getting very familiar with the Ant Design docs will pay off in Labs!

Shopify's design system (Links to an external site.)
IBM's design language (Links to an external site.)
philosophy (Links to an external site.)
the decisions they made (Links to an external site.)
Modules
Grades
Ant Design's pattern library (Links to an external site.)