tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        white: '#FFFFFF',
        black: '#141414',
        'primary-50': '#f4f5f4',
        'primary-100': '#e5e8e3',
        'primary-200': '#cbd1c9',
        'primary-300': '#a6b1a4',
        'primary-400': '#7d8c7b',
        'primary-500': '#596957',
        'primary-600': '#465645',
        'primary-700': '#384438',
        'primary-800': '#2e372e',
        'primary-900': '#262e26',
        'primary-950': '#151915',

        'accent1-100': '#DAE9EC',
        'accent1-200': '#BED9DF',
        'accent1-300': '#97BFC9',
        'accent1-400': '#669AA4',
        'accent1-500': '#386B72',
        'accent1-600': '#33595D',
        'accent1-700': '#324D4F',
        'accent1-800': '#2A4445',
        'accent1-900': '#223838',

        'accent2-100': '#FAE9E6',
        'accent2-200': '#F8D8D6',
        'accent2-300': '#F1BCBA',
        'accent2-400': '#E3968F',
        'accent2-500': '#CA6A5C',
        'accent2-600': '#BB5947',
        'accent2-700': '#B0503D',
        'accent2-800': '#984134',
        'accent2-900': '#743025',

        'gray-100': '#EDEDE8',
        'gray-200': '#D9D9D4',
        'gray-300': '#C2C2BD',
        'gray-400': '#9D9D98',
        'gray-500': '#82827D',
        'gray-600': '#6E6E6A',
        'gray-700': '#5A5A58',
        'gray-800': '#474745',
        'gray-900': '#333332',

        'success-100': '#D2F9EF',
        'success-500': '#70E1C4',
        'success-900': '#2B8673',

        'warning-100': '#FDDE9D',
        'warning-500': '#FFB20F',
        'warning-900': '#BA5A15',

        'error-100': '#F3BBC9',
        'error-500': '#DA4167',
        'error-900': '#A31B3C',
      },
      fontSize: {
        xs: ['0.875rem', '0.875rem'],
        sm: ['0.85rem', '0.85rem'],
        md: ['0.9rem', '0.9rem'],
        lg: ['1rem', '1rem'],
        h6: ['1rem', '1.25rem'],
        h5: ['1.25rem', '1.5rem'],
        h4: ['1.5rem', '1.75rem'],
        h3: ['1.75rem', '2rem'],
        h2: ['2rem', '2.25rem'],
        h1: ['2.25rem', '2.5rem'],
      },
      height: {
        'screen-webkit': 'webkit-fill-available',
      },
      transitionProperty: {
        multiple: 'width, height, backgroundColor, border-radius',
      },
      fontFamily: {
        montserrat: ['Inter', 'sans-serif'],
        lexend: ['Lexend', 'sans-serif'],
      },
    },
  },
  plugins: [],
};