Design Resources

Common design resources for developers and designers.

Colors

Our color scheme is heavily inspired by Tailwind’s color system. We have total of 11 shades for each color. You can use them by using the color name and the shade number. For example, colors.primary.600 will give you the primary color’s 600 shade. The main shade for each color is 600.

Akinon

#fcf2f7

100

#fae6ef

200

#f5c4d7

300

#eda1b9

400

#de5f77

500

#d2282e

600

#bd2025

700

#9c161a

800

#7d0e11

900

#5e080a

950

#3d0405

azure

#eef5ff

#dae6ff

100

#d9e8ff

200

#bcd8ff

300

#8ec0ff

400

#599cff

500

#4482ff

600

#1b55f5

700

#1440e1

800

#1734b6

900

#19318f

950

#142057

500-20

#4482ff33

blue

#f5fcff

100

#ebf8ff

200

#cceafc

250

#a6c5e2

251

#9ca9c2

300

#afd9fa

400

#74b4f7

500

#3b82f6

600

#306fdb

700

#2153b8

800

#153b94

900

#0c286e

950

#051647

951

#126a6f

952

#75e2e7

953

#c6f0f2

954

#363d51

955

#062a4a

250-10

#a6c5e228

250-20

#a6c5e25c

orange

#fffcf2

100

#fff8e6

200

#ffebbf

300

#fcd997

400

#fcb44e

425

#ffaa49

450

#ce8d0b

500

#f98003

600

#e06e02

700

#ba5202

800

#963d02

900

#702900

950

#471700

951

#ff7041

952

#ff7041

953

#fce0ce

954

#ffc76b

red

#fffaf5

100

#fcf3eb

200

#fce0cf

300

#fac7b1

400

#f58d7a

425

#ff5163

450

#f05050

500

#ef4444

600

#d93636

700

#b32525

800

#8f1818

900

#6b0e0e

950

#450606

951

#e33030

952

#f6b5b5

425-10

#ff516310

green

#fafcf2

100

#f5fae6

200

#e5f5c1

300

#d2ed9d

400

#a9e05c

500

#7ed321

600

#6abf1b

700

#529e13

800

#3d800d

900

#275e07

950

#163d03

951

#67b50c

952

#71d200

953

#e3f6cc

954

#7bd500

952-10

#71d20010

952-15

#71d20015

pink

#fff7fd

100

#fcebf7

200

#facfec

300

#f7b2df

400

#f27ec0

500

#ec4899

600

#d63c87

700

#b32965

800

#8f1b49

900

#6b0f31

950

#45061a

purple

#fbf7fc

100

#f5eff8

200

#ebdef0

300

#dbc4e3

400

#c7a1d1

500

#ad7abb

600

#915c9d

700

#72467b

800

#633e6a

900

#543659

950

#341b37

951

#7667b6

952

#9387c7

953

#eae7f4

gray

100

#f5f5f5

150

#e9f0f7

200

#e5e5e5

250

#d4d6f0

300

#d4d4d4

400

#a3a3a3

500

#788195

600

#525252

700

#404040

750

#292b2c

800

#262626

850

#30363e

900

#3b404c

925

#36373b

950

#171717

100-50

#f5f5f580

ebonyClay

#6c7ebe

#677084

100

#5c6880

125

#5c5e81

150

#58669a

175

#495679

200

#515c7c

300

#465178

350

#43464f

375

#3f4b5c

400

#3d4561

450

#333b57

475

#2b344c

500

#293245

550

#262e47

600

#232b3b

625

#252c40

700

#1d2331

800

#171d27

825

#1d2843

850

#131826

900

#11171e

950

#0c111a

951

#000000bf

960

#1e1e2d

neutral

#ffffff

#fbfcfd

#fafafa

#f6f7f9

100

#f5f6f6

150

#f1f3f9

200

#e5e5e5

250

#d6e1e3

300

#d4d4d4

350

#c8daec

375

#bfbfbf

380

#b6c2cf

400

#a3a3a3

500

#737373

550

#626262

600

#525252

700

#404040

800

#262626

900

#171717

950

#0a0a0a

1000

#000000

UI Tokens

The smallest element that affects the theme is called the UI Token.

Normally a theme object can be passed to ConfigProvider to customize the theme.


<ConfigProvider
  theme={{
    token: {
      colorPrimary: '#4482ff'
    }
  }}
>
  ...
</ConfigProvider>

However, we only set a read-only theme object. Because we do not want Akinon’s UI theme to be overridden.

CSS Variables

List of CSS variables for our theme’s custom color palette:

--color-akinon-50

#fcf2f7

--color-akinon-100

#fae6ef

--color-akinon-200

#f5c4d7

--color-akinon-300

#eda1b9

--color-akinon-400

#de5f77

--color-akinon-500

#d2282e

--color-akinon-600

#bd2025

--color-akinon-700

#9c161a

--color-akinon-800

#7d0e11

--color-akinon-900

#5e080a

--color-akinon-950

#3d0405

--color-azure-50

#eef5ff

--color-azure-90

#dae6ff

--color-azure-100

#d9e8ff

--color-azure-200

#bcd8ff

--color-azure-300

#8ec0ff

--color-azure-400

#599cff

--color-azure-500

#4482ff

--color-azure-600

#1b55f5

--color-azure-700

#1440e1

--color-azure-800

#1734b6

--color-azure-900

#19318f

--color-azure-950

#142057

--color-azure-500-20

#4482ff33

--color-blue-50

#f5fcff

--color-blue-100

#ebf8ff

--color-blue-200

#cceafc

--color-blue-250

#a6c5e2

--color-blue-251

#9ca9c2

--color-blue-300

#afd9fa

--color-blue-400

#74b4f7

--color-blue-500

#3b82f6

--color-blue-600

#306fdb

--color-blue-700

#2153b8

--color-blue-800

#153b94

--color-blue-900

#0c286e

--color-blue-950

#051647

--color-blue-951

#126a6f

--color-blue-952

#75e2e7

--color-blue-953

#c6f0f2

--color-blue-954

#363d51

--color-blue-955

#062a4a

--color-blue-250-10

#a6c5e228

--color-blue-250-20

#a6c5e25c

--color-orange-50

#fffcf2

--color-orange-100

#fff8e6

--color-orange-200

#ffebbf

--color-orange-300

#fcd997

--color-orange-400

#fcb44e

--color-orange-425

#ffaa49

--color-orange-450

#ce8d0b

--color-orange-500

#f98003

--color-orange-600

#e06e02

--color-orange-700

#ba5202

--color-orange-800

#963d02

--color-orange-900

#702900

--color-orange-950

#471700

--color-orange-951

#ff7041

--color-orange-952

#ff7041

--color-orange-953

#fce0ce

--color-orange-954

#ffc76b

--color-red-50

#fffaf5

--color-red-100

#fcf3eb

--color-red-200

#fce0cf

--color-red-300

#fac7b1

--color-red-400

#f58d7a

--color-red-425

#ff5163

--color-red-450

#f05050

--color-red-500

#ef4444

--color-red-600

#d93636

--color-red-700

#b32525

--color-red-800

#8f1818

--color-red-900

#6b0e0e

--color-red-950

#450606

--color-red-951

#e33030

--color-red-952

#f6b5b5

--color-red-425-10

#ff516310

--color-green-50

#fafcf2

--color-green-100

#f5fae6

--color-green-200

#e5f5c1

--color-green-300

#d2ed9d

--color-green-400

#a9e05c

--color-green-500

#7ed321

--color-green-600

#6abf1b

--color-green-700

#529e13

--color-green-800

#3d800d

--color-green-900

#275e07

--color-green-950

#163d03

--color-green-951

#67b50c

--color-green-952

#71d200

--color-green-953

#e3f6cc

--color-green-954

#7bd500

--color-green-952-10

#71d20010

--color-green-952-15

#71d20015

--color-pink-50

#fff7fd

--color-pink-100

#fcebf7

--color-pink-200

#facfec

--color-pink-300

#f7b2df

--color-pink-400

#f27ec0

--color-pink-500

#ec4899

--color-pink-600

#d63c87

--color-pink-700

#b32965

--color-pink-800

#8f1b49

--color-pink-900

#6b0f31

--color-pink-950

#45061a

--color-purple-50

#fbf7fc

--color-purple-100

#f5eff8

--color-purple-200

#ebdef0

--color-purple-300

#dbc4e3

--color-purple-400

#c7a1d1

--color-purple-500

#ad7abb

--color-purple-600

#915c9d

--color-purple-700

#72467b

--color-purple-800

#633e6a

--color-purple-900

#543659

--color-purple-950

#341b37

--color-purple-951

#7667b6

--color-purple-952

#9387c7

--color-purple-953

#eae7f4

--color-gray-100

#f5f5f5

--color-gray-150

#e9f0f7

--color-gray-200

#e5e5e5

--color-gray-250

#d4d6f0

--color-gray-300

#d4d4d4

--color-gray-400

#a3a3a3

--color-gray-500

#788195

--color-gray-600

#525252

--color-gray-700

#404040

--color-gray-750

#292b2c

--color-gray-800

#262626

--color-gray-850

#30363e

--color-gray-900

#3b404c

--color-gray-925

#36373b

--color-gray-950

#171717

--color-gray-100-50

#f5f5f580

--color-ebonyClay-25

#6c7ebe

--color-ebonyClay-50

#677084

--color-ebonyClay-100

#5c6880

--color-ebonyClay-125

#5c5e81

--color-ebonyClay-150

#58669a

--color-ebonyClay-175

#495679

--color-ebonyClay-200

#515c7c

--color-ebonyClay-300

#465178

--color-ebonyClay-350

#43464f

--color-ebonyClay-375

#3f4b5c

--color-ebonyClay-400

#3d4561

--color-ebonyClay-450

#333b57

--color-ebonyClay-475

#2b344c

--color-ebonyClay-500

#293245

--color-ebonyClay-550

#262e47

--color-ebonyClay-600

#232b3b

--color-ebonyClay-625

#252c40

--color-ebonyClay-700

#1d2331

--color-ebonyClay-800

#171d27

--color-ebonyClay-825

#1d2843

--color-ebonyClay-850

#131826

--color-ebonyClay-900

#11171e

--color-ebonyClay-950

#0c111a

--color-ebonyClay-951

#000000bf

--color-ebonyClay-960

#1e1e2d

--color-neutral-50

#ffffff

--color-neutral-75

#fbfcfd

--color-neutral-80

#fafafa

--color-neutral-90

#f6f7f9

--color-neutral-100

#f5f6f6

--color-neutral-150

#f1f3f9

--color-neutral-200

#e5e5e5

--color-neutral-250

#d6e1e3

--color-neutral-300

#d4d4d4

--color-neutral-350

#c8daec

--color-neutral-375

#bfbfbf

--color-neutral-380

#b6c2cf

--color-neutral-400

#a3a3a3

--color-neutral-500

#737373

--color-neutral-550

#626262

--color-neutral-600

#525252

--color-neutral-700

#404040

--color-neutral-800

#262626

--color-neutral-900

#171717

--color-neutral-950

#0a0a0a

--color-neutral-1000

#000000