OffHealth component library

Colors 

<div class="p-6 grid grid-cols-2 gap-10">

    <div class="">
        <h2 class="text-xl mb-2"><strong>Base and Transparency</strong></h2>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>white</strong></h3>
                    <p><strong></strong></p>

                </div>
                <div class="h-20 bg-white flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>white/50</strong></h3>
                    <p><strong></strong></p>

                </div>
                <div class="h-20 bg-white/50 flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>white/25</strong></h3>
                    <p><strong></strong></p>

                </div>
                <div class="h-20 bg-white/25 flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>black</strong></h3>
                    <p><strong></strong></p>

                </div>
                <div class="h-20 bg-black flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>black/50</strong></h3>
                    <p><strong></strong></p>

                </div>
                <div class="h-20 bg-black/50 flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>black/25</strong></h3>
                    <p><strong></strong></p>

                </div>
                <div class="h-20 bg-black/25 flex-1"></div>
            </div>
        </div>

    </div>

    <div class="">
        <h2 class="text-xl mb-2"><strong>Brand</strong></h2>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>brand</strong></h3>
                    <p><strong></strong></p>

                </div>
                <div class="h-20 bg-brand flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>brand-darker</strong></h3>
                    <p><strong></strong></p>

                </div>
                <div class="h-20 bg-brand-darker flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>brand-lighter</strong></h3>
                    <p><strong></strong></p>

                </div>
                <div class="h-20 bg-brand-lighter flex-1"></div>
            </div>
        </div>

    </div>

    <div class="">
        <h2 class="text-xl mb-2"><strong>Primary</strong></h2>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>primary-50</strong></h3>
                    <p><strong>#eff6ff</strong></p>

                </div>
                <div class="h-20 bg-primary-50 flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>primary-100</strong></h3>
                    <p><strong>#dbeafe</strong></p>

                </div>
                <div class="h-20 bg-primary-100 flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>primary-200</strong></h3>
                    <p><strong>#bfdbfe</strong></p>

                </div>
                <div class="h-20 bg-primary-200 flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>primary-300</strong></h3>
                    <p><strong>#93c5fd</strong></p>

                </div>
                <div class="h-20 bg-primary-300 flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>primary-400</strong></h3>
                    <p><strong>#60a5fa</strong></p>

                </div>
                <div class="h-20 bg-primary-400 flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>primary-500</strong></h3>
                    <p><strong>#3b82f6</strong></p>

                </div>
                <div class="h-20 bg-primary-500 flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>primary-600</strong></h3>
                    <p><strong>#2563eb</strong></p>

                </div>
                <div class="h-20 bg-primary-600 flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>primary-700</strong></h3>
                    <p><strong>#1d4ed8</strong></p>

                </div>
                <div class="h-20 bg-primary-700 flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>primary-800</strong></h3>
                    <p><strong>#1e40af</strong></p>

                </div>
                <div class="h-20 bg-primary-800 flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>primary-900</strong></h3>
                    <p><strong>#1e3a8a</strong></p>

                </div>
                <div class="h-20 bg-primary-900 flex-1"></div>
            </div>
        </div>

    </div>

    <div class="">
        <h2 class="text-xl mb-2"><strong>Secondary</strong></h2>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>secondary-50</strong></h3>
                    <p><strong>#eff6ff</strong></p>

                </div>
                <div class="h-20 bg-secondary-50 flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>secondary-100</strong></h3>
                    <p><strong>#dbeafe</strong></p>

                </div>
                <div class="h-20 bg-secondary-100 flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>secondary-200</strong></h3>
                    <p><strong>#bfdbfe</strong></p>

                </div>
                <div class="h-20 bg-secondary-200 flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>secondary-300</strong></h3>
                    <p><strong>#93c5fd</strong></p>

                </div>
                <div class="h-20 bg-secondary-300 flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>secondary-400</strong></h3>
                    <p><strong>#60a5fa</strong></p>

                </div>
                <div class="h-20 bg-secondary-400 flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>secondary-500</strong></h3>
                    <p><strong>#3b82f6</strong></p>

                </div>
                <div class="h-20 bg-secondary-500 flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>secondary-600</strong></h3>
                    <p><strong>#2563eb</strong></p>

                </div>
                <div class="h-20 bg-secondary-600 flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>secondary-700</strong></h3>
                    <p><strong>#1d4ed8</strong></p>

                </div>
                <div class="h-20 bg-secondary-700 flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>secondary-800</strong></h3>
                    <p><strong>#1e40af</strong></p>

                </div>
                <div class="h-20 bg-secondary-800 flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>secondary-900</strong></h3>
                    <p><strong>#1e3a8a</strong></p>

                </div>
                <div class="h-20 bg-secondary-900 flex-1"></div>
            </div>
        </div>

    </div>

    <div class="">
        <h2 class="text-xl mb-2"><strong>Neutral</strong></h2>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>neutral-50</strong></h3>
                    <p><strong>#eff6ff</strong></p>

                </div>
                <div class="h-20 bg-neutral-50 flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>neutral-100</strong></h3>
                    <p><strong>#dbeafe</strong></p>

                </div>
                <div class="h-20 bg-neutral-100 flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>neutral-200</strong></h3>
                    <p><strong>#bfdbfe</strong></p>

                </div>
                <div class="h-20 bg-neutral-200 flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>neutral-300</strong></h3>
                    <p><strong>#93c5fd</strong></p>

                </div>
                <div class="h-20 bg-neutral-300 flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>neutral-400</strong></h3>
                    <p><strong>#60a5fa</strong></p>

                </div>
                <div class="h-20 bg-neutral-400 flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>neutral-500</strong></h3>
                    <p><strong>#3b82f6</strong></p>

                </div>
                <div class="h-20 bg-neutral-500 flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>neutral-600</strong></h3>
                    <p><strong>#2563eb</strong></p>

                </div>
                <div class="h-20 bg-neutral-600 flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>neutral-700</strong></h3>
                    <p><strong>#1d4ed8</strong></p>

                </div>
                <div class="h-20 bg-neutral-700 flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>neutral-800</strong></h3>
                    <p><strong>#1e40af</strong></p>

                </div>
                <div class="h-20 bg-neutral-800 flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>neutral-900</strong></h3>
                    <p><strong>#1e3a8a</strong></p>

                </div>
                <div class="h-20 bg-neutral-900 flex-1"></div>
            </div>
        </div>

    </div>

    <div class="">
        <h2 class="text-xl mb-2"><strong>Support</strong></h2>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>success-dark</strong></h3>
                    <p><strong>#eff6ff</strong></p>

                </div>
                <div class="h-20 bg-success-dark flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>success</strong></h3>
                    <p><strong>#eff6ff</strong></p>

                </div>
                <div class="h-20 bg-success flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>success-light</strong></h3>
                    <p><strong>#eff6ff</strong></p>

                </div>
                <div class="h-20 bg-success-light flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>error-dark</strong></h3>
                    <p><strong>#eff6ff</strong></p>

                </div>
                <div class="h-20 bg-error-dark flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>error</strong></h3>
                    <p><strong>#eff6ff</strong></p>

                </div>
                <div class="h-20 bg-error flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>error-light</strong></h3>
                    <p><strong>#eff6ff</strong></p>

                </div>
                <div class="h-20 bg-error-light flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>warn-dark</strong></h3>
                    <p><strong>#eff6ff</strong></p>

                </div>
                <div class="h-20 bg-warn-dark flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>warn</strong></h3>
                    <p><strong>#eff6ff</strong></p>

                </div>
                <div class="h-20 bg-warn flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>warn-light</strong></h3>
                    <p><strong>#eff6ff</strong></p>

                </div>
                <div class="h-20 bg-warn-light flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>info-dark</strong></h3>
                    <p><strong>#eff6ff</strong></p>

                </div>
                <div class="h-20 bg-info-dark flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>info</strong></h3>
                    <p><strong>#eff6ff</strong></p>

                </div>
                <div class="h-20 bg-info flex-1"></div>
            </div>
        </div>

        <div class="grid gap-4">
            <div class="flex gap-4">
                <div class="w-1/3">
                    <h3 class="text-md"><strong>info-light</strong></h3>
                    <p><strong>#eff6ff</strong></p>

                </div>
                <div class="h-20 bg-info-light flex-1"></div>
            </div>
        </div>

    </div>

</div>
 
<div class="p-6 grid grid-cols-2 gap-10">
  {% for color in colors %}
  <div class="">
    <h2 class="text-xl mb-2"><strong>{{ color.name }}</strong></h2>
    {% for hue in color.hues %}
    <div class="grid gap-4">
      <div class="flex gap-4">
        <div class="w-1/3">
          <h3 class="text-md"><strong>{{ hue.name }}</strong></h3>
          <p><strong>{{ hue.hex }}</strong></p>
          {# <p>
            classes: <strong>{{ hue.class }} {{ hue.textclass }}</strong>
          </p>
          #}
        </div>
        <div class="h-20 {{ hue.class }} flex-1"></div>
      </div>
    </div>
    {% endfor %}
  </div>
  {% endfor %}
</div>
 
{
  "colors": [
    {
      "name": "Base and Transparency",
      "hues": [
        {
          "name": "white",
          "class": "bg-white"
        },
        {
          "name": "white/50",
          "class": "bg-white/50"
        },
        {
          "name": "white/25",
          "class": "bg-white/25"
        },
        {
          "name": "black",
          "class": "bg-black"
        },
        {
          "name": "black/50",
          "class": "bg-black/50"
        },
        {
          "name": "black/25",
          "class": "bg-black/25"
        }
      ]
    },
    {
      "name": "Brand",
      "hues": [
        {
          "name": "brand",
          "class": "bg-brand"
        },
        {
          "name": "brand-darker",
          "class": "bg-brand-darker"
        },
        {
          "name": "brand-lighter",
          "class": "bg-brand-lighter"
        }
      ]
    },
    {
      "name": "Primary",
      "hues": [
        {
          "name": "primary-50",
          "hex": "#eff6ff",
          "class": "bg-primary-50",
          "textclass": "text-primary-50"
        },
        {
          "name": "primary-100",
          "hex": "#dbeafe",
          "class": "bg-primary-100",
          "textclass": "text-primary-100"
        },
        {
          "name": "primary-200",
          "hex": "#bfdbfe",
          "class": "bg-primary-200",
          "textclass": "text-primary-200"
        },
        {
          "name": "primary-300",
          "hex": "#93c5fd",
          "class": "bg-primary-300",
          "textclass": "text-primary-300"
        },
        {
          "name": "primary-400",
          "hex": "#60a5fa",
          "class": "bg-primary-400",
          "textclass": "text-primary-400"
        },
        {
          "name": "primary-500",
          "hex": "#3b82f6",
          "class": "bg-primary-500",
          "textclass": "text-primary-500"
        },
        {
          "name": "primary-600",
          "hex": "#2563eb",
          "class": "bg-primary-600",
          "textclass": "text-primary-600"
        },
        {
          "name": "primary-700",
          "hex": "#1d4ed8",
          "class": "bg-primary-700",
          "textclass": "text-primary-700"
        },
        {
          "name": "primary-800",
          "hex": "#1e40af",
          "class": "bg-primary-800",
          "textclass": "text-primary-800"
        },
        {
          "name": "primary-900",
          "hex": "#1e3a8a",
          "class": "bg-primary-900",
          "textclass": "text-primary-900"
        }
      ]
    },
    {
      "name": "Secondary",
      "hues": [
        {
          "name": "secondary-50",
          "hex": "#eff6ff",
          "class": "bg-secondary-50",
          "textclass": "text-secondary-50"
        },
        {
          "name": "secondary-100",
          "hex": "#dbeafe",
          "class": "bg-secondary-100",
          "textclass": "text-secondary-100"
        },
        {
          "name": "secondary-200",
          "hex": "#bfdbfe",
          "class": "bg-secondary-200",
          "textclass": "text-secondary-200"
        },
        {
          "name": "secondary-300",
          "hex": "#93c5fd",
          "class": "bg-secondary-300",
          "textclass": "text-secondary-300"
        },
        {
          "name": "secondary-400",
          "hex": "#60a5fa",
          "class": "bg-secondary-400",
          "textclass": "text-secondary-400"
        },
        {
          "name": "secondary-500",
          "hex": "#3b82f6",
          "class": "bg-secondary-500",
          "textclass": "text-secondary-500"
        },
        {
          "name": "secondary-600",
          "hex": "#2563eb",
          "class": "bg-secondary-600",
          "textclass": "text-secondary-600"
        },
        {
          "name": "secondary-700",
          "hex": "#1d4ed8",
          "class": "bg-secondary-700",
          "textclass": "text-secondary-700"
        },
        {
          "name": "secondary-800",
          "hex": "#1e40af",
          "class": "bg-secondary-800",
          "textclass": "text-secondary-800"
        },
        {
          "name": "secondary-900",
          "hex": "#1e3a8a",
          "class": "bg-secondary-900",
          "textclass": "text-secondary-900"
        }
      ]
    },
    {
      "name": "Neutral",
      "hues": [
        {
          "name": "neutral-50",
          "hex": "#eff6ff",
          "class": "bg-neutral-50",
          "textclass": "text-neutral-50"
        },
        {
          "name": "neutral-100",
          "hex": "#dbeafe",
          "class": "bg-neutral-100",
          "textclass": "text-neutral-100"
        },
        {
          "name": "neutral-200",
          "hex": "#bfdbfe",
          "class": "bg-neutral-200",
          "textclass": "text-neutral-200"
        },
        {
          "name": "neutral-300",
          "hex": "#93c5fd",
          "class": "bg-neutral-300",
          "textclass": "text-neutral-300"
        },
        {
          "name": "neutral-400",
          "hex": "#60a5fa",
          "class": "bg-neutral-400",
          "textclass": "text-neutral-400"
        },
        {
          "name": "neutral-500",
          "hex": "#3b82f6",
          "class": "bg-neutral-500",
          "textclass": "text-neutral-500"
        },
        {
          "name": "neutral-600",
          "hex": "#2563eb",
          "class": "bg-neutral-600",
          "textclass": "text-neutral-600"
        },
        {
          "name": "neutral-700",
          "hex": "#1d4ed8",
          "class": "bg-neutral-700",
          "textclass": "text-neutral-700"
        },
        {
          "name": "neutral-800",
          "hex": "#1e40af",
          "class": "bg-neutral-800",
          "textclass": "text-neutral-800"
        },
        {
          "name": "neutral-900",
          "hex": "#1e3a8a",
          "class": "bg-neutral-900",
          "textclass": "text-neutral-900"
        }
      ]
    },
    {
      "name": "Support",
      "hues": [
        {
          "name": "success-dark",
          "hex": "#eff6ff",
          "class": "bg-success-dark"
        },
        {
          "name": "success",
          "hex": "#eff6ff",
          "class": "bg-success"
        },
        {
          "name": "success-light",
          "hex": "#eff6ff",
          "class": "bg-success-light"
        },
        {
          "name": "error-dark",
          "hex": "#eff6ff",
          "class": "bg-error-dark"
        },
        {
          "name": "error",
          "hex": "#eff6ff",
          "class": "bg-error"
        },
        {
          "name": "error-light",
          "hex": "#eff6ff",
          "class": "bg-error-light"
        },
        {
          "name": "warn-dark",
          "hex": "#eff6ff",
          "class": "bg-warn-dark"
        },
        {
          "name": "warn",
          "hex": "#eff6ff",
          "class": "bg-warn"
        },
        {
          "name": "warn-light",
          "hex": "#eff6ff",
          "class": "bg-warn-light"
        },
        {
          "name": "info-dark",
          "hex": "#eff6ff",
          "class": "bg-info-dark"
        },
        {
          "name": "info",
          "hex": "#eff6ff",
          "class": "bg-info"
        },
        {
          "name": "info-light",
          "hex": "#eff6ff",
          "class": "bg-info-light"
        }
      ]
    }
  ]
}

Color scheme for interface.

Learn more