@aegov/design-system
Version:
A design system for the Government of the United Arab Emirates. The design system has been created based on research and information collected from in-depth studies conducted on user behaviour and benchmarking best practices. The primary use of this desig
161 lines (158 loc) • 4.93 kB
JavaScript
// color.js - Tailwind palette using OKLCH converted from original HEX colors
const brandColors = {
aegold: {
50: "oklch(0.975 0.013 97.4)",
100: "oklch(0.940 0.039 97.4)",
200: "oklch(0.879 0.071 94.2)",
300: "oklch(0.802 0.104 91.1)",
400: "oklch(0.734 0.121 85.9)",
500: "oklch(0.660 0.114 80.7)",
600: "oklch(0.570 0.097 84.4)",
700: "oklch(0.501 0.084 81.0)",
800: "oklch(0.428 0.069 57.1)",
900: "oklch(0.387 0.058 52.0)",
950: "oklch(0.264 0.043 46.9)"
},
aered: {
50: "oklch(0.971 0.013 17.4)",
100: "oklch(0.939 0.028 20.4)",
200: "oklch(0.889 0.055 21.0)",
300: "oklch(0.815 0.095 21.7)",
400: "oklch(0.719 0.151 24.0)",
500: "oklch(0.640 0.192 26.3)",
600: "oklch(0.584 0.199 27.5)",
700: "oklch(0.504 0.181 28.0)",
800: "oklch(0.443 0.151 27.4)",
900: "oklch(0.397 0.124 26.4)",
950: "oklch(0.258 0.082 26.8)"
},
aegreen: {
50: "oklch(0.978 0.011 149.9)",
100: "oklch(0.952 0.024 151.2)",
200: "oklch(0.902 0.046 150.1)",
300: "oklch(0.825 0.080 150.7)",
400: "oklch(0.722 0.112 149.8)",
500: "oklch(0.627 0.126 148.7)",
600: "oklch(0.581 0.122 148.5)",
700: "oklch(0.461 0.090 149.4)",
800: "oklch(0.397 0.067 149.9)",
900: "oklch(0.351 0.056 150.0)",
950: "oklch(0.238 0.040 151.6)"
},
aeblack: {
50: "oklch(0.976 0.000 0.0)",
100: "oklch(0.915 0.003 247.9)",
200: "oklch(0.826 0.008 260.7)",
300: "oklch(0.711 0.011 261.8)",
400: "oklch(0.592 0.014 259.8)",
500: "oklch(0.502 0.016 262.3)",
600: "oklch(0.427 0.016 266.5)",
700: "oklch(0.372 0.011 271.1)",
800: "oklch(0.264 0.006 258.4)",
900: "oklch(0.230 0.008 264.4)",
950: "oklch(0.169 0.006 271.0)"
},
whitely: {
50: "oklch(1.000 0.000 0.0)",
100: "oklch(0.991 0.000 0.0)",
200: "oklch(0.976 0.000 0.0)",
300: "oklch(0.961 0.000 0.0)",
400: "oklch(0.946 0.000 0.0)",
500: "oklch(0.931 0.000 0.0)"
},
camel: {
50: "oklch(0.987 0.021 95.3)",
100: "oklch(0.963 0.058 97.7)",
200: "oklch(0.923 0.113 96.6)",
300: "oklch(0.879 0.152 92.8)",
400: "oklch(0.836 0.163 86.0)",
500: "oklch(0.767 0.162 71.6)",
600: "oklch(0.665 0.154 60.2)",
700: "oklch(0.555 0.142 50.4)",
800: "oklch(0.472 0.121 47.0)",
900: "oklch(0.414 0.103 46.7)",
950: "oklch(0.279 0.072 46.6)"
},
slate: {
50: "oklch(0.984 0.003 247.9)",
100: "oklch(0.968 0.007 247.9)",
200: "oklch(0.929 0.013 255.5)",
300: "oklch(0.869 0.020 252.9)",
400: "oklch(0.711 0.035 256.8)",
500: "oklch(0.554 0.041 257.4)",
600: "oklch(0.446 0.037 257.3)",
700: "oklch(0.372 0.039 257.3)",
800: "oklch(0.279 0.037 260.0)",
900: "oklch(0.208 0.040 265.8)",
950: "oklch(0.129 0.041 264.7)"
},
fuchsia: {
50: "oklch(0.977 0.017 320.1)",
100: "oklch(0.952 0.036 318.9)",
200: "oklch(0.903 0.073 319.6)",
300: "oklch(0.833 0.132 321.4)",
400: "oklch(0.748 0.207 322.2)",
500: "oklch(0.667 0.259 322.1)",
600: "oklch(0.591 0.257 322.9)",
700: "oklch(0.518 0.226 323.9)",
800: "oklch(0.452 0.192 324.6)",
900: "oklch(0.401 0.160 325.6)",
950: "oklch(0.293 0.131 325.7)"
},
techblue: {
50: "oklch(0.963 0.020 238.7)",
100: "oklch(0.933 0.037 238.1)",
200: "oklch(0.873 0.067 243.9)",
300: "oklch(0.792 0.110 248.6)",
400: "oklch(0.682 0.169 257.4)",
500: "oklch(0.581 0.229 262.8)",
600: "oklch(0.498 0.283 264.1)",
700: "oklch(0.496 0.284 263.9)",
800: "oklch(0.406 0.229 263.9)",
900: "oklch(0.383 0.187 264.2)",
950: "oklch(0.265 0.122 264.9)"
},
seablue: {
50: "oklch(0.978 0.013 226.6)",
100: "oklch(0.952 0.027 232.7)",
200: "oklch(0.908 0.060 224.6)",
300: "oklch(0.843 0.107 223.4)",
400: "oklch(0.785 0.143 226.9)",
500: "oklch(0.699 0.147 234.4)",
600: "oklch(0.623 0.143 240.2)",
700: "oklch(0.530 0.122 240.4)",
800: "oklch(0.465 0.105 238.9)",
900: "oklch(0.410 0.088 238.0)",
950: "oklch(0.306 0.066 239.6)"
},
desert: {
50: "oklch(0.975 0.013 60.6)",
100: "oklch(0.945 0.031 64.3)",
200: "oklch(0.883 0.064 59.1)",
300: "oklch(0.804 0.107 53.9)",
400: "oklch(0.714 0.153 45.8)",
500: "oklch(0.657 0.186 40.5)",
600: "oklch(0.624 0.198 36.0)",
700: "oklch(0.521 0.172 33.7)",
800: "oklch(0.446 0.141 32.0)",
900: "oklch(0.387 0.116 31.7)",
950: "oklch(0.253 0.074 29.3)"
}
};
module.exports = {
// --- Semantic Palettes ---
primary: {
DEFAULT: 'oklch(0.45 0.24 277.02)',
...brandColors.aegold,
},
secondary: {
DEFAULT: 'oklch(0.65 0.241 354.31)',
...brandColors.aeblack,
},
// --- Support Palettes ---
'primary-support': brandColors.camel,
'secondary-support': brandColors.seablue,
'aered-support': brandColors.aered,
// --- Brand Palettes ---
...brandColors,
};