Monochromatic Green Palette

Best For

Use as the foundation for an eco or health brand design system. The lightest shade works for page backgrounds, mid-greens for component fills, dark greens for text and navigation.

CSS Custom Properties

:root {
  --mono-green-100: #F0FFF4;
  --mono-green-200: #BBF7D0;
  --mono-green-300: #4ADE80;
  --mono-green-400: #16A34A;
  --mono-green-500: #14532D;
  --mono-green-600: #052E16;
}

Tailwind CSS Config

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        "mono-green": {
    "100": "#F0FFF4",
    "200": "#BBF7D0",
    "300": "#4ADE80",
    "400": "#16A34A",
    "500": "#14532D",
    "600": "#052E16",
        },
      },
    },
  },
}