Announcing Kitwind - Fully responsive UI kits, built with Tailwind CSS. Learn more.

We are giving away our first UI kit for free. It includes over 130 sections, built with TailwindCSS, for your awesome projects.

All the sections are fully responsive and available in HTML, VueJS, and React.
You can use them on unlimited personal and commercial projects.

The Config

This UI kit doesn't rely on any 3rd party plugins, or anything too custom. We've included a custom color palette & font family, and a couple of spacings and variants. Just copy the entire config, and you're ready to go.

Note that Kometa UI Kit is built on top of Tailwind CSS 1.4.1.

const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['Montserrat', ...defaultTheme.fontFamily.sans],
},
colors: {
red: {
'50': '#ffebee',
'100': '#ffcdd2',
'200': '#ef9a9a',
'300': '#e57373',
'400': '#ef5350',
'500': '#f44336',
'600': '#e53935',
'700': '#d32f2f',
'800': '#c62828',
'900': '#b71c1c',
'accent-100': '#ff8a80',
'accent-200': '#ff5252',
'accent-400': '#ff1744',
'accent-700': '#d50000',
},
purple: {
50: '#f3e5f5',
100: '#e1bee7',
200: '#ce93d8',
300: '#ba68c8',
400: '#ab47bc',
500: '#9c27b0',
600: '#8e24aa',
700: '#7b1fa2',
800: '#6a1b9a',
900: '#4a148c',
'accent-100': '#ea80fc',
'accent-200': '#e040fb',
'accent-400': '#d500f9',
'accent-700': '#aa00ff',
},
'deep-purple': {
50: '#ede7f6',
100: '#d1c4e9',
200: '#b39ddb',
300: '#9575cd',
400: '#7e57c2',
500: '#673ab7',
600: '#5e35b1',
700: '#512da8',
800: '#4527a0',
900: '#311b92',
'accent-100': '#b388ff',
'accent-200': '#7c4dff',
'accent-400': '#651fff',
'accent-700': '#6200ea',
},
teal: {
50: '#e0f2f1',
100: '#b2dfdb',
200: '#80cbc4',
300: '#4db6ac',
400: '#26a69a',
500: '#009688',
600: '#00897b',
700: '#00796b',
800: '#00695c',
900: '#004d40',
'accent-100': '#a7ffeb',
'accent-200': '#64ffda',
'accent-400': '#1de9b6',
'accent-700': '#00bfa5',
},
indigo: {
50: '#e8eaf6',
100: '#c5cae9',
200: '#9fa8da',
300: '#7986cb',
400: '#5c6bc0',
500: '#3f51b5',
600: '#3949ab',
700: '#303f9f',
800: '#283593',
900: '#1a237e',
'accent-100': '#8c9eff',
'accent-200': '#536dfe',
'accent-400': '#3d5afe',
'accent-700': '#304ffe',
},
pink: {
50: '#fce4ec',
100: '#f8bbd0',
200: '#f48fb1',
300: '#f06292',
400: '#ec407a',
500: '#e91e63',
600: '#d81b60',
700: '#c2185b',
800: '#ad1457',
900: '#880e4f',
'accent-100': '#ff80ab',
'accent-200': '#ff4081',
'accent-400': '#f50057',
'accent-700': '#c51162',
},
blue: {
50: '#e3f2fd',
100: '#bbdefb',
200: '#90caf9',
300: '#64b5f6',
400: '#42a5f5',
500: '#2196f3',
600: '#1e88e5',
700: '#1976d2',
800: '#1565c0',
900: '#0d47a1',
'accent-100': '#82b1ff',
'accent-200': '#448aff',
'accent-400': '#2979ff',
'accent-700': '#2962ff',
},
'light-blue': {
50: '#e1f5fe',
100: '#b3e5fc',
200: '#81d4fa',
300: '#4fc3f7',
400: '#29b6f6',
500: '#03a9f4',
600: '#039be5',
700: '#0288d1',
800: '#0277bd',
900: '#01579b',
'accent-100': '#80d8ff',
'accent-200': '#40c4ff',
'accent-400': '#00b0ff',
'accent-700': '#0091ea',
},
cyan: {
50: '#e0f7fa',
100: '#b2ebf2',
200: '#80deea',
300: '#4dd0e1',
400: '#26c6da',
500: '#00bcd4',
600: '#00acc1',
700: '#0097a7',
800: '#00838f',
900: '#006064',
'accent-100': '#84ffff',
'accent-200': '#18ffff',
'accent-400': '#00e5ff',
'accent-700': '#00b8d4',
},
gray: {
50: '#fafafa',
100: '#f5f5f5',
200: '#eeeeee',
300: '#e0e0e0',
400: '#bdbdbd',
500: '#9e9e9e',
600: '#757575',
700: '#616161',
800: '#424242',
900: '#212121',
},
'blue-gray': {
50: '#eceff1',
100: '#cfd8dc',
200: '#b0bec5',
300: '#90a4ae',
400: '#78909c',
500: '#607d8b',
600: '#546e7a',
700: '#455a64',
800: '#37474f',
900: '#263238',
},
green: {
50: '#e8f5e9',
100: '#c8e6c9',
200: '#a5d6a7',
300: '#81c784',
400: '#66bb6a',
500: '#4caf50',
600: '#43a047',
700: '#388e3c',
800: '#2e7d32',
900: '#1b5e20',
'accent-100': '#b9f6ca',
'accent-200': '#69f0ae',
'accent-400': '#00e676',
'accent-700': '#00c853',
},
'light-green': {
50: '#f1f8e9',
100: '#dcedc8',
200: '#c5e1a5',
300: '#aed581',
400: '#9ccc65',
500: '#8bc34a',
600: '#7cb342',
700: '#689f38',
800: '#558b2f',
900: '#33691e',
'accent-100': '#ccff90',
'accent-200': '#b2ff59',
'accent-400': '#76ff03',
'accent-700': '#64dd17',
},
lime: {
50: '#f9fbe7',
100: '#f0f4c3',
200: '#e6ee9c',
300: '#dce775',
400: '#d4e157',
500: '#cddc39',
600: '#c0ca33',
700: '#afb42b',
800: '#9e9d24',
900: '#827717',
'accent-100': '#f4ff81',
'accent-200': '#eeff41',
'accent-400': '#c6ff00',
'accent-700': '#aeea00',
},
amber: {
50: '#fff8e1',
100: '#ffecb3',
200: '#ffe082',
300: '#ffd54f',
400: '#ffca28',
500: '#ffc107',
600: '#ffb300',
700: '#ffa000',
800: '#ff8f00',
900: '#ff6f00',
'accent-100': '#ffe57f',
'accent-200': '#ffd740',
'accent-400': '#ffc400',
'accent-700': '#ffab00',
},
yellow: {
50: '#fffde7',
100: '#fff9c4',
200: '#fff59d',
300: '#fff176',
400: '#ffee58',
500: '#ffeb3b',
600: '#fdd835',
700: '#fbc02d',
800: '#f9a825',
900: '#f57f17',
'accent-100': '#ffff8d',
'accent-200': '#ffff00',
'accent-400': '#ffea00',
'accent-700': '#ffd600',
},
orange: {
50: '#fff3e0',
100: '#ffe0b2',
200: '#ffcc80',
300: '#ffb74d',
400: '#ffa726',
500: '#ff9800',
600: '#fb8c00',
700: '#f57c00',
800: '#ef6c00',
900: '#e65100',
'accent-100': '#ffd180',
'accent-200': '#ffab40',
'accent-400': '#ff9100',
'accent-700': '#ff6d00',
},
'deep-orange': {
50: '#fbe9e7',
100: '#ffccbc',
200: '#ffab91',
300: '#ff8a65',
400: '#ff7043',
500: '#ff5722',
600: '#f4511e',
700: '#e64a19',
800: '#d84315',
900: '#bf360c',
'accent-100': '#ff9e80',
'accent-200': '#ff6e40',
'accent-400': '#ff3d00',
'accent-700': '#dd2c00',
},
brown: {
50: '#efebe9',
100: '#d7ccc8',
200: '#bcaaa4',
300: '#a1887f',
400: '#8d6e63',
500: '#795548',
600: '#6d4c41',
700: '#5d4037',
800: '#4e342e',
900: '#3e2723',
},
},
spacing: {
'7': '1.75rem',
'9': '2.25rem',
'28': '7rem',
'80': '20rem',
'96': '24rem',
},
height: {
'1/2': '50%',
},
scale: {
'30': '.3',
},
boxShadow: {
outline: '0 0 0 3px rgba(101, 31, 255, 0.4)',
},
},
},
variants: {
scale: ['responsive', 'hover', 'focus', 'group-hover'],
textColor: ['responsive', 'hover', 'focus', 'group-hover'],
opacity: ['responsive', 'hover', 'focus', 'group-hover'],
backgroundColor: ['responsive', 'hover', 'focus', 'group-hover'],
},
plugins: [],
};

Below you'll find more info about the color palette and the font family.

Color Palette

This UI kit was built on top of Material Design color palette. Teal and deep purple are the two main colors used in all components, however we've included the full Material Design color palette in the config, so you'll be able to easily switch the colors to match your brand and identity.

red

red-50

#ffebee

red-100

#ffcdd2

red-200

#ef9a9a

red-300

#e57373

red-400

#ef5350

red-500

#f44336

red-600

#e53935

red-700

#d32f2f

red-800

#c62828

red-900

#b71c1c

red-accent-100

#ff8a80

red-accent-200

#ff5252

red-accent-400

#ff1744

red-accent-700

#d50000

purple

purple-50

#f3e5f5

purple-100

#e1bee7

purple-200

#ce93d8

purple-300

#ba68c8

purple-400

#ab47bc

purple-500

#9c27b0

purple-600

#8e24aa

purple-700

#7b1fa2

purple-800

#6a1b9a

purple-900

#4a148c

purple-accent-100

#ea80fc

purple-accent-200

#e040fb

purple-accent-400

#d500f9

purple-accent-700

#aa00ff

deep purple

deep-purple-50

#ede7f6

deep-purple-100

#d1c4e9

deep-purple-200

#b39ddb

deep-purple-300

#9575cd

deep-purple-400

#7e57c2

deep-purple-500

#673ab7

deep-purple-600

#5e35b1

deep-purple-700

#512da8

deep-purple-800

#4527a0

deep-purple-900

#311b92

deep-purple-accent-100

#b388ff

deep-purple-accent-200

#7c4dff

deep-purple-accent-400

#651fff

deep-purple-accent-700

#6200ea

teal

teal-50

#e0f2f1

teal-100

#b2dfdb

teal-200

#80cbc4

teal-300

#4db6ac

teal-400

#26a69a

teal-500

#009688

teal-600

#00897b

teal-700

#00796b

teal-800

#00695c

teal-900

#004d40

teal-accent-100

#a7ffeb

teal-accent-200

#64ffda

teal-accent-400

#1de9b6

teal-accent-700

#00bfa5

indigo

indigo-50

#e8eaf6

indigo-100

#c5cae9

indigo-200

#9fa8da

indigo-300

#7986cb

indigo-400

#5c6bc0

indigo-500

#3f51b5

indigo-600

#3949ab

indigo-700

#303f9f

indigo-800

#283593

indigo-900

#1a237e

indigo-accent-100

#8c9eff

indigo-accent-200

#536dfe

indigo-accent-400

#3d5afe

indigo-accent-700

#304ffe

pink

pink-50

#fce4ec

pink-100

#f8bbd0

pink-200

#f48fb1

pink-300

#f06292

pink-400

#ec407a

pink-500

#e91e63

pink-600

#d81b60

pink-700

#c2185b

pink-800

#ad1457

pink-900

#880e4f

pink-accent-100

#ff80ab

pink-accent-200

#ff4081

pink-accent-400

#f50057

pink-accent-700

#c51162

blue

blue-50

#e3f2fd

blue-100

#bbdefb

blue-200

#90caf9

blue-300

#64b5f6

blue-400

#42a5f5

blue-500

#2196f3

blue-600

#1e88e5

blue-700

#1976d2

blue-800

#1565c0

blue-900

#0d47a1

blue-accent-100

#82b1ff

blue-accent-200

#448aff

blue-accent-400

#2979ff

blue-accent-700

#2962ff

light blue

light-blue-50

#e1f5fe

light-blue-100

#b3e5fc

light-blue-200

#81d4fa

light-blue-300

#4fc3f7

light-blue-400

#29b6f6

light-blue-500

#03a9f4

light-blue-600

#039be5

light-blue-700

#0288d1

light-blue-800

#0277bd

light-blue-900

#01579b

light-blue-accent-100

#80d8ff

light-blue-accent-200

#40c4ff

light-blue-accent-400

#00b0ff

light-blue-accent-700

#0091ea

cyan

cyan-50

#e0f7fa

cyan-100

#b2ebf2

cyan-200

#80deea

cyan-300

#4dd0e1

cyan-400

#26c6da

cyan-500

#00bcd4

cyan-600

#00acc1

cyan-700

#0097a7

cyan-800

#00838f

cyan-900

#006064

cyan-accent-100

#84ffff

cyan-accent-200

#18ffff

cyan-accent-400

#00e5ff

cyan-accent-700

#00b8d4

green

green-50

#e8f5e9

green-100

#c8e6c9

green-200

#a5d6a7

green-300

#81c784

green-400

#66bb6a

green-500

#4caf50

green-600

#43a047

green-700

#388e3c

green-800

#2e7d32

green-900

#1b5e20

green-accent-100

#b9f6ca

green-accent-200

#69f0ae

green-accent-400

#00e676

green-accent-700

#00c853

light green

light-green-50

#f1f8e9

light-green-100

#dcedc8

light-green-200

#c5e1a5

light-green-300

#aed581

light-green-400

#9ccc65

light-green-500

#8bc34a

light-green-600

#7cb342

light-green-700

#689f38

light-green-800

#558b2f

light-green-900

#33691e

light-green-accent-100

#ccff90

light-green-accent-200

#b2ff59

light-green-accent-400

#76ff03

light-green-accent-700

#64dd17

lime

lime-50

#f9fbe7

lime-100

#f0f4c3

lime-200

#e6ee9c

lime-300

#dce775

lime-400

#d4e157

lime-500

#cddc39

lime-600

#c0ca33

lime-700

#afb42b

lime-800

#9e9d24

lime-900

#827717

lime-accent-100

#f4ff81

lime-accent-200

#eeff41

lime-accent-400

#c6ff00

lime-accent-700

#aeea00

yellow

yellow-50

#fffde7

yellow-100

#fff9c4

yellow-200

#fff59d

yellow-300

#fff176

yellow-400

#ffee58

yellow-500

#ffeb3b

yellow-600

#fdd835

yellow-700

#fbc02d

yellow-800

#f9a825

yellow-900

#f57f17

yellow-accent-100

#ffff8d

yellow-accent-200

#ffff00

yellow-accent-400

#ffea00

yellow-accent-700

#ffd600

amber

amber-50

#fff8e1

amber-100

#ffecb3

amber-200

#ffe082

amber-300

#ffd54f

amber-400

#ffca28

amber-500

#ffc107

amber-600

#ffb300

amber-700

#ffa000

amber-800

#ff8f00

amber-900

#ff6f00

amber-accent-100

#ffe57f

amber-accent-200

#ffd740

amber-accent-400

#ffc400

amber-accent-700

#ffab00

orange

orange-50

#fff3e0

orange-100

#ffe0b2

orange-200

#ffcc80

orange-300

#ffb74d

orange-400

#ffa726

orange-500

#ff9800

orange-600

#fb8c00

orange-700

#f57c00

orange-800

#ef6c00

orange-900

#e65100

orange-accent-100

#ffd180

orange-accent-200

#ffab40

orange-accent-400

#ff9100

orange-accent-700

#ff6d00

deep orange

deep-orange-50

#fbe9e7

deep-orange-100

#ffccbc

deep-orange-200

#ffab91

deep-orange-300

#ff8a65

deep-orange-400

#ff7043

deep-orange-500

#ff5722

deep-orange-600

#f4511e

deep-orange-700

#e64a19

deep-orange-800

#d84315

deep-orange-900

#bf360c

deep-orange-accent-100

#ff9e80

deep-orange-accent-200

#ff6e40

deep-orange-accent-400

#ff3d00

deep-orange-accent-700

#dd2c00

brown

brown-50

#efebe9

brown-100

#d7ccc8

brown-200

#bcaaa4

brown-300

#a1887f

brown-400

#8d6e63

brown-500

#795548

brown-600

#6d4c41

brown-700

#5d4037

brown-800

#4e342e

brown-900

#3e2723

gray

gray-50

#fafafa

gray-100

#f5f5f5

gray-200

#eeeeee

gray-300

#e0e0e0

gray-400

#bdbdbd

gray-500

#9e9e9e

gray-600

#757575

gray-700

#616161

gray-800

#424242

gray-900

#212121

blue gray

blue-gray-50

#eceff1

blue-gray-100

#cfd8dc

blue-gray-200

#b0bec5

blue-gray-300

#90a4ae

blue-gray-400

#78909c

blue-gray-500

#607d8b

blue-gray-600

#546e7a

blue-gray-700

#455a64

blue-gray-800

#37474f

blue-gray-900

#263238

Font Family

Our font of choice for this UI kit was Montserrat. It is available for free on Google Fonts.

It can be easily installed by copying this code into your CSS:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');

Or by copying this code into the <head> of your HTML:

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

font-black

Montserrat is a cool font

font-extrabold

Montserrat is a cool font

font-bold

Montserrat is a cool font

font-semibold

Montserrat is a cool font

font-medium

Montserrat is a cool font

font-normal

Montserrat is a cool font

font-light

Montserrat is a cool font

font-thin

Montserrat is a cool font

font-hairline

Montserrat is a cool font

Less time coding.
More time building.

A marketplace of fully responsive, multi-purpose UI kits, built with Tailwind CSS, for start-ups and products of any kind.

We respect your privacy. Unsubscribe at any time.

© Copyright 2021 Kitwind. All rights reserved.