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',
      mainAccent: '#4d80e6', // not needed for shadcn components
      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',
    },
    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',
    },
  },
},

Fonts

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