Cashpilot

Brand Entity / Display Name

Cashpilot

Industry Category

Finance & Pay

Primary Color (HEX / RGB / HSL)

#FFD54Frgb(255, 213, 79) · hsl(46, 100%, 65%)

WCAG Surface Contrast

Light 1.4:1 · Dark 14:1

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="256" height="256" role="img" aria-label="CashPilot">
  <!--
    Header logo. Deliberately NOT the same artwork as icon.svg (the favicon):
    this one is drawn to survive being scaled to ~24px on the theme's coloured
    header bar. That means no background plate (it would read as a dark blob
    against the purple), no sub-pixel strokes, and no fine detail that turns to
    mud. Bold shapes and high contrast only.
  -->
  <defs>
    <linearGradient id="cpSun" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#FFD54F"/>
      <stop offset="40%" stop-color="#FF9800"/>
      <stop offset="72%" stop-color="#E91E63"/>
      <stop offset="100%" stop-color="#AB47BC"/>
    </linearGradient>
    <mask id="cpBands">
      <rect width="256" height="256" fill="#fff"/>
      <!-- Horizon bands cut straight out of the disc, thick enough to stay
           visible when the whole mark is 24px wide. -->
      <rect x="16" y="150" width="224" height="10" fill="#000"/>
      <rect x="16" y="172" width="224" height="13" fill="#000"/>
      <rect x="16" y="197" width="224" height="16" fill="#000"/>
    </mask>
  </defs>

  <!--
    THE SUN TOUCHES ALL FOUR EDGES. It used to sit in a 192x192 box inside a
    256 canvas (32px of padding left and right, 36 top), which read as a small
    mark floating in space wherever it was placed. Scaling about the disc's own
    centre (r 96 to 128, and up 4px because the sun sat at cy=132) makes the
    ink bounding box exactly 256x256 at +0+0: touching, never overflowing.
    Verified by rendering and trimming, not by eye.

    The whole mark is scaled rather than every band and the plane re-derived by
    hand, so the artwork below stays exactly as drawn.
  -->
  <g transform="translate(128,128) scale(1.3333333) translate(-128,-132)">
  <circle cx="128" cy="132" r="96" fill="url(#cpSun)" mask="url(#cpBands)"/>

    <!-- Plane: the business jet from banner.svg (side view, climbing, T-tail,
         rear-mounted engine), the same #000010 at 0.65 silhouette. Drawn larger
         here than in the banner, relative to the sun, so it still reads as an
         aircraft at 16-32px. -->
    <g id="plane" transform="translate(130,112) rotate(-17) scale(1.85)" fill="#000010" opacity="0.65">
      <path d="M37,1.2 C35.8,-1.8 32,-3.8 26,-3.9 L-22,-3.9 L-36.5,-4.8 L-37.6,-3.2 L-15,3.6 L24,3.8 C30.5,3.8 35,3 37,1.2 Z"/>
      <path d="M-25,-3.9 L-31.8,-18.4 L-37.2,-18.6 L-36.4,-4.6 Z"/>
      <path d="M-28.8,-18.6 L-42.5,-19.6 L-42.2,-17.6 L-31,-16.8 Z"/>
      <path d="M-10,-7.2 L-23,-7.2 C-25.4,-7.2 -25.4,-1.8 -23,-1.8 L-10,-1.8 C-8.4,-1.8 -8.4,-7.2 -10,-7.2 Z"/>
      <path d="M9,3 L-6,3.4 L-16.8,12.6 L-19.5,9.4 L-20.2,9.6 L-18.6,13.4 L-12.2,13.2 Z"/>
    </g>
  </g>
</svg>

Engineering & Layout Guidelines

• Maintain the native 1:1 aspect ratio (viewBox "0 0 256 256") without non-uniform stretching.
• Preserve at least 20% clear space around the emblem bounding box.
• Contains vector gradients; avoid overriding paths with flat CSS fill: currentColor.