Abacus DesignKit
2.0

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

Brand

  • 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

Brand

  • 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

Error

  • Error 1
    HEX
    FCFCFC
    RGB
    00 00 00 00
    Usage
    Backgrounds
    Pairs with
    Steps 11, 12 text
  • Error 2
    HEX
    F9F9F9
    RGB
    00 00 00 00
    Usage
    Backgrounds
    Pairs with
    Steps 11, 12 text
  • Error 3
    HEX
    F0F0F0
    RGB
    00 00 00 00
    Usage
    Interactive components
    Pairs with
    Step 11 labels, Step 12 text
  • Error 4
    HEX
    E8E8E8
    RGB
    00 00 00 00
    Usage
    Interactive components
    Pairs with
    Step 12 labels
  • Error 5
    HEX
    E0E0E0
    RGB
    00 00 00 00
    Usage
    Interactive components
    Pairs with
    Steps 11, 12 text
  • Error 6
    HEX
    D9D9D9
    RGB
    00 00 00 00
    Usage
    Borders and separators
    Pairs with
    Steps 1–5 backgrounds
  • Error 7
    HEX
    CECECE
    RGB
    00 00 00 00
    Usage
    Borders and separators
    Pairs with
    Steps 1–5 backgrounds
  • Error 8
    HEX
    BBB
    RGB
    00 00 00 00
    Usage
    Borders, focus rings
    Pairs with
    Steps 1–5 backgrounds
  • Error 9
    HEX
    8D8D8D
    RGB
    00 00 00 00
    Usage
    Solid backgrounds, buttons
    Pairs with
    White text
  • Error 10
    HEX
    838383
    RGB
    00 00 00 00
    Usage
    Solid backgrounds, buttons
    Pairs with
    White text
  • Error 11
    HEX
    646464
    RGB
    00 00 00 00
    Usage
    Secondary text, links
    Pairs with
    Background colors
  • Error 12
    HEX
    202020
    RGB
    00 00 00 00
    Usage
    High-contrast text
    Pairs with
    Background colors