Styling

Colors

Here are some color palettes you can try. You can click each color palette to see how it looks.

Border radius

5px

Box shadow

Horizontal offset

4px

Vertical offset

4px

Font weight

Headings

700

Everything else

500

After you choose your preferred styling, copy this to theme section inside your tailwind config.

tailwind.config.js

theme: {
  extend: {
    colors: {
      main: '#88aaee',
      overlay: 'rgba(0,0,0,0.8)', // background color overlay for alert dialogs, modals, etc.

      // light mode
      bg: '#dfe5f2',
      text: '#000',
      border: '#000',

      // dark mode
      darkBg: '#272933',
      darkText: '#eeefe9',
      darkBorder: '#000',
      secondaryBlack: '#212121', // opposite of plain white, not used pitch black because borders and box-shadows are that color 
    },
    borderRadius: {
      base: '5px'
    },
    boxShadow: {
      light: '4px 4px 0px 0px #000',
      dark: '4px 4px 0px 0px #000',
    },
    translate: {
      boxShadowX: '4px',
      boxShadowY: '4px',
      reverseBoxShadowX: '-4px',
      reverseBoxShadowY: '-4px',
    },
    fontWeight: {
      base: '500',
      heading: '700',
    },
  },
},

Warning

In my opinion It's hard to make dark mode neobrutalism look good, and I kinda regret adding it at all, but if you want you can use it.

Fonts

On resources page you have a small list of free fonts you can use for your next neobrutalism project.

Edit this page