Brand gradient

Form Builder with AI Automation gradient

The gradient Form Builder with AI Automation's published colour tokens imply, derived by a pure function of the palette: primary → secondary in OKLab (OKLCH shorter hue when the hues are more than 140° apart; a tonal ramp when they are within ΔE 0.15), then a hero background with an ink that passes AA at the worst point along the line, a button surface with hover and active states, and the variant contact sheet. Same inputs, same gradients, forever — which is what makes them citable; the same values are served as --brand-gradient in the brand's brand.css.

#000000 #d258fe #00ff84

Open in the maker Form Builder with AI Automation colors →Full brand page →marketing

Source: typeform.com
Extracted: 2 September 2026
Version: 2

Form Builder with AI Automation

white text · worst 3.20:1 · AA large

white 3.20 AA largeblack 1.00 failsbanding medium

Hero and button

Hero background

Open in maker →

Chroma ×0.35 so it can carry text; ink white (inkFor at the midpoint). L shifted −0.11 until the ink passes AA at the worst point (4.55:1).

white 4.55 AAblack 1.00 failsbanding medium

css

linear-gradient(135deg in oklab, #000000 0%, #8e689d 100%)

tailwind v4

bg-linear-to-br/oklab from-[#000000] to-[#8e689d]

Button / CTA

Open in maker →

ΔL 0.08 top→bottom in the primary's hue (a lit surface, not a rainbow); hover L +0.03, active L −0.03. White ink passes AA on the surface and both states (worst 19.91:1).

white 19.91 AAblack 1.01 failsbanding high

Get started

hover

active

label ink passes AA on all three

css

linear-gradient(180deg in oklch shorter hue, #090909 0%, #010101 100%)

tailwind v4

bg-linear-to-b/oklch from-[#090909] to-[#010101]

Variants

Tonal ramp

Open in maker →

white 10.86 AAblack 1.00 failsbanding medium

css

linear-gradient(135deg in oklch shorter hue, #3d3d3d 0%, #000000 100%)

tailwind v4

bg-linear-to-br/oklch from-[#3d3d3d] to-[#000000]

Analogous

Open in maker →

Primary #000000 is achromatic — harmony rotates #d258fe instead. Partner hue from the analogous rule at the source colour's lightness.

white 2.99 failsblack 6.57 AAbanding high

css

linear-gradient(135deg in oklab, #d258fe 0%, #9285fe 100%)

tailwind v4

bg-linear-to-br/oklab from-[#d258fe] to-[#9285fe]

Complementary

Open in maker →

Primary #000000 is achromatic — harmony rotates #d258fe instead. Partner hue from the complementary rule at the source colour's lightness. ΔH 180° > 140° — interpolating in oklch (shorter hue) keeps the midpoint saturated.

white 2.65 failsblack 6.21 AAbanding medium

css

linear-gradient(135deg in oklch shorter hue, #d258fe 0%, #5ab308 100%)

tailwind v4

bg-linear-to-br/oklch from-[#d258fe] to-[#5ab308]

Triadic

Open in maker →

Primary #000000 is achromatic — harmony rotates #d258fe instead. Partner hue from the triadic rule at the source colour's lightness.

white 2.89 failsblack 6.57 AAbanding medium

css

linear-gradient(135deg in oklab, #d258fe 0%, #cb8b08 100%)

tailwind v4

bg-linear-to-br/oklab from-[#d258fe] to-[#cb8b08]

Report — brand gradient

white ink: worst 3.20:1 at 100% (AA-large only); black ink: worst 1.00:1 at 0% (fails AA) → use white text.
Body text fails AA everywhere on this gradient; large text (≥24px / 19px bold) is fine. Add a scrim or lower the chroma for body copy.
Black text disappears completely at 0% (1.00:1 crossing).
Banding medium: ~6px bands at 1440px — add grain 9 (≈1% soft-light noise) or shorten the ramp.

Export

The custom properties below are byte-identical to the gradient block in brand.css; the DTCG token is what tokens.json carries.

css custom properties · brand.css

:root {
  /* Brand gradient (derived) */
  /* worst-case contrast: white 3.20:1 AA-large, black 1.00:1 */
  --brand-gradient: linear-gradient(135deg in oklab, #000000 0%, #d258fe 100%);
  /* hero — worst-case contrast: white 4.55:1 AA, black 1.00:1; ink passes AA at the worst point */
  --brand-gradient-hero: linear-gradient(135deg in oklab, #000000 0%, #8e689d 100%);
  --brand-gradient-hero-ink: #ffffff;
  /* button — worst-case contrast: white 19.91:1 AA, black 1.01:1 */
  --brand-gradient-button: linear-gradient(180deg in oklch shorter hue, #090909 0%, #010101 100%);
  --brand-gradient-button-hover: linear-gradient(180deg in oklch shorter hue, #090909 0%, #010101 100%);
  --brand-gradient-button-active: linear-gradient(180deg in oklch shorter hue, #090909 0%, #010101 100%);
  --brand-gradient-button-ink: #ffffff;
}

svg · brand gradient

<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="600" viewBox="0 0 1440 600"><defs><linearGradient id="bs-gradient" gradientUnits="userSpaceOnUse" x1="210" y1="-210" x2="1230" y2="810"><stop offset="0%" stop-color="#000000"/><stop offset="7.14%" stop-color="#010001"/><stop offset="14.29%" stop-color="#06010a"/><stop offset="21.43%" stop-color="#130319"/><stop offset="28.57%" stop-color="#21072a"/><stop offset="35.71%" stop-color="#300e3c"/><stop offset="42.86%" stop-color="#40154f"/><stop offset="50%" stop-color="#501d63"/><stop offset="57.14%" stop-color="#612577"/><stop offset="64.29%" stop-color="#732d8c"/><stop offset="71.43%" stop-color="#8535a2"/><stop offset="78.57%" stop-color="#983db8"/><stop offset="85.71%" stop-color="#ab46cf"/><stop offset="92.86%" stop-color="#be4fe6"/><stop offset="100%" stop-color="#d258fe"/></linearGradient></defs><rect width="1440" height="600" fill="url(#bs-gradient)"/></svg>

dtcg · tokens.json

{
  "gradient": {
    "brand": {
      "$type": "gradient",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000"
          },
          "position": 0
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.824,
              0.345,
              0.996
            ],
            "hex": "#d258fe"
          },
          "position": 1
        }
      ],
      "$extensions": {
        "com.brandsweets": {
          "kind": "linear",
          "css": "linear-gradient(135deg in oklab, #000000 0%, #d258fe 100%)",
          "interpolation": "oklab",
          "angle": 135,
          "name": "brand",
          "contrast": {
            "white": {
              "ratio": 3.198,
              "at": 1,
              "passesAA": false,
              "passesAALarge": true
            },
            "black": {
              "ratio": 1,
              "at": 0,
              "passesAA": false,
              "passesAALarge": false
            },
            "suggestedInk": "#ffffff"
          }
        }
      },
      "$description": "The canonical brand gradient (--brand-gradient)."
    },
    "hero": {
      "$type": "gradient",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000"
          },
          "position": 0
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.557,
              0.408,
              0.616
            ],
            "hex": "#8e689d"
          },
          "position": 1
        }
      ],
      "$extensions": {
        "com.brandsweets": {
          "kind": "linear",
          "css": "linear-gradient(135deg in oklab, #000000 0%, #8e689d 100%)",
          "interpolation": "oklab",
          "angle": 135,
          "name": "hero",
          "ink": "#ffffff",
          "contrast": {
            "white": {
              "ratio": 4.548,
              "at": 1,
              "passesAA": true,
              "passesAALarge": true
            },
            "black": {
              "ratio": 1,
              "at": 0,
              "passesAA": false,
              "passesAALarge": false
            },
            "suggestedInk": "#ffffff"
          }
        }
      },
      "$description": "Low-chroma hero background with a text-safe ink (--brand-gradient-hero)."
    },
    "button": {
      "$type": "gradient",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.035,
              0.035,
              0.035
            ],
            "hex": "#090909"
          },
          "position": 0
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.004,
              0.004,
              0.004
            ],
            "hex": "#010101"
          },
          "position": 1
        }
      ],
      "$extensions": {
        "com.brandsweets": {
          "kind": "linear",
          "css": "linear-gradient(180deg in oklch shorter hue, #090909 0%, #010101 100%)",
          "interpolation": "oklch",
          "hue": "shorter",
          "angle": 180,
          "name": "button",
          "ink": "#ffffff",
          "states": {
            "hover": "linear-gradient(180deg in oklch shorter hue, #090909 0%, #010101 100%)",
            "active": "linear-gradient(180deg in oklch shorter hue, #090909 0%, #010101 100%)"
          },
          "contrast": {
            "white": {
              "ratio": 19.912,
              "at": 0,
              "passesAA": true,
              "passesAALarge": true
            },
            "black": {
              "ratio": 1.006,
              "at": 0.873,
              "passesAA": false,
              "passesAALarge": false
            },
            "suggestedInk": "#ffffff"
          }
        }
      },
      "$description": "Button / CTA surface with hover and active states (--brand-gradient-button)."
    }
  }
}

Colours

#000000 #d258fe #00ff84

mcpConnect your agent — Form Builder with AI Automation's gradients on demand

live endpoint

Point any MCP client at the shared gradients endpoint and your agent gets the same engine as this page — make_gradient returns CSS with the interpolation space, Tailwind v4, SVG, a PNG URL, a DTCG token and the contrast report in one call; brand_gradients derives the whole contact sheet from a brand or a palette. Read-only, no key. Every gradient is a /gradients/new/… link: open it, refine, paste it back.

endpointhttps://mcp.brandsweets.com/gradients/mcp

claude mcp add --transport http brandsweets-gradients https://mcp.brandsweets.com/gradients/mcp

try this prompt

›brand_gradients for typeform-com — give me the hero CSS and the ink that passes AA, then a version in oklch

Want the agent to remember your picks and write them into a living brand? Create a free BrandSweets workspace.

Form Builder with AI Automation and its marks belong to their owner. This page uses the name nominatively to describe gradients derived from the brand's published colour values; it does not reproduce logos or other brand assets, and it is not affiliated with or endorsed by Form Builder with AI Automation. Owner of this brand? Request a correction or removal → Machine-readable: gradients.md