Design

Apple's Color Design System for Dark and Light mode

Learn how Apple designs its Dark and Light Mode

Oct 18, 2022 | 5 min read

What is Human Interface Guidelines?

Apple’s Human Interface Guidelines (HIG) is a document that outlines the company's philosophy and approach to design of their software and hardware interfaces. The guidelines cover a wide range of topics, from the overall look and feel of the interface, to specific design elements like buttons and icons.

HIG suggest using a limited color palette for web, iOS and macOS apps. This limited color palette includes a variety of colors, but each color has a specific meaning and purpose. For example, blue is used for system controls and buttons, while green is used for success messages. While these colors have specific meanings, they can be used in a variety of ways to create a unique and visually appealing interface.

Why should you consider using it?

By using HIG’s approach to handling your project’s colors, you can ensure that your web app's color palette is consistent with the rest of the Apple operating system, making it easier for their users to navigate and use. For example, by using a consistent color scheme throughout your web app, you can help users more easily find the information they need because your use of color derives semantic meaning. By following the guidelines, you can create web apps that are not only easy to use for your users, but also look great.

Quickstart

Sass is a great tool for CSS because it allows you to keep your code clean and organized. The code block below is the configuration I use for the CMS editor and live site I’m building now — as shown in the screenshots! This approach to color management is taken directly from Apple's Human Interface Guidelines documentation. I highly recommend that any developers who are interested in color management check the Human Interface Guidelines documentation: https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/

Light Mode Variables

/**
 * Light mode defaults
 */
:root[class='light-mode']
  // Standard Content Background
  --system-background: rgba(255, 255, 255, 1)
  --secondary-system-background: #{darken(rgba(255, 255, 255, 1), 8)}
  --tertiary-system-background: #{darken(rgba(255, 255, 255, 1), 16)}
  // Grouped Content Background
  --system-grouped-background: #{darken(rgba(255, 255, 255, 1), 8)}
  --secondary-system-grouped-background: #{darken(rgba(255, 255, 255, 1), 16)}
  --tertiary-system-grouped-background: #{darken(rgba(255, 255, 255, 1), 24)}
  // Material
  --system-material: rgba(255, 255, 255, 0.94)
  --system-thick-material: rgba(255, 255, 255, 1)
  --system-thin-material: rgba(255, 255, 255, 0.88)
  --system-ultra-thin-material: rgba(255, 255, 255, 0.82)
  // Label
  --label: rgba(0, 0, 0, 0.85)
  --secondary-label: rgba(62, 62, 62, 0.5)
  --tertiary-label: #888
  --quaternary-label: #C9C9C9
  // Fill
  --system-fill: rgba(118, 118, 128, 0.6)
  --secondary-system-fill: rgba(118, 118, 128, 0.5)
  --tertiary-system-fill: rgba(118, 118, 128, 0.4)
  --quaternary-system-fill: rgba(118, 118, 128, 0.3)
  // Greys
  --system-grey: rgba(142, 142, 147, 1)
  --system-grey2: rgba(174, 174, 178, 1)
  --system-grey3: rgba(199, 199, 204, 1)
  --system-grey4: rgba(209, 209, 214, 1)
  --system-grey5: rgba(229, 229, 234, 1)
  --system-grey6: rgba(242, 242, 247, 1)
  // Tints
  --system-blue: rgba(0, 122, 255, 1)
  --system-green: rgba(52, 199, 89, 1)
  --system-indigo: rgba(88, 86, 214, 1)
  --system-orange: rgba(255, 149, 0, 1)
  --system-pink: rgba(255, 45, 85, 1)
  --system-purple: rgba(175, 82, 222, 1)
  --system-red: rgba(255, 59, 48, 1)
  --system-teal: rgba(90, 200, 250, 1)
  --system-yellow: rgba(255, 204, 0, 1)
  // Text
  --placeholder-text: rgba(142, 142, 147, 1)
  // Separator
  --separator: rgba(232, 232, 232, 0.5)
  --opaque-separator: rgba(232, 232, 232, 1)
  // Link
  --link: rgba(88, 86, 214, 1)

Dark Mode Variables

/**
 * Dark mode defaults
 */
:root,
:root[class='dark-mode']
  // Standard Content Background
  --system-background: rgba(18, 18, 18, 1)
  --secondary-system-background: #{lighten(rgba(18, 18, 18, 1), 8)}
  --tertiary-system-background: #{lighten(rgba(18, 18, 18, 1), 16)}
  // Grouped Content Background
  --system-grouped-background: #{lighten(rgba(18, 18, 18, 1), 8)}
  --secondary-system-grouped-background: #{lighten(rgba(18, 18, 18, 1), 16)}
  --tertiary-system-grouped-background: #{lighten(rgba(18, 18, 18, 1), 24)}
  // Material
  --system-material: rgba(41, 41, 41, 0.94)
  --system-thick-material: rgba(41, 41, 41, 1)
  --system-thin-material: rgba(41, 41, 41, 0.88)
  --system-ultra-thin-material: rgba(41, 41, 41, 0.82)
  // Label
  --label: #eee
  --secondary-label: #888
  --tertiary-label: #888
  --quaternary-label: #888
  // Fill
  --system-fill: rgba(118, 118, 128, 0.6)
  --secondary-system-fill: rgba(118, 118, 128, 0.5)
  --tertiary-system-fill: rgba(118, 118, 128, 0.4)
  --quaternary-system-fill: rgba(118, 118, 128, 0.3)
  // Greys
  --system-grey: rgba(142, 142, 147, 1)
  --system-grey2: rgba(99, 99, 102, 1)
  --system-grey3: rgba(72, 72, 74, 1)
  --system-grey4: rgba(58, 58, 60, 1)
  --system-grey5: rgba(44, 44, 46, 1)
  --system-grey6: rgba(28, 28, 30, 1)
  // Tints
  --system-blue: rgba(10, 132, 255, 1)
  --system-green: rgba(48, 209, 88, 1)
  --system-indigo: rgba(94, 92, 230, 1)
  --system-orange: rgba(255, 159, 10, 1)
  --system-pink: rgba(255, 55, 95, 1)
  --system-purple: rgba(191, 90, 242, 1)
  --system-red: rgba(255, 69, 58, 1)
  --system-teal: rgba(100, 210, 255, 1)
  --system-yellow: rgba(255, 214, 10, 1)
  // Text
  --placeholder-text: rgba(142, 142, 147, 1)
  // Separator
  --separator: rgba(56, 56, 56, 0.5)
  --opaque-separator: rgba(56, 56, 56, 1)
  // Link
  --link: rgba(94, 92, 230, 1)

Color Variables

/**
 * Standard Content Background
 * Use these colors for standard table views and designs that
 * have a white primary background in a light environment.
 */
$system-background: var(--system-background)
$secondary-system-background: var(--secondary-system-background)
$tertiary-system-background: var(--tertiary-system-background)

/**
 * Grouped Content Background
 * Use these colors for grouped content, including table
 * views and platter-based designs.
 */
$system-grouped-background: var(--system-grouped-background)
$secondary-system-grouped-background: var(--secondary-system-grouped-background)
$tertiary-system-grouped-background: var(--tertiary-system-grouped-background)

/**
 * Material
 */
$system-material: var(--system-material)
$system-thick-material: var(--system-thick-material)
$system-thin-material: var(--system-thin-material)
$system-ultra-thin-material: var(--system-ultra-thin-material)

/**
 * Label
 */
$label: var(--label)
$secondary-label: var(--secondary-label)
$tertiary-label: var(--tertiary-label)
$quaternary-label: var(--quaternary-label)

/**
 * Fill
 */
$system-fill: var(--system-fill)
$secondary-system-fill: var(--secondary-system-fill)
$tertiary-system-fill: var(--tertiary-system-fill)
$quaternary-system-fill: var(--quaternary-system-fill)

/**
 * Greys
 */
$system-grey: var(--system-grey)
$system-grey2: var(--system-grey2)
$system-grey3: var(--system-grey3)
$system-grey4: var(--system-grey4)
$system-grey5: var(--system-grey5)
$system-grey6: var(--system-grey6)

/**
 * Tints
 */
$system-blue: var(--system-blue)
$system-green: var(--system-green)
$system-indigo: var(--system-indigo)
$system-orange: var(--system-orange)
$system-pink: var(--system-pink)
$system-purple: var(--system-purple)
$system-red: var(--system-red)
$system-teal: var(--system-teal)
$system-yellow: var(--system-yellow)

/**
 * Text
 * The color for placeholder text in controls or text views.
 */
$placeholder-text: var(--placeholder-text)

/**
 * Separator
 */
$separator: var(--separator)
$opaque-separator: var(--opaque-separator)

/**
 * Link
 * Text that functions as a link.
 */
$link: var(--link)