react.dev/colors.js at main · reactjs/react.dev · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

/*
 * Copyright (c) Facebook, Inc. and its affiliates.
 */

module.exports = {
  // Text colors
  primary: '#23272F', // gray-90
  'primary-dark': '#F6F7F9', // gray-5
  secondary: '#404756', // gray-70
  'secondary-dark': '#EBECF0', // gray-10
  tertiary: '#5E687E', // gray-50
  'tertiary-dark': '#99A1B3', // gray-30
  link: '#087EA4', // blue-50
  'link-dark': '#58C4DC', // blue-40
  syntax: '#EBECF0', // gray-10
  wash: '#FFFFFF',
  'wash-dark': '#23272F', // gray-90
  card: '#F6F7F9', // gray-05
  'card-dark': '#343A46', // gray-80
  highlight: '#E6F7FF', // blue-10
  'highlight-dark': 'rgba(88,175,223,.1)',
  border: '#EBECF0', // gray-10
  'border-dark': '#343A46', // gray-80
  'secondary-button': '#EBECF0', // gray-10
  'secondary-button-dark': '#404756', // gray-70
  brand: '#087EA4', // blue-40
  'brand-dark': '#58C4DC', // blue-40

  // Gray
  'gray-95': '#16181D',
  'gray-90': '#23272F',
  'gray-80': '#343A46',
  'gray-70': '#404756',
  'gray-60': '#4E5769',
  'gray-50': '#5E687E',
  'gray-40': '#78839B',
  'gray-30': '#99A1B3',
  'gray-20': '#BCC1CD',
  'gray-15': '#D0D3DC',
  'gray-10': '#EBECF0',
  'gray-5': '#F6F7F9',

  // Blue
  'blue-80': '#043849',
  'blue-60': '#045975',
  'blue-50': '#087EA4',
  'blue-40': '#149ECA', // Brand Blue
  'blue-30': '#58C4DC', // unused
  'blue-20': '#ABE2ED',
  'blue-10': '#E6F7FF', // todo: doesn't match illustrations
  'blue-5': '#E6F6FA',

  // Yellow
  'yellow-60': '#B65700',
  'yellow-50': '#C76A15',
  'yellow-40': '#DB7D27', // unused
  'yellow-30': '#FABD62', // unused
  'yellow-20': '#FCDEB0', // unused
  'yellow-10': '#FDE7C7',
  'yellow-5': '#FEF5E7',

  // Purple
  'purple-60': '#2B3491', // unused
  'purple-50': '#575FB7',
  'purple-40': '#6B75DB',
  'purple-30': '#8891EC',
  'purple-20': '#C3C8F5', // unused
  'purple-10': '#E7E9FB',
  'purple-5': '#F3F4FD',

  // Green
  'green-60': '#2B6E62',
  'green-50': '#388F7F',
  'green-40': '#44AC99',
  'green-30': '#7FCCBF',
  'green-20': '#ABDED5',
  'green-10': '#E5F5F2',
  'green-5': '#F4FBF9',

  // RED
  'red-60': '#712D28',
  'red-50': '#A6423A', // unused
  'red-40': '#C1554D',
  'red-30': '#D07D77',
  'red-20': '#E5B7B3', // unused
  'red-10': '#F2DBD9', // unused
  'red-5': '#FAF1F0',

  // MISC
  'code-block': '#99a1b30f', // gray-30 @ 6%
  'gradient-blue': '#58C4DC', // Only used for the landing gradient for now.
  github: {
    highlight: '#fffbdd',
  },
};