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

950

#3d0405

500-30

#d2282e4d

azure

#eef5ff

#dae6ff

100

#d9e8ff

200

#bcd8ff

300

#8ec0ff

400

#599cff

450

#e27575

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

510

#1890ff

600

#306fdb

700

#2153b8

800

#153b94

900

#0c286e

950

#051647

951

#126a6f

952

#75e2e7

953

#c6f0f2

954

#363d51

955

#062a4a

999

#0000ff

251-50

#9ca9c280

250-10

#a6c5e228

250-20

#a6c5e25c

orange

#fffcf2

100

#fff8e6

150

#fbedbe

200

#ffebbf

300

#fcd997

400

#fcb44e

425

#ffaa49

450

#ce8d0b

475

#ffa6a6

500

#f98003

600

#e06e02

700

#ba5202

800

#963d02

900

#702900

950

#471700

951

#ff7041

952

#ff7041

953

#fce0ce

954

#ffc76b

975

#3e3221

red

#fffaf5

100

#fcf3eb

200

#fce0cf

300

#fac7b1

400

#f58d7a

410

#e27575

420

#ff4d4f

425

#ff5163

450

#f05050

500

#ef4444

540

#e62f2f

550

#e62c18

600

#d93636

700

#b32525

800

#8f1818

815

#a31515

825

#800000

900

#6b0e0e

950

#450606

951

#e33030

952

#f6b5b5

999

#ff0000

425-10

#ff516310

green

#fafcf2

100

#f5fae6

200

#e5f5c1

300

#d2ed9d

400

#a9e05c

500

#7ed321

560

#48c03e

600

#6abf1b

610

#24b413

700

#529e13

800

#3d800d

820

#425f43

825

#008000

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

110

#f3f4f6

125

#eaeff0

150

#e9f0f7

175

#e5e7eb

200

#e5e5e5

250

#d4d6f0

300

#d4d4d4

325

#d9d9d9

400

#a3a3a3

425

#a1acc6

475

#6b7280

500

#788195

550

#717a8e

600

#525252

700

#404040

750

#292b2c

800

#262626

850

#30363e

890

#384b4e

900

#3b404c

925

#36373b

930

#343639

950

#171717

100-50

#f5f5f580

ebonyClay

#6c7ebe

#677084

100

#5c6880

125

#5c5e81

150

#58669a

175

#495679

200

#515c7c

210

#424b6b

220

#4c5679

300

#465178

350

#43464f

375

#3f4b5c

400

#3d4561

450

#333b57

475

#2b344c

500

#293245

550

#262e47

600

#232b3b

625

#252c40

660

#20283b

700

#1d2331

760

#191f30

800

#171d27

825

#1d2843

850

#131826

900

#11171e

950

#0c111a

951

#000000bf

960

#1e1e2d

500-50

#29324580

600-40

#232b3b66

700-28

#1d233147

760-28

#191f3047

850-70

#131826b3

neutral

#ffffff

#fdfdfd

#fbfcfd

#fafafa

#f3f3f3

#f6f7f9

#f0f0f0

100

#f5f6f6

150

#f1f3f9

200

#e5e5e5

220

#e0e0e0

250

#d6e1e3

300

#d4d4d4

325

#cecece

350

#c8daec

375

#bfbfbf

380

#b6c2cf

400

#a3a3a3

440

#999999

450

#9b9b9b

500

#737373

550

#626262

600

#525252

700

#404040

800

#262626

870

#1e1e1e

900

#171717

950

#0a0a0a

1000

#000000

50-04

#ffffff0a

50-05

#ffffff05

50-50

#ffffff80

50-60

#ffffff99

50-80

#ffffffcc

60-88

#fdfdfde0

1000-05

#0000000d

1000-10

#0000001a

1000-20

#00000033

1000-25

#00000040

1000-30

#0000004d

1000-50

#00000080

1000-60

#00000099

indigo

#e8e8fd

100

#eeeef6

300

#c8c8ff

50-05

#e8e8fd0d

50-08

#e8e8fd14

100-11

#eeeef61c

100-15

#eeeef626

300-40

#c8c8ff66

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-950

#3d0405

--color-akinon-500-30

#d2282e4d

--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-450

#e27575

--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-510

#1890ff

--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-999

#0000ff

--color-blue-251-50

#9ca9c280

--color-blue-250-10

#a6c5e228

--color-blue-250-20

#a6c5e25c

--color-orange-50

#fffcf2

--color-orange-100

#fff8e6

--color-orange-150

#fbedbe

--color-orange-200

#ffebbf

--color-orange-300

#fcd997

--color-orange-400

#fcb44e

--color-orange-425

#ffaa49

--color-orange-450

#ce8d0b

--color-orange-475

#ffa6a6

--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-orange-975

#3e3221

--color-red-50

#fffaf5

--color-red-100

#fcf3eb

--color-red-200

#fce0cf

--color-red-300

#fac7b1

--color-red-400

#f58d7a

--color-red-410

#e27575

--color-red-420

#ff4d4f

--color-red-425

#ff5163

--color-red-450

#f05050

--color-red-500

#ef4444

--color-red-540

#e62f2f

--color-red-550

#e62c18

--color-red-600

#d93636

--color-red-700

#b32525

--color-red-800

#8f1818

--color-red-815

#a31515

--color-red-825

#800000

--color-red-900

#6b0e0e

--color-red-950

#450606

--color-red-951

#e33030

--color-red-952

#f6b5b5

--color-red-999

#ff0000

--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-560

#48c03e

--color-green-600

#6abf1b

--color-green-610

#24b413

--color-green-700

#529e13

--color-green-800

#3d800d

--color-green-820

#425f43

--color-green-825

#008000

--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-110

#f3f4f6

--color-gray-125

#eaeff0

--color-gray-150

#e9f0f7

--color-gray-175

#e5e7eb

--color-gray-200

#e5e5e5

--color-gray-250

#d4d6f0

--color-gray-300

#d4d4d4

--color-gray-325

#d9d9d9

--color-gray-400

#a3a3a3

--color-gray-425

#a1acc6

--color-gray-475

#6b7280

--color-gray-500

#788195

--color-gray-550

#717a8e

--color-gray-600

#525252

--color-gray-700

#404040

--color-gray-750

#292b2c

--color-gray-800

#262626

--color-gray-850

#30363e

--color-gray-890

#384b4e

--color-gray-900

#3b404c

--color-gray-925

#36373b

--color-gray-930

#343639

--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-210

#424b6b

--color-ebonyClay-220

#4c5679

--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-660

#20283b

--color-ebonyClay-700

#1d2331

--color-ebonyClay-760

#191f30

--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-ebonyClay-500-50

#29324580

--color-ebonyClay-600-40

#232b3b66

--color-ebonyClay-700-28

#1d233147

--color-ebonyClay-760-28

#191f3047

--color-ebonyClay-850-70

#131826b3

--color-neutral-50

#ffffff

--color-neutral-60

#fdfdfd

--color-neutral-75

#fbfcfd

--color-neutral-80

#fafafa

--color-neutral-85

#f3f3f3

--color-neutral-90

#f6f7f9

--color-neutral-95

#f0f0f0

--color-neutral-100

#f5f6f6

--color-neutral-150

#f1f3f9

--color-neutral-200

#e5e5e5

--color-neutral-220

#e0e0e0

--color-neutral-250

#d6e1e3

--color-neutral-300

#d4d4d4

--color-neutral-325

#cecece

--color-neutral-350

#c8daec

--color-neutral-375

#bfbfbf

--color-neutral-380

#b6c2cf

--color-neutral-400

#a3a3a3

--color-neutral-440

#999999

--color-neutral-450

#9b9b9b

--color-neutral-500

#737373

--color-neutral-550

#626262

--color-neutral-600

#525252

--color-neutral-700

#404040

--color-neutral-800

#262626

--color-neutral-870

#1e1e1e

--color-neutral-900

#171717

--color-neutral-950

#0a0a0a

--color-neutral-1000

#000000

--color-neutral-50-04

#ffffff0a

--color-neutral-50-05

#ffffff05

--color-neutral-50-50

#ffffff80

--color-neutral-50-60

#ffffff99

--color-neutral-50-80

#ffffffcc

--color-neutral-60-88

#fdfdfde0

--color-neutral-1000-05

#0000000d

--color-neutral-1000-10

#0000001a

--color-neutral-1000-20

#00000033

--color-neutral-1000-25

#00000040

--color-neutral-1000-30

#0000004d

--color-neutral-1000-50

#00000080

--color-neutral-1000-60

#00000099

--color-indigo-50

#e8e8fd

--color-indigo-100

#eeeef6

--color-indigo-300

#c8c8ff

--color-indigo-50-05

#e8e8fd0d

--color-indigo-50-08

#e8e8fd14

--color-indigo-100-11

#eeeef61c

--color-indigo-100-15

#eeeef626

--color-indigo-300-40

#c8c8ff66