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 your tailwind config.

tailwind.config.js
theme: { extend: { colors: { bg: '#dfe5f2', main: '#88aaee', mainAccent: '#4d80e6', // not needed for shadcn }, borderRadius: { base: '5px' }, boxShadow: { base: '4px 4px 0px 0px rgba(0,0,0,1)', }, 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.