Colors

The color scheme is intentionally kept simple. Generally, there are 10 neutral shades that are used for the majority of elements, and 5 colors used for highlights. Minor variations have been added for specific purposes like interactive states and unique components.

The scheme has two variations, for dark and light modes.

Primary & accents

Orange is the primary color used to indicate interactive elements. Orange light 1 & 2 are used for interaction states (hover, press). The other colors are used more freely.

  1. Orange

    #F7931A

    #F89B2A

  2. Orange light 1

    #FFAD4A

    #FFAD4A

  3. Orange light 2

    #FFBF72

    #FFBF72

  4. Red

    #EB5757

    #EC6363

  5. Green

    #27AE60

    #36B46B

  6. Blue

    #2D9CDB

    #3CA3DE

  7. Purple

    #BB6BD9

    #C075DC

Neutrals

  1. Neutral 9

    #000000

    #FFFFFF

  2. Neutral 8

    #404040

    #B0B0B0

  3. Neutral 7

    #777777

    #949494

  4. Neutral 6

    #999999

    #787878

  5. Neutral 5

    #BBBBBB

    #5C5C5C

  6. Neutral 4

    #DEDEDE

    #444444

  7. Neutral 3

    #EDEDED

    #2D2D2D

  8. Neutral 2

    #F4F4F4

    #1A1A1A

  9. Neutral 1

    #F8F8F8

    #A1A1A1

  10. Neutral 0

    #FFFFFF

    #000000

Confirmations

These are used in the block status and may potentially be used in future UI additions to represent the number of confirmations a block or transaction has.

  1. Confirmations 1

    #FF1C1C

    #FF1C1C

  2. Confirmations 2

    #ED6E46

    #ED6E46

  3. Confirmations 3

    #EE8847

    #EE8847

  4. Confirmations 4

    #EFA148

    #EFA148

  5. Confirmations 5

    #F0BB49

    #F0BB49

  6. Confirmations 6

    #F1D54A

    #F1D54A

Green to red gradient

In the peer details, a gradient from green to red is used to convey how relatively “good” or “bad” a value is in context. The colors are linearly distributed and can also be automatically calculated via the green and red values above.

  1. Green

    #27AE60

    #36B46B

  2. Green-red 1

    #3DA45F

    #4AAB6A

  3. Green-red 2

    #529B5E

    #5EA269

  4. Green-red 3

    #68915D

    #729968

  5. Green-red 4

    #7D885C

    #869067

  6. Green-red 5

    #937E5B

    #9A8767

  7. Green-red 6

    #A8755A

    #AE7F66

  8. Green-red 7

    #BE6B59

    #C27665

  9. Green-red 8

    #D36158

    #D66D64

  10. Red

    #EB5757

    #EC6363