Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Introduction to Design Systems

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Color

5:54 with Anwar Montasir

Design systems provide color documentation for three reasons: to limit the number of colors implemented by designers, to define context for color usage, and to make sure colors are used in an accessible manner.

Further Reading

Vocabulary

  • Hexadecimal values: six-character alphanumeric code used by developers to specify proportions of red, green, and blue in a color
  • Design token: when individual design language elements are purposefully defined for rapid, cross-platform developer implementation
  • Semantics: making decisions based on content meaning, not just presentation
  • Color contrast ratio: numbers comparing the contrast of the foreground color and background color to measure accessibility

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [MUSIC] 0:00
    Design systems provide color documentation for three reasons. 0:04
    To limit the number of colors implemented by designers, to define context for 0:08
    color usage, and to make sure colors are used in an accessible manner. 0:14
    The goal of Adobe's Spectrum design system is to help product designers 0:23
    create cohesive applications. 0:27
    If I've designed a grayscale wireframe for an Adobe application and reached the stage 0:30
    where I wanted to apply color to the wire frame, I couldn't choose just any color. 0:36
    To give Adobe's products a uniform feel, 0:43
    designers are limited to a specific set of grays and 0:46
    a small range of values of just four colors, blue, red, orange, and green. 0:51
    The lightest value of each hue is named 400 and 0:58
    the darkest value is named 700. 1:03
    To enable designer developer handoff, colors are defined two ways here. 1:07
    I can toggle between viewing RGB values, the mixture of red, 1:13
    green, and blue blended together to form this color. 1:18
    And hexadecimal color values, in which developers use a six character 1:22
    alphanumeric code to specify those same proportions of red, green, and blue. 1:28
    When individual design language elements are purposefully defined for rapid 1:35
    cross-platform developer implementation, this is called a design token. 1:41
    I've included links to more information about hexadecimal values and 1:47
    design tokens in the teacher's notes. 1:53
    In terms of defining context for my colors, 1:56
    Adobe provides a clear explanation under a heading called Semantic colors. 2:00
    Semantics on the web has to do with making decisions based on content meaning, 2:07
    not just presentation. 2:12
    Using color to semantically reinforce meaning is to apply color 2:15
    the way Adobe suggests, sparingly and intentionally. 2:20
    In other words, Spectrum doesn't just specify a particular set of hues and 2:25
    values. 2:30
    It also requires applying colors consistently in a manner 2:31
    appropriate to the information being delivered. 2:36
    Blue represents informative content. 2:40
    Spectrum uses red for negative feedback, like error messaging, 2:43
    and green for positive feedback, like a successfully completed task. 2:49
    A bit like a traffic light, red means stop and green means go. 2:54
    Orange is like a yellow caution light. 3:00
    The user should take notice of the information, but 3:02
    it's not necessarily positive or negative. 3:05
    For example, an orange notice might be used to warn about a feature 3:09
    that's set to expire or become outdated soon. 3:14
    Color is experienced differently by many people. 3:18
    For example, users with low vision 3:22
    struggle to read text with insufficient color contrast against its background. 3:25
    One organization, WebAIM, or Web Accessibility In Mind, provides 3:31
    resources to help you make web content, including color choice, more accessible. 3:37
    Here's a tool called the WebAIM Color Contrast checker. 3:44
    With it, you can compare a foreground color against a background color 3:48
    to determine color contrast ratio. 3:53
    The largest color contrast ratio is 21 to 1, which is pure black against pure white. 3:57
    Because the contrast is strong and 4:05
    easy to read, pure black on pure white provides a passing accessibility score. 4:08
    Let's try Adobe's blue 400, 4:14
    and oops, fail. 4:19
    Adobe fortunately realizes this contrast isn't sufficient and 4:22
    provides, under a heading called Static colors, 4:27
    a link to the WCAG, or Web Content Accessibility Guidelines. 4:31
    When contrasting with a white background, you would need to use at least 4:39
    blue 500 to achieve a passing contrast ratio for the AA accessibility standard. 4:45
    So I'll try that. 4:52
    And the combination of blue 500 and 4:59
    the white is enough to meet the minimum 4.5 to 1 contrast ratio. 5:03
    A different WebAIM article, linked in the teacher's notes below, 5:10
    discusses designing for colorblind users. 5:14
    Red and green are often indistinguishable to those with color blindness. 5:18
    Which is a challenge for designers since we so often use red for stop, 5:23
    cancel, or error indication and green for go or success messaging. 5:28
    Interestingly, the recommended solution isn't based on color choice. 5:35
    To assist colorblind users, 5:40
    make sure that colors are not your only method of conveying important information. 5:42
    The text content and visual content should additionally reinforce your messaging. 5:48

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up