Logos
The brand lockup as one SVG in three cuts: the full logo, the mark alone and the wordmark alone. Text parts inherit currentColor, the right half of the mark is brand green, and every part can be recoloured. Height sets the size; width follows the aspect ratio.
<Logo size={32} />
<LogoMark size={24} mark={{ left: { strokeWidth: 4 }, right: { color: "var(--brand-blue)" } }} />
<LogoWordmark aiColor="var(--brand-green)" />
<section className="relative overflow-hidden"><LogoBackdrop size={360} /> …</section>Lockup
Default: mark left in the text colour, mark right brand green, wordmark in the text colour.
Sizes
16 (favicon-scale, mark only) · 24 (topbar) · 32 (default) · 48 (page header) · 64 (marketing). Strokes are in viewBox units, so they scale with the logo.
Mark
Both halves are the same path, mirrored. Each half takes its own stroke colour and width.
Wordmark
Three fills: stocklots, the dot and ai.
On brand backgrounds
Inverse: white text parts; the green half of the mark stays. On the section gradient the mark goes all white so it does not fight the green tail.
Backdrop
LogoBackdrop: the mark as a hairline watermark in the bottom-right corner, bleeding past both edges. The parent is relative + overflow-hidden; the stroke is 1px on screen at any size.
Deals move fast
So do we.
Backdrop on a card
Same brand green on a light surface, opacity lowered to 40% and sized to the card.
Card title
The watermark sits behind the content and never captures the pointer.
Mono
One colour everywhere for print, embossing and low-contrast placements.
Decorative
Beside visible text the SVG is aria-hidden; the text carries the name.