Brand gradient

Phantom: The money app that'll take you placesLogo PhantomLogo PhantomLogo Phantom gradient

The gradient Phantom: The money app that'll take you placesLogo PhantomLogo PhantomLogo Phantom'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.

#ac9cf4 #ffd600 #ff0037

Open in the maker Phantom: The money app that'll take you placesLogo PhantomLogo PhantomLogo Phantom colors →Full brand page →crypto

Source: phantom.app
Extracted: 2 September 2026
Version: 3

Phantom: The money app that'll take you placesLogo PhantomLogo PhantomLogo Phantom

black text · worst 8.82:1 · AA

white 1.41 failsblack 8.82 AAbanding medium

Hero and button

Hero background

Open in maker →

Chroma ×0.35 so it can carry text; ink black (inkFor at the midpoint). Passes AA for that ink at the worst point (9.06:1) without adjusting L.

white 1.41 failsblack 9.06 AAbanding high

css

linear-gradient(135deg in oklch shorter hue, #aba7c5 0%, #e6d9aa 100%)

tailwind v4

bg-linear-to-br/oklch from-[#aba7c5] to-[#e6d9aa]

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. Black ink passes AA on the surface and both states (worst 6.76:1).

white 2.07 failsblack 7.63 AAbanding high

Get started

hover

active

label ink passes AA on all three

css

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

tailwind v4

bg-linear-to-b/oklch from-[#b8a9ff] to-[#a090e6]

Variants

Tonal ramp

Open in maker →

white 1.30 failsblack 4.32 AA largebanding high

css

linear-gradient(135deg in oklch shorter hue, #e4deff 0%, #ac9cf4 50%, #7665b8 100%)

tailwind v4

bg-linear-to-br/oklch from-[#e4deff] via-[#ac9cf4] to-[#7665b8]

Analogous

Open in maker →

Partner hue from the analogous rule at the source colour's lightness.

white 2.31 failsblack 8.79 AAbanding high

css

linear-gradient(135deg in oklab, #ac9cf4 0%, #82abf4 100%)

tailwind v4

bg-linear-to-br/oklab from-[#ac9cf4] to-[#82abf4]

Complementary

Open in maker →

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.25 failsblack 8.55 AAbanding medium

css

linear-gradient(135deg in oklch shorter hue, #ac9cf4 0%, #afb339 100%)

tailwind v4

bg-linear-to-br/oklch from-[#ac9cf4] to-[#afb339]

Triadic

Open in maker →

Partner hue from the triadic rule at the source colour's lightness.

white 2.36 failsblack 8.69 AAbanding high

css

linear-gradient(135deg in oklab, #ac9cf4 0%, #f58c47 100%)

tailwind v4

bg-linear-to-br/oklab from-[#ac9cf4] to-[#f58c47]

Report — brand gradient

white ink: worst 1.41:1 at 100% (fails AA); black ink: worst 8.82:1 at 0% (AA) → use black text.
Banding medium: ~6px bands at 1440px — add grain 10 (≈1% soft-light noise) or shorten the ramp.
37/64 samples left sRGB by more than 5% and were gamut-mapped (oklch shorter); expect slight hue drift there.

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 1.41:1, black 8.82:1 AA */
  --brand-gradient: linear-gradient(135deg in oklch shorter hue, #ac9cf4 0%, #ffd600 100%);
  /* hero — worst-case contrast: white 1.41:1, black 9.06:1 AA; ink passes AA at the worst point */
  --brand-gradient-hero: linear-gradient(135deg in oklch shorter hue, #aba7c5 0%, #e6d9aa 100%);
  --brand-gradient-hero-ink: #000000;
  /* button — worst-case contrast: white 2.07:1, black 7.63:1 AA */
  --brand-gradient-button: linear-gradient(180deg in oklch shorter hue, #b8a9ff 0%, #a090e6 100%);
  --brand-gradient-button-hover: linear-gradient(180deg in oklch shorter hue, #c2b2ff 0%, #a999f1 100%);
  --brand-gradient-button-active: linear-gradient(180deg in oklch shorter hue, #af9ff7 0%, #9786dc 100%);
  --brand-gradient-button-ink: #000000;
}

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="#ac9cf4"/><stop offset="7.14%" stop-color="#bf99f2"/><stop offset="14.29%" stop-color="#d197ec"/><stop offset="21.43%" stop-color="#e294e3"/><stop offset="28.57%" stop-color="#f293d7"/><stop offset="35.71%" stop-color="#ff92c9"/><stop offset="42.86%" stop-color="#ff94b8"/><stop offset="50%" stop-color="#ff9da9"/><stop offset="57.14%" stop-color="#ffa59d"/><stop offset="64.29%" stop-color="#ffac92"/><stop offset="71.43%" stop-color="#ffb486"/><stop offset="78.57%" stop-color="#ffbb77"/><stop offset="85.71%" stop-color="#ffc260"/><stop offset="92.86%" stop-color="#ffca28"/><stop offset="100%" stop-color="#ffd600"/></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.675,
              0.612,
              0.957
            ],
            "hex": "#ac9cf4"
          },
          "position": 0
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              1,
              0.839,
              0
            ],
            "hex": "#ffd600"
          },
          "position": 1
        }
      ],
      "$extensions": {
        "com.brandsweets": {
          "kind": "linear",
          "css": "linear-gradient(135deg in oklch shorter hue, #ac9cf4 0%, #ffd600 100%)",
          "interpolation": "oklch",
          "hue": "shorter",
          "angle": 135,
          "name": "brand",
          "contrast": {
            "white": {
              "ratio": 1.412,
              "at": 1,
              "passesAA": false,
              "passesAALarge": false
            },
            "black": {
              "ratio": 8.816,
              "at": 0,
              "passesAA": true,
              "passesAALarge": true
            },
            "suggestedInk": "#000000"
          }
        }
      },
      "$description": "The canonical brand gradient (--brand-gradient)."
    },
    "hero": {
      "$type": "gradient",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.671,
              0.655,
              0.773
            ],
            "hex": "#aba7c5"
          },
          "position": 0
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.902,
              0.851,
              0.667
            ],
            "hex": "#e6d9aa"
          },
          "position": 1
        }
      ],
      "$extensions": {
        "com.brandsweets": {
          "kind": "linear",
          "css": "linear-gradient(135deg in oklch shorter hue, #aba7c5 0%, #e6d9aa 100%)",
          "interpolation": "oklch",
          "hue": "shorter",
          "angle": 135,
          "name": "hero",
          "ink": "#000000",
          "contrast": {
            "white": {
              "ratio": 1.412,
              "at": 1,
              "passesAA": false,
              "passesAALarge": false
            },
            "black": {
              "ratio": 9.065,
              "at": 0,
              "passesAA": true,
              "passesAALarge": true
            },
            "suggestedInk": "#000000"
          }
        }
      },
      "$description": "Low-chroma hero background with a text-safe ink (--brand-gradient-hero)."
    },
    "button": {
      "$type": "gradient",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.722,
              0.663,
              1
            ],
            "hex": "#b8a9ff"
          },
          "position": 0
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.627,
              0.565,
              0.902
            ],
            "hex": "#a090e6"
          },
          "position": 1
        }
      ],
      "$extensions": {
        "com.brandsweets": {
          "kind": "linear",
          "css": "linear-gradient(180deg in oklch shorter hue, #b8a9ff 0%, #a090e6 100%)",
          "interpolation": "oklch",
          "hue": "shorter",
          "angle": 180,
          "name": "button",
          "ink": "#000000",
          "states": {
            "hover": "linear-gradient(180deg in oklch shorter hue, #c2b2ff 0%, #a999f1 100%)",
            "active": "linear-gradient(180deg in oklch shorter hue, #af9ff7 0%, #9786dc 100%)"
          },
          "contrast": {
            "white": {
              "ratio": 2.067,
              "at": 0,
              "passesAA": false,
              "passesAALarge": false
            },
            "black": {
              "ratio": 7.627,
              "at": 0.9841,
              "passesAA": true,
              "passesAALarge": true
            },
            "suggestedInk": "#000000"
          }
        }
      },
      "$description": "Button / CTA surface with hover and active states (--brand-gradient-button)."
    }
  }
}

Colours

#ac9cf4 #ffd600 #ff0037

mcpConnect your agent — Phantom: The money app that'll take you placesLogo PhantomLogo PhantomLogo Phantom'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 phantom-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.

Phantom: The money app that'll take you placesLogo PhantomLogo PhantomLogo Phantom 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 Phantom: The money app that'll take you placesLogo PhantomLogo PhantomLogo Phantom. Owner of this brand? Request a correction or removal → Machine-readable: gradients.md