Sample Design System for tailwind css

Tailwind CSS is powerful because it gives you primitives, not opinions. The downside is that without structure, projects slowly drift into visual chaos: slightly different grays, inconsistent spacing, buttons that look related but not quite siblings.

A design system fixes that. Not a heavyweight Figma-to-enterprise monster. A practical, code-first system that lives alongside Tailwind and scales with your product.

This post walks through a sample Tailwind CSS design system you can adapt for SaaS apps, internal tools, or marketing sites.

// tailwind.config.cjs or tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/views/**/*.html.erb",
    "./app/helpers/**/*.rb",
    "./app/javascript/**/*.{js,jsx,ts,tsx}",
    "./app/components/**/*.{rb,erb,haml,html,js,jsx,ts,tsx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "1.5rem",
      screens: {
        sm: "640px",
        md: "768px",
        lg: "1024px",
        xl: "1280px",
        "2xl": "1536px",
      },
    },
    extend: {
      colors: {
        // Brand core
        santy: {
          black: "#0B0B0C",
          charcoal: "#1A1A1C",
          white: "#FFFFFF",
        },

        // Primary / accent
        primary: {
          DEFAULT: "#00D7C0", // Miami Cyan
          soft: "#5BE9D5",
          dark: "#00A595",
        },
        money: {
          DEFAULT: "#16A34A",
          dark: "#15803D",
        },
        action: {
          DEFAULT: "#EF4444",
          dark: "#DC2626",
        },

        // Semantic
        success: "#16A34A",
        warning: "#F59E0B",
        danger: "#DC2626",
        info: "#2563EB",

        // Neutral scale
        gray: {
          50: "#FAFAFA",
          100: "#F4F4F5",
          200: "#E4E4E7",
          300: "#D4D4D8",
          400: "#A1A1AA",
          500: "#71717A",
          600: "#52525B",
          700: "#3F3F46",
          800: "#27272A",
          900: "#18181B",
        },

        // Background helpers
        background: {
          DEFAULT: "#0B0B0C",
          soft: "#1A1A1C",
          elevated: "#18181B",
        },
        foreground: {
          DEFAULT: "#FFFFFF",
          muted: "#A1A1AA",
        },
      },

      fontFamily: {
        sans: [
          "SF Pro Text",
          "SF Pro Display",
          "Inter",
          "-apple-system",
          "BlinkMacSystemFont",
          "system-ui",
          "sans-serif",
        ],
        display: [
          "SF Pro Display",
          "SF Pro Text",
          "Inter",
          "-apple-system",
          "BlinkMacSystemFont",
          "system-ui",
          "sans-serif",
        ],
      },

      fontSize: {
        // [fontSize, { lineHeight, letterSpacing }]
        display: [
          "4rem", // 64px
          {
            lineHeight: "4.5rem", // 72px
            letterSpacing: "-0.03em",
            fontWeight: "600",
          },
        ],
        "heading-1": [
          "3rem", // 48px
          {
            lineHeight: "3.5rem", // 56px
            letterSpacing: "-0.02em",
            fontWeight: "600",
          },
        ],
        "heading-2": [
          "2.25rem", // 36px
          {
            lineHeight: "2.75rem", // 44px
            letterSpacing: "-0.02em",
            fontWeight: "600",
          },
        ],
        "heading-3": [
          "1.75rem", // 28px
          {
            lineHeight: "2.25rem", // 36px
            letterSpacing: "-0.01em",
            fontWeight: "600",
          },
        ],
        "heading-4": [
          "1.375rem", // 22px
          {
            lineHeight: "2rem", // 32px
            letterSpacing: "-0.01em",
            fontWeight: "500",
          },
        ],
        body: [
          "1rem", // 16px
          {
            lineHeight: "1.625rem", // 26px
            letterSpacing: "0",
            fontWeight: "400",
          },
        ],
        small: [
          "0.875rem", // 14px
          {
            lineHeight: "1.375rem", // 22px
          },
        ],
        micro: [
          "0.75rem", // 12px
          {
            lineHeight: "1.125rem", // 18px
          },
        ],
      },

      borderRadius: {
        xs: "4px",
        sm: "4px",
        md: "8px",
        lg: "16px",
        xl: "24px",
        "2xl": "32px",
        card: "16px",
        pill: "9999px",
      },

      boxShadow: {
        card: "0 4px 12px rgba(0, 0, 0, 0.06)",
        "card-hover": "0 8px 24px rgba(0, 0, 0, 0.10)",
        "soft-outline": "0 0 0 1px rgba(255, 255, 255, 0.08)",
      },

      spacing: {
        // lock to the design scale (4, 8, 12, 16, 24, 32, 40, 48, 64)
        1: "0.25rem", // 4px
        2: "0.5rem", // 8px
        3: "0.75rem", // 12px
        4: "1rem", // 16px
        6: "1.5rem", // 24px
        8: "2rem", // 32px
        10: "2.5rem", // 40px
        12: "3rem", // 48px
        16: "4rem", // 64px
      },

      transitionDuration: {
        fast: "150ms",
        normal: "200ms",
        slow: "300ms",
      },

      transitionTimingFunction: {
        "santy-ease": "cubic-bezier(0.22, 1, 0.36, 1)",
      },

      backgroundImage: {
        "hero-gradient":
          "radial-gradient(circle at top left, rgba(0, 215, 192, 0.25), transparent 55%), radial-gradient(circle at bottom right, rgba(22, 163, 74, 0.22), transparent 55%)",
        "panel-gradient":
          "linear-gradient(135deg, #0B0B0C 0%, #1A1A1C 50%, #0B0B0C 100%)",
      },
    },
  },
  plugins: [],
};