Colors

Neutral

  • Neutral 1

    HEX
    FCFCFC
    RGB
    00 00 00 00
    Usage
    Backgrounds
    Pairs with
    Steps 11, 12 text

  • Neutral 2

    HEX
    F9F9F9
    RGB
    00 00 00 00
    Usage
    Backgrounds
    Pairs with
    Steps 11, 12 text

  • Neutral 3

    HEX
    F0F0F0
    RGB
    00 00 00 00
    Usage
    Interactive components
    Pairs with
    Step 11 labels, Step 12 text

  • Neutral 4

    HEX
    E8E8E8
    RGB
    00 00 00 00
    Usage
    Interactive components
    Pairs with
    Step 12 labels

  • Neutral 5

    HEX
    E0E0E0
    RGB
    00 00 00 00
    Usage
    Interactive components
    Pairs with
    Steps 11, 12 text

  • Neutral 6

    HEX
    D9D9D9
    RGB
    00 00 00 00
    Usage
    Borders and separators
    Pairs with
    Steps 1–5 backgrounds

  • Neutral 7

    HEX
    CECECE
    RGB
    00 00 00 00
    Usage
    Borders and separators
    Pairs with
    Steps 1–5 backgrounds

  • Neutral 8

    HEX
    BBB
    RGB
    00 00 00 00
    Usage
    Borders, focus rings
    Pairs with
    Steps 1–5 backgrounds

  • Neutral 9

    HEX
    8D8D8D
    RGB
    00 00 00 00
    Usage
    Solid backgrounds, buttons
    Pairs with
    White text

  • Neutral 10

    HEX
    838383
    RGB
    00 00 00 00
    Usage
    Solid backgrounds, buttons
    Pairs with
    White text

  • Neutral 11

    HEX
    646464
    RGB
    00 00 00 00
    Usage
    Secondary text, links
    Pairs with
    Background colors

  • Neutral 12

    HEX
    202020
    RGB
    00 00 00 00
    Usage
    High-contrast text
    Pairs with
    Background colors

Accent

  • Brand 1

    HEX
    FCFCFC
    RGB
    00 00 00 00
    Usage
    Backgrounds
    Pairs with
    Steps 11, 12 text

  • Brand 2

    HEX
    F9F9F9
    RGB
    00 00 00 00
    Usage
    Backgrounds
    Pairs with
    Steps 11, 12 text

  • Brand 3

    HEX
    F0F0F0
    RGB
    00 00 00 00
    Usage
    Interactive components
    Pairs with
    Step 11 labels, Step 12 text

  • Brand 4

    HEX
    E8E8E8
    RGB
    00 00 00 00
    Usage
    Interactive components
    Pairs with
    Step 12 labels

  • Brand 5

    HEX
    E0E0E0
    RGB
    00 00 00 00
    Usage
    Interactive components
    Pairs with
    Steps 11, 12 text

  • Brand 6

    HEX
    D9D9D9
    RGB
    00 00 00 00
    Usage
    Borders and separators
    Pairs with
    Steps 1–5 backgrounds

  • Brand 7

    HEX
    CECECE
    RGB
    00 00 00 00
    Usage
    Borders and separators
    Pairs with
    Steps 1–5 backgrounds

  • Brand 8

    HEX
    BBB
    RGB
    00 00 00 00
    Usage
    Borders, focus rings
    Pairs with
    Steps 1–5 backgrounds

  • Brand 9

    HEX
    8D8D8D
    RGB
    00 00 00 00
    Usage
    Solid backgrounds, buttons
    Pairs with
    White text

  • Brand 10

    HEX
    838383
    RGB
    00 00 00 00
    Usage
    Solid backgrounds, buttons
    Pairs with
    White text

  • Brand 11

    HEX
    646464
    RGB
    00 00 00 00
    Usage
    Secondary text, links
    Pairs with
    Background colors

  • Brand 12

    HEX
    202020
    RGB
    00 00 00 00
    Usage
    High-contrast text
    Pairs with
    Background colors

Success

  • Success 1

    HEX
    FCFCFC
    RGB
    00 00 00 00
    Usage
    Backgrounds
    Pairs with
    Steps 11, 12 text

  • Success 2

    HEX
    F9F9F9
    RGB
    00 00 00 00
    Usage
    Backgrounds
    Pairs with
    Steps 11, 12 text

  • Success 3

    HEX
    F0F0F0
    RGB
    00 00 00 00
    Usage
    Interactive components
    Pairs with
    Step 11 labels, Step 12 text

  • Success 4

    HEX
    E8E8E8
    RGB
    00 00 00 00
    Usage
    Interactive components
    Pairs with
    Step 12 labels

  • Success 5

    HEX
    E0E0E0
    RGB
    00 00 00 00
    Usage
    Interactive components
    Pairs with
    Steps 11, 12 text

  • Success 6

    HEX
    D9D9D9
    RGB
    00 00 00 00
    Usage
    Borders and separators
    Pairs with
    Steps 1–5 backgrounds

  • Success 7

    HEX
    CECECE
    RGB
    00 00 00 00
    Usage
    Borders and separators
    Pairs with
    Steps 1–5 backgrounds

  • Success 8

    HEX
    BBB
    RGB
    00 00 00 00
    Usage
    Borders, focus rings
    Pairs with
    Steps 1–5 backgrounds

  • Success 9

    HEX
    8D8D8D
    RGB
    00 00 00 00
    Usage
    Solid backgrounds, buttons
    Pairs with
    White text

  • Success 10

    HEX
    838383
    RGB
    00 00 00 00
    Usage
    Solid backgrounds, buttons
    Pairs with
    White text

  • Success 11

    HEX
    646464
    RGB
    00 00 00 00
    Usage
    Secondary text, links
    Pairs with
    Background colors

  • Success 12

    HEX
    202020
    RGB
    00 00 00 00
    Usage
    High-contrast text
    Pairs with
    Background colors

Warning

  • Warning 1

    HEX
    FCFCFC
    RGB
    00 00 00 00
    Usage
    Backgrounds
    Pairs with
    Steps 11, 12 text

  • Warning 2

    HEX
    F9F9F9
    RGB
    00 00 00 00
    Usage
    Backgrounds
    Pairs with
    Steps 11, 12 text

  • Warning 3

    HEX
    F0F0F0
    RGB
    00 00 00 00
    Usage
    Interactive components
    Pairs with
    Step 11 labels, Step 12 text

  • Warning 4

    HEX
    E8E8E8
    RGB
    00 00 00 00
    Usage
    Interactive components
    Pairs with
    Step 12 labels

  • Warning 5

    HEX
    E0E0E0
    RGB
    00 00 00 00
    Usage
    Interactive components
    Pairs with
    Steps 11, 12 text

  • Warning 6

    HEX
    D9D9D9
    RGB
    00 00 00 00
    Usage
    Borders and separators
    Pairs with
    Steps 1–5 backgrounds

  • Warning 7

    HEX
    CECECE
    RGB
    00 00 00 00
    Usage
    Borders and separators
    Pairs with
    Steps 1–5 backgrounds

  • Warning 8

    HEX
    BBB
    RGB
    00 00 00 00
    Usage
    Borders, focus rings
    Pairs with
    Steps 1–5 backgrounds

  • Warning 9

    HEX
    8D8D8D
    RGB
    00 00 00 00
    Usage
    Solid backgrounds, buttons
    Pairs with
    White text

  • Warning 10

    HEX
    838383
    RGB
    00 00 00 00
    Usage
    Solid backgrounds, buttons
    Pairs with
    White text

  • Warning 11

    HEX
    646464
    RGB
    00 00 00 00
    Usage
    Secondary text, links
    Pairs with
    Background colors

  • Warning 12

    HEX
    202020
    RGB
    00 00 00 00
    Usage
    High-contrast text
    Pairs with
    Background colors

Danger

  • Danger 1

    HEX
    FCFCFC
    RGB
    00 00 00 00
    Usage
    Backgrounds
    Pairs with
    Steps 11, 12 text

  • Danger 2

    HEX
    F9F9F9
    RGB
    00 00 00 00
    Usage
    Backgrounds
    Pairs with
    Steps 11, 12 text

  • Danger 3

    HEX
    F0F0F0
    RGB
    00 00 00 00
    Usage
    Interactive components
    Pairs with
    Step 11 labels, Step 12 text

  • Danger 4

    HEX
    E8E8E8
    RGB
    00 00 00 00
    Usage
    Interactive components
    Pairs with
    Step 12 labels

  • Danger 5

    HEX
    E0E0E0
    RGB
    00 00 00 00
    Usage
    Interactive components
    Pairs with
    Steps 11, 12 text

  • Danger 6

    HEX
    D9D9D9
    RGB
    00 00 00 00
    Usage
    Borders and separators
    Pairs with
    Steps 1–5 backgrounds

  • Danger 7

    HEX
    CECECE
    RGB
    00 00 00 00
    Usage
    Borders and separators
    Pairs with
    Steps 1–5 backgrounds

  • Danger 8

    HEX
    BBB
    RGB
    00 00 00 00
    Usage
    Borders, focus rings
    Pairs with
    Steps 1–5 backgrounds

  • Danger 9

    HEX
    8D8D8D
    RGB
    00 00 00 00
    Usage
    Solid backgrounds, buttons
    Pairs with
    White text

  • Danger 10

    HEX
    838383
    RGB
    00 00 00 00
    Usage
    Solid backgrounds, buttons
    Pairs with
    White text

  • Danger 11

    HEX
    646464
    RGB
    00 00 00 00
    Usage
    Secondary text, links
    Pairs with
    Background colors

  • Danger 12

    HEX
    202020
    RGB
    00 00 00 00
    Usage
    High-contrast text
    Pairs with
    Background colors