Rerun Documentation

Rerun on GithubRerun on Figma

Color

Our color palette is specifically designed for Rerun's needs. It's optimized for dark mode, is easy on the eyes and ensures that the colors meet accessibility standards.

Alias tokens

To make Rerun consistent, use these tokens when possible.

  • Alias.Color.Surface.Default

    Background color for most UI surfaces in Rerun

    #0d1011

  • Alias.Color.Surface.Floating

    Background color for floating elements like menus, dropdown options, notifications etc.

    #181c1e

  • Alias.Color.Action.Default

    Background color for UI elements like buttons and selects

    #1c2123

  • Alias.Color.Action.Hovered

    Background color for hovered UI elements

    #212628

  • Alias.Color.Action.Active

    Background color for pressed UI elements

    #262b2e

  • Alias.Color.Action.Pressed

    Background color for supressed UI elements, like a select that is currently showing a menu

    #262b2e

  • Alias.Color.NotificationBadge.Unread

    Used for unread notification indicators

    #2a6cff

  • Alias.Color.NotificationBadge.Read

    Used for read notification indicators

    #262b2e

  • Alias.Color.Text.Default

    Default text color

    #cad8de

  • Alias.Color.Text.Subdued

    Used for less important text

    #7d8c92

  • Alias.Color.Text.Strong

    Used for highlighted or emphasized items, such as current navigation items

    #ffffff

  • Alias.Color.Border.Default

    Default color for borders

    #7c7c7c20

  • Alias.Color.Icon.Default

    Default icon color

    #cad8de

  • Alias.Color.Icon.Subdued

    Used together with subdued text

    #7d8c92

  • Alias.Color.Icon.Strong

    Used together width strong text

    #ffffff

  • Alias.Color.Highlight.Default

    Default color for highlighted items, like hovered menu items

    #003da1

Global tokens

If possible, avoid using these.

  • Global.Color.Grey.0

    0 - 0

    #000000

  • Global.Color.Grey.25

    0.7405999850077014 - 0.025

    #020303

  • Global.Color.Grey.50

    1.7116872276823336 - 0.05

    #050607

  • Global.Color.Grey.75

    2.911127985087129 - 0.075

    #090b0c

  • Global.Color.Grey.100

    4.335380638931743 - 0.1

    #0d1011

  • Global.Color.Grey.125

    5.979517530826747 - 0.125

    #111415

  • Global.Color.Grey.150

    7.837255342936205 - 0.15

    #141819

  • Global.Color.Grey.175

    9.90099383672154 - 0.175

    #181c1e

  • Global.Color.Grey.200

    12.16186271093947 - 0.2

    #1c2123

  • Global.Color.Grey.225

    14.609776289998841 - 0.225

    #212628

  • Global.Color.Grey.250

    17.233495705504463 - 0.25

    #262b2e

  • Global.Color.Grey.275

    20.02069818761812 - 0.275

    #2b3134

  • Global.Color.Grey.300

    22.958053039032254 - 0.3

    #31383b

  • Global.Color.Grey.325

    26.03130382315192 - 0.325

    #373f42

  • Global.Color.Grey.350

    29.22535625976699 - 0.35

    #3e464a

  • Global.Color.Grey.375

    32.524371286309126 - 0.375

    #454e52

  • Global.Color.Grey.400

    35.91186271093947 - 0.4

    #4c565a

  • Global.Color.Grey.425

    39.37079885540354 - 0.425

    #545e63

  • Global.Color.Grey.450

    42.88370756099135 - 0.45

    #5c676c

  • Global.Color.Grey.475

    46.43278391020581 - 0.475

    #647075

  • Global.Color.Grey.500

    49.99999999999999 - 0.5

    #6c797f

  • Global.Color.Grey.525

    53.56721608979418 - 0.525

    #748288

  • Global.Color.Grey.550

    57.11629243900867 - 0.55

    #7d8c92

  • Global.Color.Grey.575

    60.62920114459644 - 0.575

    #85959c

  • Global.Color.Grey.600

    64.08813728906053 - 0.6

    #8e9ea5

  • Global.Color.Grey.625

    67.47562871369087 - 0.625

    #96a7af

  • Global.Color.Grey.650

    70.774643740233 - 0.65

    #9eb0b8

  • Global.Color.Grey.675

    73.96869617684807 - 0.675

    #a6b9c1

  • Global.Color.Grey.700

    77.04194696096773 - 0.7

    #aec2ca

  • Global.Color.Grey.725

    79.97930181238189 - 0.725

    #b6cad2

  • Global.Color.Grey.750

    82.76650429449552 - 0.75

    #c0d1d8

  • Global.Color.Grey.775

    85.39022371000115 - 0.775

    #cad8de

  • Global.Color.Grey.800

    87.83813728906054 - 0.8

    #d3dee3

  • Global.Color.Grey.825

    90.09900616327847 - 0.825

    #dbe4e8

  • Global.Color.Grey.850

    92.16274465706378 - 0.85

    #e3eaed

  • Global.Color.Grey.875

    94.02048246917325 - 0.875

    #e9eff1

  • Global.Color.Grey.900

    95.66461936106825 - 0.9

    #eff3f5

  • Global.Color.Grey.925

    97.08887201491288 - 0.925

    #f4f7f8

  • Global.Color.Grey.950

    98.28831277231767 - 0.95

    #f9fafb

  • Global.Color.Grey.975

    99.25940001499231 - 0.975

    #fcfdfd

  • Global.Color.Grey.1000

    100 - 1

    #ffffff

  • Global.Color.Green.0

    0 - 0

    #000000

  • Global.Color.Green.25

    0.7405999850077014 - 0.025

    #000401

  • Global.Color.Green.50

    1.7116872276823336 - 0.05

    #000803

  • Global.Color.Green.75

    2.911127985087129 - 0.075

    #000e04

  • Global.Color.Green.100

    4.335380638931743 - 0.1

    #001306

  • Global.Color.Green.125

    5.979517530826747 - 0.125

    #001809

  • Global.Color.Green.150

    7.837255342936205 - 0.15

    #001c0b

  • Global.Color.Green.175

    9.90099383672154 - 0.175

    #00210e

  • Global.Color.Green.200

    12.16186271093947 - 0.2

    #002611

  • Global.Color.Green.225

    14.609776289998841 - 0.225

    #002c15

  • Global.Color.Green.250

    17.233495705504463 - 0.25

    #003219

  • Global.Color.Green.275

    20.02069818761812 - 0.275

    #00391d

  • Global.Color.Green.300

    22.958053039032254 - 0.3

    #004021

  • Global.Color.Green.325

    26.03130382315192 - 0.325

    #004826

  • Global.Color.Green.350

    29.22535625976699 - 0.35

    #00502b

  • Global.Color.Green.375

    32.524371286309126 - 0.375

    #005930

  • Global.Color.Green.400

    35.91186271093947 - 0.4

    #006236

  • Global.Color.Green.425

    39.37079885540354 - 0.425

    #006b3b

  • Global.Color.Green.450

    42.88370756099135 - 0.45

    #007541

  • Global.Color.Green.475

    46.43278391020581 - 0.475

    #007f47

  • Global.Color.Green.500

    49.99999999999999 - 0.5

    #00894d

  • Global.Color.Green.525

    53.56721608979418 - 0.525

    #009353

  • Global.Color.Green.550

    57.11629243900867 - 0.55

    #009e5a

  • Global.Color.Green.575

    60.62920114459644 - 0.575

    #00a860

  • Global.Color.Green.600

    64.08813728906053 - 0.6

    #00b266

  • Global.Color.Green.625

    67.47562871369087 - 0.625

    #00bc6c

  • Global.Color.Green.650

    70.774643740233 - 0.65

    #00c772

  • Global.Color.Green.675

    73.96869617684807 - 0.675

    #00d078

  • Global.Color.Green.700

    77.04194696096773 - 0.7

    #00da7e

  • Global.Color.Green.725

    79.97930181238189 - 0.725

    #00e384

  • Global.Color.Green.750

    82.76650429449552 - 0.75

    #00ec89

  • Global.Color.Green.775

    85.39022371000115 - 0.775

    #00f48e

  • Global.Color.Green.800

    87.83813728906054 - 0.8

    #00fc93

  • Global.Color.Green.825

    90.09900616327847 - 0.825

    #5cffa5

  • Global.Color.Green.850

    92.16274465706378 - 0.85

    #91ffbb

  • Global.Color.Green.875

    94.02048246917325 - 0.875

    #b2ffcd

  • Global.Color.Green.900

    95.66461936106825 - 0.9

    #caffdc

  • Global.Color.Green.925

    97.08887201491288 - 0.925

    #ddffe8

  • Global.Color.Green.950

    98.28831277231767 - 0.95

    #ebfff1

  • Global.Color.Green.975

    99.25940001499231 - 0.975

    #f7fff9

  • Global.Color.Green.1000

    100 - 1

    #ffffff

  • Global.Color.Red.0

    0 - 0

    #000000

  • Global.Color.Red.25

    0.7405999850077014 - 0.025

    #0c0001

  • Global.Color.Red.50

    1.7116872276823336 - 0.05

    #170003

  • Global.Color.Red.75

    2.911127985087129 - 0.075

    #200005

  • Global.Color.Red.100

    4.335380638931743 - 0.1

    #290007

  • Global.Color.Red.125

    5.979517530826747 - 0.125

    #310009

  • Global.Color.Red.150

    7.837255342936205 - 0.15

    #38000c

  • Global.Color.Red.175

    9.90099383672154 - 0.175

    #40000f

  • Global.Color.Red.200

    12.16186271093947 - 0.2

    #480012

  • Global.Color.Red.225

    14.609776289998841 - 0.225

    #520016

  • Global.Color.Red.250

    17.233495705504463 - 0.25

    #5c001a

  • Global.Color.Red.275

    20.02069818761812 - 0.275

    #67001e

  • Global.Color.Red.300

    22.958053039032254 - 0.3

    #730022

  • Global.Color.Red.325

    26.03130382315192 - 0.325

    #800027

  • Global.Color.Red.350

    29.22535625976699 - 0.35

    #8e002c

  • Global.Color.Red.375

    32.524371286309126 - 0.375

    #9c0031

  • Global.Color.Red.400

    35.91186271093947 - 0.4

    #ab0037

  • Global.Color.Red.425

    39.37079885540354 - 0.425

    #bb003d

  • Global.Color.Red.450

    42.88370756099135 - 0.45

    #cb0043

  • Global.Color.Red.475

    46.43278391020581 - 0.475

    #db0049

  • Global.Color.Red.500

    49.99999999999999 - 0.5

    #ec004f

  • Global.Color.Red.525

    53.56721608979418 - 0.525

    #fd0056

  • Global.Color.Red.550

    57.11629243900867 - 0.55

    #ff3865

  • Global.Color.Red.575

    60.62920114459644 - 0.575

    #ff5474

  • Global.Color.Red.600

    64.08813728906053 - 0.6

    #ff6981

  • Global.Color.Red.625

    67.47562871369087 - 0.625

    #ff7a8e

  • Global.Color.Red.650

    70.774643740233 - 0.65

    #ff8a9a

  • Global.Color.Red.675

    73.96869617684807 - 0.675

    #ff99a6

  • Global.Color.Red.700

    77.04194696096773 - 0.7

    #ffa6b1

  • Global.Color.Red.725

    79.97930181238189 - 0.725

    #ffb2bb

  • Global.Color.Red.750

    82.76650429449552 - 0.75

    #ffbdc5

  • Global.Color.Red.775

    85.39022371000115 - 0.775

    #ffc8ce

  • Global.Color.Red.800

    87.83813728906054 - 0.8

    #ffd1d6

  • Global.Color.Red.825

    90.09900616327847 - 0.825

    #ffdade

  • Global.Color.Red.850

    92.16274465706378 - 0.85

    #ffe2e5

  • Global.Color.Red.875

    94.02048246917325 - 0.875

    #ffe9eb

  • Global.Color.Red.900

    95.66461936106825 - 0.9

    #ffeff0

  • Global.Color.Red.925

    97.08887201491288 - 0.925

    #fff4f5

  • Global.Color.Red.950

    98.28831277231767 - 0.95

    #fff9f9

  • Global.Color.Red.975

    99.25940001499231 - 0.975

    #fffcfd

  • Global.Color.Red.1000

    100 - 1

    #ffffff

  • Global.Color.Blue.0

    0 - 0

    #000000

  • Global.Color.Blue.25

    0.7405999850077014 - 0.025

    #00020f

  • Global.Color.Blue.50

    1.7116872276823336 - 0.05

    #00051c

  • Global.Color.Blue.75

    2.911127985087129 - 0.075

    #000826

  • Global.Color.Blue.100

    4.335380638931743 - 0.1

    #000c30

  • Global.Color.Blue.125

    5.979517530826747 - 0.125

    #001038

  • Global.Color.Blue.150

    7.837255342936205 - 0.15

    #001441

  • Global.Color.Blue.175

    9.90099383672154 - 0.175

    #001749

  • Global.Color.Blue.200

    12.16186271093947 - 0.2

    #001b53

  • Global.Color.Blue.225

    14.609776289998841 - 0.225

    #00205e

  • Global.Color.Blue.250

    17.233495705504463 - 0.25

    #002569

  • Global.Color.Blue.275

    20.02069818761812 - 0.275

    #002a76

  • Global.Color.Blue.300

    22.958053039032254 - 0.3

    #003084

  • Global.Color.Blue.325

    26.03130382315192 - 0.325

    #003692

  • Global.Color.Blue.350

    29.22535625976699 - 0.35

    #003da1

  • Global.Color.Blue.375

    32.524371286309126 - 0.375

    #0044b2

  • Global.Color.Blue.400

    35.91186271093947 - 0.4

    #004bc2

  • Global.Color.Blue.425

    39.37079885540354 - 0.425

    #0053d4

  • Global.Color.Blue.450

    42.88370756099135 - 0.45

    #005ae6

  • Global.Color.Blue.475

    46.43278391020581 - 0.475

    #0062f9

  • Global.Color.Blue.500

    49.99999999999999 - 0.5

    #2a6cff

  • Global.Color.Blue.525

    53.56721608979418 - 0.525

    #4676ff

  • Global.Color.Blue.550

    57.11629243900867 - 0.55

    #5a81ff

  • Global.Color.Blue.575

    60.62920114459644 - 0.575

    #6b8bff

  • Global.Color.Blue.600

    64.08813728906053 - 0.6

    #7a95ff

  • Global.Color.Blue.625

    67.47562871369087 - 0.625

    #899fff

  • Global.Color.Blue.650

    70.774643740233 - 0.65

    #96a8ff

  • Global.Color.Blue.675

    73.96869617684807 - 0.675

    #a2b2ff

  • Global.Color.Blue.700

    77.04194696096773 - 0.7

    #adbbff

  • Global.Color.Blue.725

    79.97930181238189 - 0.725

    #b8c3ff

  • Global.Color.Blue.750

    82.76650429449552 - 0.75

    #c2ccff

  • Global.Color.Blue.775

    85.39022371000115 - 0.775

    #ccd3ff

  • Global.Color.Blue.800

    87.83813728906054 - 0.8

    #d4dbff

  • Global.Color.Blue.825

    90.09900616327847 - 0.825

    #dce1ff

  • Global.Color.Blue.850

    92.16274465706378 - 0.85

    #e4e7ff

  • Global.Color.Blue.875

    94.02048246917325 - 0.875

    #eaedff

  • Global.Color.Blue.900

    95.66461936106825 - 0.9

    #f0f2ff

  • Global.Color.Blue.925

    97.08887201491288 - 0.925

    #f5f6ff

  • Global.Color.Blue.950

    98.28831277231767 - 0.95

    #f9faff

  • Global.Color.Blue.975

    99.25940001499231 - 0.975

    #fcfdff

  • Global.Color.Blue.1000

    100 - 1

    #ffffff

  • Global.Color.Purple.0

    0 - 0

    #000000

  • Global.Color.Purple.25

    0.7405999850077014 - 0.025

    #060011

  • Global.Color.Purple.50

    1.7116872276823336 - 0.05

    #0e001e

  • Global.Color.Purple.75

    2.911127985087129 - 0.075

    #150029

  • Global.Color.Purple.100

    4.335380638931743 - 0.1

    #1b0033

  • Global.Color.Purple.125

    5.979517530826747 - 0.125

    #21003d

  • Global.Color.Purple.150

    7.837255342936205 - 0.15

    #270046

  • Global.Color.Purple.175

    9.90099383672154 - 0.175

    #2d004f

  • Global.Color.Purple.200

    12.16186271093947 - 0.2

    #330059

  • Global.Color.Purple.225

    14.609776289998841 - 0.225

    #3a0065

  • Global.Color.Purple.250

    17.233495705504463 - 0.25

    #420071

  • Global.Color.Purple.275

    20.02069818761812 - 0.275

    #4b007e

  • Global.Color.Purple.300

    22.958053039032254 - 0.3

    #54008d

  • Global.Color.Purple.325

    26.03130382315192 - 0.325

    #5d009c

  • Global.Color.Purple.350

    29.22535625976699 - 0.35

    #6800ad

  • Global.Color.Purple.375

    32.524371286309126 - 0.375

    #7200be

  • Global.Color.Purple.400

    35.91186271093947 - 0.4

    #7e00d0

  • Global.Color.Purple.425

    39.37079885540354 - 0.425

    #8a00e2

  • Global.Color.Purple.450

    42.88370756099135 - 0.45

    #9600f6

  • Global.Color.Purple.475

    46.43278391020581 - 0.475

    #9e22ff

  • Global.Color.Purple.500

    49.99999999999999 - 0.5

    #a23eff

  • Global.Color.Purple.525

    53.56721608979418 - 0.525

    #a752ff

  • Global.Color.Purple.550

    57.11629243900867 - 0.55

    #ac63ff

  • Global.Color.Purple.575

    60.62920114459644 - 0.575

    #b273ff

  • Global.Color.Purple.600

    64.08813728906053 - 0.6

    #b780ff

  • Global.Color.Purple.625

    67.47562871369087 - 0.625

    #bd8eff

  • Global.Color.Purple.650

    70.774643740233 - 0.65

    #c39aff

  • Global.Color.Purple.675

    73.96869617684807 - 0.675

    #c9a5ff

  • Global.Color.Purple.700

    77.04194696096773 - 0.7

    #cfb0ff

  • Global.Color.Purple.725

    79.97930181238189 - 0.725

    #d4bbff

  • Global.Color.Purple.750

    82.76650429449552 - 0.75

    #dac4ff

  • Global.Color.Purple.775

    85.39022371000115 - 0.775

    #dfcdff

  • Global.Color.Purple.800

    87.83813728906054 - 0.8

    #e4d6ff

  • Global.Color.Purple.825

    90.09900616327847 - 0.825

    #e9ddff

  • Global.Color.Purple.850

    92.16274465706378 - 0.85

    #eee4ff

  • Global.Color.Purple.875

    94.02048246917325 - 0.875

    #f2ebff

  • Global.Color.Purple.900

    95.66461936106825 - 0.9

    #f5f0ff

  • Global.Color.Purple.925

    97.08887201491288 - 0.925

    #f8f5ff

  • Global.Color.Purple.950

    98.28831277231767 - 0.95

    #fbf9ff

  • Global.Color.Purple.975

    99.25940001499231 - 0.975

    #fdfcff

  • Global.Color.Purple.1000

    100 - 1

    #ffffff

  • Global.Color.OpaqueGrey.Default

    An opaque grey that picks up some, but not all, of the colors behind it

    #7c7c7c20