ArteOdyssey
Color
Radius
Typography
Spacing
Components
Neutral Color
グレースケールを元にした色、理由がない限りこの色を利用する
Foreground Color
色の情報（light / dark）
基本色: gray.900 / gray.50
HEX: #18181b / #fafafa
RGB: 24,24,27 / 250,250,250
HSL: 240,6,10 / 0,0,1
色のコントラスト
base
17.72
16.97
base-subtle
16.12
14.27
base-mute
13.96
10.01
base-emphasize
11.99
7.41
base-inverse
1
1.04
primary
11.98
7.41
primary-subtle
15.72
15.22
primary-mute
14.05
10.72
primary-emphasize
11.98
7.41
secondary
12.22
7.21
secondary-subtle
15.83
14.4
secondary-mute
14.2
10.56
secondary-emphasize
12.22
7.21
info
14.52
15.07
success
16.13
15.42
warning
16.5
13.96
error
14.5
17
色の情報（light / dark）
基本色: gray.400 / gray.500
HEX: #a1a1aa / #71717a
RGB: 161,161,170 / 113,113,122
HSL: 240,5,65 / 240,4,46
色のコントラスト
base
2.56
3.67
base-subtle
2.33
3.08
base-mute
2.02
2.16
base-emphasize
1.73
1.6
base-inverse
6.91
4.83
primary
1.73
1.6
primary-subtle
2.27
3.29
primary-mute
2.03
2.31
primary-emphasize
1.73
1.6
secondary
1.77
1.56
secondary-subtle
2.29
3.11
secondary-mute
2.05
2.28
secondary-emphasize
1.77
1.56
info
2.1
3.25
success
2.33
3.33
warning
2.39
3.02
error
2.1
3.67
色の情報（light / dark）
基本色: gray.700 / gray.300
HEX: #3f3f46 / #d4d4d8
RGB: 63,63,70 / 212,212,216
HSL: 240,5,26 / 240,5,84
色のコントラスト
base
10.44
11.99
base-subtle
9.5
10.08
base-mute
8.23
7.07
base-emphasize
7.07
5.23
base-inverse
1.7
1.48
primary
7.06
5.23
primary-subtle
9.27
10.75
primary-mute
8.28
7.57
primary-emphasize
7.06
5.23
secondary
7.2
5.09
secondary-subtle
9.33
10.17
secondary-mute
8.37
7.46
secondary-emphasize
7.2
5.09
info
8.56
10.64
success
9.51
10.89
warning
9.72
9.86
error
8.55
12
色の情報（light / dark）
基本色: gray.50 / gray.900
HEX: #fafafa / #18181b
RGB: 250,250,250 / 24,24,27
HSL: 0,0,1 / 240,6,10
色のコントラスト
base
1.04
1
base-subtle
1.05
1.19
base-mute
1.22
1.7
base-emphasize
1.42
2.29
base-inverse
16.97
17.72
primary
1.42
2.29
primary-subtle
1.08
1.12
primary-mute
1.21
1.58
primary-emphasize
1.42
2.29
secondary
1.39
2.35
secondary-subtle
1.07
1.18
secondary-mute
1.2
1.61
secondary-emphasize
1.39
2.35
info
1.17
1.13
success
1.05
1.1
warning
1.03
1.22
error
1.17
1
Background Color
色の情報（light / dark）
基本色: white / gray.900
HEX: #ffffff / #18181b
RGB: 255,255,255 / 24,24,27
HSL: 0,0,1 / 240,6,10
色のコントラスト
base
17.72
16.97
subtle
2.56
3.67
mute
10.44
11.99
inverse
1.04
1
primary
7.73
11.98
secondary
7.53
12.22
info
9.31
10.91
success
6.79
12.62
warning
6.58
13.44
error
8.37
9.33
色の情報（light / dark）
基本色: gray.100 / gray.800
HEX: #f4f4f5 / #27272a
RGB: 244,244,245 / 39,39,42
HSL: 240,5,96 / 240,4,16
色のコントラスト
base
16.12
14.27
subtle
2.33
3.08
mute
9.5
10.08
inverse
1.05
1.19
primary
7.04
10.07
secondary
6.85
10.28
info
8.47
9.17
success
6.18
10.61
warning
5.99
11.3
error
7.62
7.85
色の情報（light / dark）
基本色: gray.200 / gray.700
HEX: #e4e4e7 / #3f3f46
RGB: 228,228,231 / 63,63,70
HSL: 240,6,90 / 240,5,26
色のコントラスト
base
13.96
10.01
subtle
2.02
2.16
mute
8.23
7.07
inverse
1.22
1.7
primary
6.09
7.06
secondary
5.93
7.2
info
7.34
6.43
success
5.36
7.44
warning
5.18
7.92
error
6.6
5.5
色の情報（light / dark）
基本色: gray.300 / gray.600
HEX: #d4d4d8 / #52525b
RGB: 212,212,216 / 82,82,91
HSL: 240,5,84 / 240,5,34
色のコントラスト
base
11.99
7.41
subtle
1.73
1.6
mute
7.07
5.23
inverse
1.42
2.29
primary
5.23
5.23
secondary
5.09
5.33
info
6.3
4.76
success
4.6
5.51
warning
4.45
5.86
error
5.67
4.07
色の情報（light / dark）
基本色: gray.900 / white
HEX: #18181b / #ffffff
RGB: 24,24,27 / 255,255,255
HSL: 240,6,10 / 0,0,1
色のコントラスト
base
1
1.04
subtle
6.91
4.83
mute
1.7
1.48
inverse
16.97
17.72
primary
2.29
1.48
secondary
2.35
1.45
info
1.9
1.62
success
2.61
1.4
warning
2.69
1.32
error
2.12
1.9
Border Color
色の情報（light / dark）
基本色: gray.400 / gray.600
HEX: #a1a1aa / #52525b
RGB: 161,161,170 / 82,82,91
HSL: 240,5,65 / 240,5,34
色の情報（light / dark）
基本色: gray.100 / gray.900
HEX: #f4f4f5 / #18181b
RGB: 244,244,245 / 24,24,27
HSL: 240,5,96 / 240,6,10
色の情報（light / dark）
基本色: gray.200 / gray.800
HEX: #e4e4e7 / #27272a
RGB: 228,228,231 / 39,39,42
HSL: 240,6,90 / 240,4,16
色の情報（light / dark）
基本色: gray.500 / gray.500
HEX: #71717a / #71717a
RGB: 113,113,122 / 113,113,122
HSL: 240,4,46 / 240,4,46
色の情報（light / dark）
基本色: gray.700 / gray.300
HEX: #3f3f46 / #d4d4d8
RGB: 63,63,70 / 212,212,216
HSL: 240,5,26 / 240,5,84
Primitive Color
情緒的な役割を持つ色、強調やアクセントに利用する
Primary
色の情報（light / dark）
基本色: teal.700 / teal.300
HEX: #0c5d56 / #5eead4
RGB: 12,93,86 / 94,234,212
HSL: 175,77,21 / 171,77,64
色のコントラスト
base
7.73
11.98
base-subtle
7.04
10.07
base-mute
6.09
7.06
base-emphasize
5.23
5.23
base-inverse
2.29
1.48
primary
5.23
5.23
primary-subtle
6.86
10.74
primary-mute
6.13
7.56
primary-emphasize
5.23
5.23
secondary
5.33
5.09
secondary-subtle
6.91
10.16
secondary-mute
6.2
7.45
secondary-emphasize
5.33
5.09
info
6.34
10.63
success
7.04
10.88
warning
7.2
9.85
error
6.33
11.99
色の情報（light / dark）
基本色: teal.300 / teal.700
HEX: #5eead4 / #0c5d56
RGB: 94,234,212 / 12,93,86
HSL: 171,77,64 / 175,77,21
色のコントラスト
base
11.98
7.41
subtle
1.73
1.6
mute
7.06
5.23
inverse
1.42
2.29
primary
5.23
5.23
secondary
5.09
5.33
info
6.3
4.76
success
4.59
5.51
warning
4.45
5.87
error
5.66
4.07
色の情報（light / dark）
基本色: teal.100 / teal.900
HEX: #ccfbf1 / #032726
RGB: 204,251,241 / 3,39,38
HSL: 167,85,89 / 178,86,8
色のコントラスト
base
15.72
15.22
subtle
2.27
3.29
mute
9.27
10.75
inverse
1.08
1.12
primary
6.86
10.74
secondary
6.68
10.96
info
8.27
9.78
success
6.03
11.31
warning
5.84
12.05
error
7.43
8.37
色の情報（light / dark）
基本色: teal.200 / teal.800
HEX: #99f6e4 / #114240
RGB: 153,246,228 / 17,66,64
HSL: 168,84,78 / 178,59,16
色のコントラスト
base
14.05
10.72
subtle
2.03
2.31
mute
8.28
7.57
inverse
1.21
1.58
primary
6.13
7.56
secondary
5.97
7.72
info
7.39
6.89
success
5.39
7.97
warning
5.22
8.49
error
6.64
5.89
色の情報（light / dark）
基本色: teal.300 / teal.700
HEX: #5eead4 / #0c5d56
RGB: 94,234,212 / 12,93,86
HSL: 171,77,64 / 175,77,21
色のコントラスト
base
11.98
7.41
subtle
1.73
1.6
mute
7.06
5.23
inverse
1.42
2.29
primary
5.23
5.23
secondary
5.09
5.33
info
6.3
4.76
success
4.59
5.51
warning
4.45
5.87
error
5.66
4.07
色の情報（light / dark）
基本色: teal.600 / teal.600
HEX: #0d9488 / #0d9488
RGB: 13,148,136 / 13,148,136
HSL: 175,84,32 / 175,84,32
Secondary
色の情報（light / dark）
基本色: cyan.700 / cyan.300
HEX: #0c5c72 / #67e8f9
RGB: 12,92,114 / 103,232,249
HSL: 193,81,25 / 187,92,69
色のコントラスト
base
7.53
12.22
base-subtle
6.85
10.28
base-mute
5.93
7.2
base-emphasize
5.09
5.33
base-inverse
2.35
1.45
primary
5.09
5.33
primary-subtle
6.68
10.96
primary-mute
5.97
7.72
primary-emphasize
5.09
5.33
secondary
5.19
5.19
secondary-subtle
6.72
10.37
secondary-mute
6.03
7.6
secondary-emphasize
5.19
5.19
info
6.17
10.85
success
6.85
11.1
warning
7.01
10.05
error
6.16
12.24
色の情報（light / dark）
基本色: cyan.300 / cyan.700
HEX: #67e8f9 / #0c5c72
RGB: 103,232,249 / 12,92,114
HSL: 187,92,69 / 193,81,25
色のコントラスト
base
12.22
7.21
subtle
1.77
1.56
mute
7.2
5.09
inverse
1.39
2.35
primary
5.33
5.09
secondary
5.19
5.19
info
6.43
4.63
success
4.69
5.36
warning
4.54
5.71
error
5.78
3.97
色の情報（light / dark）
基本色: cyan.100 / cyan.900
HEX: #cffafe / #072a38
RGB: 207,250,254 / 7,42,56
HSL: 185,96,90 / 197,78,12
色のコントラスト
base
15.83
14.4
subtle
2.29
3.11
mute
9.33
10.17
inverse
1.07
1.18
primary
6.91
10.16
secondary
6.72
10.37
info
8.32
9.25
success
6.07
10.7
warning
5.88
11.4
error
7.48
7.92
色の情報（light / dark）
基本色: cyan.200 / cyan.800
HEX: #a5f3fc / #134152
RGB: 165,243,252 / 19,65,82
HSL: 186,94,82 / 196,62,20
色のコントラスト
base
14.2
10.56
subtle
2.05
2.28
mute
8.37
7.46
inverse
1.2
1.61
primary
6.2
7.45
secondary
6.03
7.6
info
7.46
6.78
success
5.44
7.85
warning
5.27
8.36
error
6.71
5.81
色の情報（light / dark）
基本色: cyan.300 / cyan.700
HEX: #67e8f9 / #0c5c72
RGB: 103,232,249 / 12,92,114
HSL: 187,92,69 / 193,81,25
色のコントラスト
base
12.22
7.21
subtle
1.77
1.56
mute
7.2
5.09
inverse
1.39
2.35
primary
5.33
5.09
secondary
5.19
5.19
info
6.43
4.63
success
4.69
5.36
warning
4.54
5.71
error
5.78
3.97
色の情報（light / dark）
基本色: cyan.600 / cyan.600
HEX: #0891b2 / #0891b2
RGB: 8,145,178 / 8,145,178
HSL: 192,91,36 / 192,91,36
Semantic Color
機能的な役割を持つ色(情報、成功、警告、エラー)、利用者に色を用いて情報を届けたいときに利用する
Foreground Color
色の情報（light / dark）
基本色: blue.700 / blue.300
HEX: #173da6 / #a3cfff
RGB: 23,61,166 / 163,207,255
HSL: 224,76,37 / 211,100,82
色のコントラスト
base
9.31
10.91
base-subtle
8.47
9.17
base-mute
7.34
6.43
base-emphasize
6.3
4.76
base-inverse
1.9
1.62
primary
6.3
4.76
primary-subtle
8.27
9.78
primary-mute
7.39
6.89
primary-emphasize
6.3
4.76
secondary
6.43
4.63
secondary-subtle
8.32
9.25
secondary-mute
7.46
6.78
secondary-emphasize
6.43
4.63
info
7.63
9.68
success
8.48
9.91
warning
8.67
8.97
error
7.62
10.92
色の情報（light / dark）
基本色: green.700 / green.300
HEX: #116932 / #86efac
RGB: 17,105,50 / 134,239,172
HSL: 143,72,24 / 142,77,73
色のコントラスト
base
6.79
12.62
base-subtle
6.18
10.61
base-mute
5.36
7.44
base-emphasize
4.6
5.51
base-inverse
2.61
1.4
primary
4.59
5.51
primary-subtle
6.03
11.31
primary-mute
5.39
7.97
primary-emphasize
4.59
5.51
secondary
4.69
5.36
secondary-subtle
6.07
10.7
secondary-mute
5.44
7.85
secondary-emphasize
4.69
5.36
info
5.57
11.2
success
6.19
11.46
warning
6.33
10.38
error
5.56
12.64
色の情報（light / dark）
基本色: yellow.700 / yellow.300
HEX: #845209 / #fde047
RGB: 132,82,9 / 253,224,71
HSL: 36,87,28 / 50,98,64
色のコントラスト
base
6.58
13.44
base-subtle
5.99
11.3
base-mute
5.18
7.92
base-emphasize
4.45
5.86
base-inverse
2.69
1.32
primary
4.45
5.87
primary-subtle
5.84
12.05
primary-mute
5.22
8.49
primary-emphasize
4.45
5.87
secondary
4.54
5.71
secondary-subtle
5.88
11.4
secondary-mute
5.27
8.36
secondary-emphasize
4.54
5.71
info
5.39
11.93
success
5.99
12.21
warning
6.13
11.06
error
5.39
13.46
色の情報（light / dark）
基本色: red.700 / red.300
HEX: #991919 / #fca5a5
RGB: 153,25,25 / 252,165,165
HSL: 0,72,35 / 0,94,82
色のコントラスト
base
8.37
9.33
base-subtle
7.62
7.85
base-mute
6.6
5.5
base-emphasize
5.67
4.07
base-inverse
2.12
1.9
primary
5.66
4.07
primary-subtle
7.43
8.37
primary-mute
6.64
5.89
primary-emphasize
5.66
4.07
secondary
5.78
3.97
secondary-subtle
7.48
7.92
secondary-mute
6.71
5.81
secondary-emphasize
5.78
3.97
info
6.86
8.29
success
7.63
8.48
warning
7.8
7.68
error
6.86
9.35
Background Color
色の情報（light / dark）
基本色: blue.100 / blue.900
HEX: #dbeafe / #14204a
RGB: 219,234,254 / 20,32,74
HSL: 214,95,93 / 227,57,18
色のコントラスト
base
14.52
15.07
subtle
2.1
3.25
mute
8.56
10.64
inverse
1.17
1.13
primary
6.34
10.63
secondary
6.17
10.85
info
7.63
9.68
success
5.57
11.2
warning
5.39
11.93
error
6.86
8.29
色の情報（light / dark）
基本色: green.100 / green.900
HEX: #dcfce7 / #042713
RGB: 220,252,231 / 4,39,19
HSL: 141,84,93 / 146,81,8
色のコントラスト
base
16.13
15.42
subtle
2.33
3.33
mute
9.51
10.89
inverse
1.05
1.1
primary
7.04
10.88
secondary
6.85
11.1
info
8.48
9.91
success
6.19
11.46
warning
5.99
12.21
error
7.63
8.48
色の情報（light / dark）
基本色: yellow.100 / yellow.900
HEX: #fef9c3 / #422006
RGB: 254,249,195 / 66,32,6
HSL: 55,97,88 / 26,83,14
色のコントラスト
base
16.5
13.96
subtle
2.39
3.02
mute
9.72
9.86
inverse
1.03
1.22
primary
7.2
9.85
secondary
7.01
10.05
info
8.67
8.97
success
6.33
10.38
warning
6.13
11.06
error
7.8
7.68
色の情報（light / dark）
基本色: red.100 / red.900
HEX: #fee2e2 / #300c0c
RGB: 254,226,226 / 48,12,12
HSL: 0,93,94 / 0,60,12
色のコントラスト
base
14.5
17
subtle
2.1
3.67
mute
8.55
12
inverse
1.17
1
primary
6.33
11.99
secondary
6.16
12.24
info
7.62
10.92
success
5.56
12.64
warning
5.39
13.46
error
6.86
9.35
Border Color
色の情報（light / dark）
基本色: blue.500 / blue.400
HEX: #3b82f6 / #60a5fa
RGB: 59,130,246 / 96,165,250
HSL: 217,91,60 / 213,94,68
色の情報（light / dark）
基本色: green.500 / green.400
HEX: #22c55e / #4ade80
RGB: 34,197,94 / 74,222,128
HSL: 142,71,45 / 142,69,58
色の情報（light / dark）
基本色: yellow.500 / yellow.400
HEX: #eab308 / #facc15
RGB: 234,179,8 / 250,204,21
HSL: 45,93,47 / 48,96,53
色の情報（light / dark）
基本色: red.500 / red.400
HEX: #ef4444 / #f87171
RGB: 239,68,68 / 248,113,113
HSL: 0,84,60 / 0,91,71
Base Color
デザインシステム全体で利用する基本色
white
white
gray
50
100
200
300
400
500
600
700
800
900
red
50
100
200
300
400
500
600
700
800
900
pink
50
100
200
300
400
500
600
700
800
900
purple
50
100
200
300
400
500
600
700
800
900
cyan
50
100
200
300
400
500
600
700
800
900
blue
50
100
200
300
400
500
600
700
800
900
teal
50
100
200
300
400
500
600
700
800
900
green
50
100
200
300
400
500
600
700
800
900
yellow
50
100
200
300
400
500
600
700
800
900
orange
50
100
200
300
400
500
600
700
800
900