Tailwind

Turn a palette into production-ready tokens

Bridge discovery and implementation by exporting a palette slug as Tailwind theme colors, CSS variables, and utility examples.

Palette slug

Open palette

brand1

#264653

brand2

#2A9D8F

brand3

#E9C46A

brand4

#F4A261

Token preview

How the palette maps into a design system

brand1

#264653

brand2

#2A9D8F

brand3

#E9C46A

brand4

#F4A261

brand5

#E76F51

Accent badge

tailwind.config.js

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand1: "#264653",
        brand2: "#2a9d8f",
        brand3: "#e9c46a",
        brand4: "#f4a261",
        brand5: "#e76f51",
      },
    },
  },
}

Utility examples

bg-brand1 text-brand1 border-brand1 // #264653
bg-brand2 text-brand2 border-brand2 // #2A9D8F
bg-brand3 text-brand3 border-brand3 // #E9C46A
bg-brand4 text-brand4 border-brand4 // #F4A261
bg-brand5 text-brand5 border-brand5 // #E76F51

CSS variables

:root {
  --brand-1: #264653;
  --brand-2: #2a9d8f;
  --brand-3: #e9c46a;
  --brand-4: #f4a261;
  --brand-5: #e76f51;
}

Checklist

Implementation notes

Reserve `brand1` for the most trusted or frequently repeated accent in the system.

Assign the darkest token to headers, nav, and heavy data surfaces.

Keep the lightest token for cards, backgrounds, or supporting UI chrome.

Use CSS variables too so the palette can power both utility classes and raw component styles.