Docs · Brand

Attribution badge

A small “Analytics by Statlark” badge for your footer — the Slark mascot plus a plain link back to statlark.com. It’s the classic “Powered by” credit, done on-brand. Paste it in, restyle it if you like, done.

The badge shows no analytics data, makes no network requests, and runs no JavaScript. Every snippet is one anchor, one inline SVG, and one scoped <style>block — under 1.5 KB, with nothing loaded from a CDN. It inherits your site’s font, so it sits quietly wherever you drop it.

Adding it is optional and always appreciated — it’s how other founders find Statlark. Pick a variant, copy it into your footer markup, and you’re done.

Pick a variant

Same markup in every one — only the classes and colours change. Each preview below is the exact snippet in its copy button.

Light

White pill, indigo text, full-colour mascot. The default.

Analytics by Statlark

<!-- Statlark badge · light — paste into your footer. No JS, no requests. Restyle via --slk-badge-* properties (README.md). -->
<a class="slk-badge slk-badge--light" href="https://statlark.com">
  <svg viewBox="0 0 22 22" width="18" height="18" aria-hidden="true"><title>Slark</title><path d="M3 14 L11 7 L9 13 Z" fill="#5B6B8A"/><circle cx="13" cy="11" r="6" fill="#E55A2B"/><path d="M11 6 Q13 4 15 6 L13 8 Z" fill="#232046"/><path d="M18.5 9.5 L21 10.2 L18.6 11 Z" fill="#F2B441"/><circle cx="14.5" cy="9.2" r="1" fill="#232046"/></svg>
  <span>Analytics by <b>Stat<i>lark</i></b></span>
</a>
<style>
.slk-badge.slk-badge--light{display:inline-flex;align-items:center;gap:var(--slk-badge-gap,.5em);padding:.5em .9em .5em .65em;color:var(--slk-badge-fg,#232046);background:var(--slk-badge-bg,#fff);border:1px solid var(--slk-badge-border,#d7dee5);border-radius:var(--slk-badge-radius,999px);font:inherit;font-family:var(--slk-badge-font,inherit);font-size:var(--slk-badge-size,13px);line-height:1;text-decoration:none;white-space:nowrap;vertical-align:middle}
.slk-badge--light svg{width:1.35em;height:1.35em;flex:none}
.slk-badge--light b{font-weight:700}
.slk-badge--light i{font-style:normal;color:var(--slk-badge-lark,#c24417)}
.slk-badge.slk-badge--light:hover{border-color:var(--slk-badge-fg,#232046)}
.slk-badge.slk-badge--light:focus-visible{outline:2px solid #e55a2b;outline-offset:2px}
.slk-badge.slk-badge--sm{font-size:var(--slk-badge-size,12px)}
</style>

Dark

Indigo pill for dark footers; the “lark” lifts to #EE6B3D to stay AA-legible on indigo.

Analytics by Statlark

<!-- Statlark badge · dark — paste into your dark footer. No JS, no requests. Restyle via --slk-badge-* properties (README.md). -->
<a class="slk-badge slk-badge--dark" href="https://statlark.com">
  <svg viewBox="0 0 22 22" width="18" height="18" aria-hidden="true"><title>Slark</title><path d="M3 14 L11 7 L9 13 Z" fill="#5B6B8A"/><circle cx="13" cy="11" r="6" fill="#E55A2B"/><path d="M11 6 Q13 4 15 6 L13 8 Z" fill="#232046"/><path d="M18.5 9.5 L21 10.2 L18.6 11 Z" fill="#F2B441"/><circle cx="14.5" cy="9.2" r="1" fill="#232046"/></svg>
  <span>Analytics by <b>Stat<i>lark</i></b></span>
</a>
<style>
.slk-badge.slk-badge--dark{display:inline-flex;align-items:center;gap:var(--slk-badge-gap,.5em);padding:.5em .9em .5em .65em;color:var(--slk-badge-fg,#edf1f5);background:var(--slk-badge-bg,#232046);border:1px solid var(--slk-badge-border,#322f52);border-radius:var(--slk-badge-radius,999px);font:inherit;font-family:var(--slk-badge-font,inherit);font-size:var(--slk-badge-size,13px);line-height:1;text-decoration:none;white-space:nowrap;vertical-align:middle}
.slk-badge--dark svg{width:1.35em;height:1.35em;flex:none}
.slk-badge--dark b{font-weight:700}
.slk-badge--dark i{font-style:normal;color:var(--slk-badge-lark,#ee6b3d)}
.slk-badge.slk-badge--dark:hover{border-color:var(--slk-badge-fg,#edf1f5)}
.slk-badge.slk-badge--dark:focus-visible{outline:2px solid #ee6b3d;outline-offset:2px}
.slk-badge.slk-badge--sm{font-size:var(--slk-badge-size,12px)}
</style>

Mono

No pill. The mascot and text render in currentColor — whatever colour your footer text already is (shown here inheriting a slate footer).

Analytics by Statlark

<!-- Statlark badge · mono — no pill; inherits your text colour and font. No JS, no requests. (README.md) -->
<a class="slk-badge slk-badge--mono" href="https://statlark.com">
  <svg viewBox="0 0 22 22" width="18" height="18" fill="currentColor" aria-hidden="true"><title>Slark</title><path d="M3 14 L11 7 L9 13 Z"/><path fill-rule="evenodd" d="M13 5a6 6 0 1 0 0 12 6 6 0 1 0 0-12Zm1.5 3.2a1 1 0 1 0 0 2 1 1 0 1 0 0-2Z"/><path d="M11 6 Q13 4 15 6 L13 8 Z"/><path d="M18.5 9.5 L21 10.2 L18.6 11 Z"/></svg>
  <span>Analytics by <b>Statlark</b></span>
</a>
<style>
.slk-badge.slk-badge--mono{display:inline-flex;align-items:center;gap:var(--slk-badge-gap,.5em);padding:0;color:inherit;background:none;border:0;font:inherit;font-family:var(--slk-badge-font,inherit);font-size:var(--slk-badge-size,13px);line-height:1;text-decoration:none;white-space:nowrap;vertical-align:middle}
.slk-badge--mono svg{width:1.35em;height:1.35em;flex:none}
.slk-badge--mono b{font-weight:700}
.slk-badge.slk-badge--mono:hover{text-decoration:underline}
.slk-badge.slk-badge--mono:focus-visible{outline:2px solid;outline-offset:2px}
.slk-badge.slk-badge--sm{font-size:var(--slk-badge-size,12px)}
</style>

Compact

Mascot plus the Statlark wordmark, for tight footers.

Statlark

<!-- Statlark badge · compact — mascot + "Statlark" for tight footers. No JS, no requests. -->
<a class="slk-badge slk-badge--light slk-badge--compact" href="https://statlark.com">
  <svg viewBox="0 0 22 22" width="18" height="18" aria-hidden="true"><title>Slark</title><path d="M3 14 L11 7 L9 13 Z" fill="#5B6B8A"/><circle cx="13" cy="11" r="6" fill="#E55A2B"/><path d="M11 6 Q13 4 15 6 L13 8 Z" fill="#232046"/><path d="M18.5 9.5 L21 10.2 L18.6 11 Z" fill="#F2B441"/><circle cx="14.5" cy="9.2" r="1" fill="#232046"/></svg>
  <span><b>Stat<i>lark</i></b></span>
</a>
<style>
.slk-badge.slk-badge--light{display:inline-flex;align-items:center;gap:var(--slk-badge-gap,.5em);padding:.5em .9em .5em .65em;color:var(--slk-badge-fg,#232046);background:var(--slk-badge-bg,#fff);border:1px solid var(--slk-badge-border,#d7dee5);border-radius:var(--slk-badge-radius,999px);font:inherit;font-family:var(--slk-badge-font,inherit);font-size:var(--slk-badge-size,13px);line-height:1;text-decoration:none;white-space:nowrap;vertical-align:middle}
.slk-badge--light svg{width:1.35em;height:1.35em;flex:none}
.slk-badge--light b{font-weight:700}
.slk-badge--light i{font-style:normal;color:var(--slk-badge-lark,#c24417)}
.slk-badge.slk-badge--light:hover{border-color:var(--slk-badge-fg,#232046)}
.slk-badge.slk-badge--light:focus-visible{outline:2px solid #e55a2b;outline-offset:2px}
.slk-badge.slk-badge--compact{padding:.5em .8em .5em .6em}
</style>

Mascot only

Just the mascot. The link carries an aria-label="Analytics by Statlark" so it stays accessible.

<!-- Statlark badge · mascot only — the link keeps an accessible label. No JS, no requests. (README.md) -->
<a class="slk-badge slk-badge--light slk-badge--mark" href="https://statlark.com" aria-label="Analytics by Statlark">
  <svg viewBox="0 0 22 22" width="20" height="20" role="img"><title>Analytics by Statlark</title><path d="M3 14 L11 7 L9 13 Z" fill="#5B6B8A"/><circle cx="13" cy="11" r="6" fill="#E55A2B"/><path d="M11 6 Q13 4 15 6 L13 8 Z" fill="#232046"/><path d="M18.5 9.5 L21 10.2 L18.6 11 Z" fill="#F2B441"/><circle cx="14.5" cy="9.2" r="1" fill="#232046"/></svg>
</a>
<style>
.slk-badge.slk-badge--light{display:inline-flex;align-items:center;gap:var(--slk-badge-gap,.5em);padding:.5em .9em .5em .65em;color:var(--slk-badge-fg,#232046);background:var(--slk-badge-bg,#fff);border:1px solid var(--slk-badge-border,#d7dee5);border-radius:var(--slk-badge-radius,999px);font:inherit;font-family:var(--slk-badge-font,inherit);font-size:var(--slk-badge-size,13px);line-height:1;text-decoration:none;white-space:nowrap;vertical-align:middle}
.slk-badge.slk-badge--light:hover{border-color:var(--slk-badge-fg,#232046)}
.slk-badge.slk-badge--light:focus-visible{outline:2px solid #e55a2b;outline-offset:2px}
.slk-badge.slk-badge--mark{padding:.45em;gap:0}
.slk-badge--mark svg{width:1.5em;height:1.5em;display:block}
</style>

Sizes

Everything scales in em, so one property resizes the whole badge — mascot, padding and all.

Analytics by StatlarkAnalytics by StatlarkAnalytics by Statlark

Default (md) is 13px. Add slk-badge--sm for 12px.
Or set any size directly: style="--slk-badge-size: 16px" — shown on the right above.

Restyle it

Override one custom property instead of forking the markup. Set them on the badge, or on any ancestor. All have sane fallbacks baked in.

--slk-badge-fg — text colour (and hover border)
--slk-badge-bg — pill fill (mono has none)
--slk-badge-border — hairline border
--slk-badge-radius — corner radius (a pill by default)
--slk-badge-size — text size; everything else scales in em
--slk-badge-font— font family (inherits your site’s by default)
--slk-badge-lark— the “lark” half of the wordmark

Analytics by Statlark

.site-footer .slk-badge {
  --slk-badge-bg: #123B2A;
  --slk-badge-fg: #E8F5EE;
  --slk-badge-border: #2C5C46;
  --slk-badge-lark: #F2B441;
  --slk-badge-radius: 8px;
}

Once you recolour, contrast is yours to keep — aim for 4.5:1 text against your --slk-badge-bg. To strip the chrome entirely, use the mono variant: it has no pill and behaves like your other footer links.

The rules

A few things keep the badge safe to distribute across every customer site — mostly so the link stays a normal editorial link in Google’s eyes.

Do

Keep the anchor text branded — “Analytics by Statlark”, “Powered by Statlark”, or plain “Statlark”. Swapping “Analytics by” for “Powered by” in the <span> is fine.
Keep it a plain <a href="https://statlark.com">.
Recolour, resize, or go mono as much as you like.

Don’t

Don’t add rel="nofollow"— it’s an ordinary link.
Don’t stuff keywords into the anchor text. Mass-distributed keyword-rich links are a known link-scheme pattern; branded text keeps everyone safe.
Don’t wrap the link in JavaScript, a redirect, or a click tracker.
Don’t load the badge from a CDN — paste it. That’s what keeps it dependency-free.

React & frameworks

WordPress — add a Custom HTML widget or block and paste a snippet verbatim.

Astro — paste a snippet straight into any .astro template; Astro passes the HTML through unchanged.

React / Next.js — drop the snippet into JSX (rename class to className), or use the typed component below. It’s server-component safe — no "use client", no runtime JS.

<StatlarkBadge />                        // light, md
<StatlarkBadge variant="dark" compact /> // dark pill, "Statlark" only
<StatlarkBadge variant="mono" size="sm" />// chromeless, inherits colour
<StatlarkBadge mascotOnly />             // mascot with aria-label
<StatlarkBadge utm="yoursite.com" />     // opt-in referral tag

Save this as StatlarkBadge.tsx in your components folder. It renders the same DOM and scoped CSS as the snippets; the optional utm prop appends ?ref=<value> so Statlark can see the referral (still a static query string — no cookies, no tracking).

/**
 * StatlarkBadge — the "Analytics by Statlark" attribution badge.
 *
 * Renders the same DOM and the same scoped CSS as the raw snippets in
 * ../snippets/. Server-component safe: no state, no effects, no client JS.
 * The link stays a plain crawlable <a> with branded anchor text — keep it that way.
 */
import * as React from "react";

export type StatlarkBadgeVariant = "light" | "dark" | "mono";
export type StatlarkBadgeSize = "md" | "sm";

export interface StatlarkBadgeProps {
  /** Visual treatment. "mono" is chromeless and inherits the host text colour. Default "light". */
  variant?: StatlarkBadgeVariant;
  /** "sm" tightens the type to 12px. Default "md" (13px). */
  size?: StatlarkBadgeSize;
  /** Mascot + "Statlark" only — for tight footers. */
  compact?: boolean;
  /** Mascot alone; the link keeps an accessible "Analytics by Statlark" label. */
  mascotOnly?: boolean;
  className?: string;
  /**
   * Opt-in referral tag: appends ?ref=<value> to the link
   * (utm="yoursite.com" → https://statlark.com/?ref=yoursite.com).
   * Default is the clean bare URL — no tracking params.
   */
  utm?: string;
}

const SITE = "https://statlark.com";

/* Scoped styles — identical to the snippet files. */
const LIGHT = `
.slk-badge.slk-badge--light{display:inline-flex;align-items:center;gap:var(--slk-badge-gap,.5em);padding:.5em .9em .5em .65em;color:var(--slk-badge-fg,#232046);background:var(--slk-badge-bg,#fff);border:1px solid var(--slk-badge-border,#d7dee5);border-radius:var(--slk-badge-radius,999px);font:inherit;font-family:var(--slk-badge-font,inherit);font-size:var(--slk-badge-size,13px);line-height:1;text-decoration:none;white-space:nowrap;vertical-align:middle}
.slk-badge--light svg{width:1.35em;height:1.35em;flex:none}
.slk-badge--light b{font-weight:700}
.slk-badge--light i{font-style:normal;color:var(--slk-badge-lark,#c24417)}
.slk-badge.slk-badge--light:hover{border-color:var(--slk-badge-fg,#232046)}
.slk-badge.slk-badge--light:focus-visible{outline:2px solid #e55a2b;outline-offset:2px}`;

const DARK = `
.slk-badge.slk-badge--dark{display:inline-flex;align-items:center;gap:var(--slk-badge-gap,.5em);padding:.5em .9em .5em .65em;color:var(--slk-badge-fg,#edf1f5);background:var(--slk-badge-bg,#232046);border:1px solid var(--slk-badge-border,#322f52);border-radius:var(--slk-badge-radius,999px);font:inherit;font-family:var(--slk-badge-font,inherit);font-size:var(--slk-badge-size,13px);line-height:1;text-decoration:none;white-space:nowrap;vertical-align:middle}
.slk-badge--dark svg{width:1.35em;height:1.35em;flex:none}
.slk-badge--dark b{font-weight:700}
.slk-badge--dark i{font-style:normal;color:var(--slk-badge-lark,#ee6b3d)}
.slk-badge.slk-badge--dark:hover{border-color:var(--slk-badge-fg,#edf1f5)}
.slk-badge.slk-badge--dark:focus-visible{outline:2px solid #ee6b3d;outline-offset:2px}`;

const MONO = `
.slk-badge.slk-badge--mono{display:inline-flex;align-items:center;gap:var(--slk-badge-gap,.5em);padding:0;color:inherit;background:none;border:0;font:inherit;font-family:var(--slk-badge-font,inherit);font-size:var(--slk-badge-size,13px);line-height:1;text-decoration:none;white-space:nowrap;vertical-align:middle}
.slk-badge--mono svg{width:1.35em;height:1.35em;flex:none}
.slk-badge--mono b{font-weight:700}
.slk-badge.slk-badge--mono:hover{text-decoration:underline}
.slk-badge.slk-badge--mono:focus-visible{outline:2px solid;outline-offset:2px}`;

const SM = `
.slk-badge.slk-badge--sm{font-size:var(--slk-badge-size,12px)}`;

const COMPACT = `
.slk-badge.slk-badge--compact{padding:.5em .8em .5em .6em}`;

const MARK = `
.slk-badge.slk-badge--mark{padding:.45em;gap:0}
.slk-badge--mark svg{width:1.5em;height:1.5em;display:block}`;

function ColourMascot({ decorative }: { decorative: boolean }) {
  return (
    <svg viewBox="0 0 22 22" width="18" height="18" role={decorative ? undefined : "img"} aria-hidden={decorative || undefined}>
      <title>{decorative ? "Slark" : "Analytics by Statlark"}</title>
      <path d="M3 14 L11 7 L9 13 Z" fill="#5B6B8A" />
      <circle cx="13" cy="11" r="6" fill="#E55A2B" />
      <path d="M11 6 Q13 4 15 6 L13 8 Z" fill="#232046" />
      <path d="M18.5 9.5 L21 10.2 L18.6 11 Z" fill="#F2B441" />
      <circle cx="14.5" cy="9.2" r="1" fill="#232046" />
    </svg>
  );
}

function MonoMascot({ decorative }: { decorative: boolean }) {
  return (
    <svg viewBox="0 0 22 22" width="18" height="18" fill="currentColor" role={decorative ? undefined : "img"} aria-hidden={decorative || undefined}>
      <title>{decorative ? "Slark" : "Analytics by Statlark"}</title>
      <path d="M3 14 L11 7 L9 13 Z" />
      <path fillRule="evenodd" d="M13 5a6 6 0 1 0 0 12 6 6 0 1 0 0-12Zm1.5 3.2a1 1 0 1 0 0 2 1 1 0 1 0 0-2Z" />
      <path d="M11 6 Q13 4 15 6 L13 8 Z" />
      <path d="M18.5 9.5 L21 10.2 L18.6 11 Z" />
    </svg>
  );
}

export function StatlarkBadge({
  variant = "light",
  size = "md",
  compact = false,
  mascotOnly = false,
  className,
  utm,
}: StatlarkBadgeProps) {
  const href = utm ? `${SITE}/?ref=${encodeURIComponent(utm)}` : SITE;
  const classes = [
    "slk-badge",
    `slk-badge--${variant}`,
    size === "sm" ? "slk-badge--sm" : null,
    compact && !mascotOnly ? "slk-badge--compact" : null,
    mascotOnly ? "slk-badge--mark" : null,
    className ?? null,
  ]
    .filter(Boolean)
    .join(" ");

  const css =
    (variant === "dark" ? DARK : variant === "mono" ? MONO : LIGHT) +
    (size === "sm" ? SM : "") +
    (compact && !mascotOnly ? COMPACT : "") +
    (mascotOnly ? MARK : "");

  const Mascot = variant === "mono" ? MonoMascot : ColourMascot;

  return (
    <>
      <a className={classes} href={href} aria-label={mascotOnly ? "Analytics by Statlark" : undefined}>
        <Mascot decorative={!mascotOnly} />
        {!mascotOnly && (
          <span>
            {compact ? null : "Analytics by "}
            {variant === "mono" ? (
              <b>Statlark</b>
            ) : (
              <b>
                Stat<i>lark</i>
              </b>
            )}
          </span>
        )}
      </a>
      <style>{css}</style>
    </>
  );
}

export default StatlarkBadge;

Accessibility

Real, branded link text; the mascot-only variant labels the link with aria-label.
A 2px coral :focus-visible ring on every variant (mono uses currentColor).
No animation and no transitions, so reduced-motion is respected by construction.
AA contrast on the shipped variants — light indigo on white is 15.4:1, the lark #C24417 is 5.1:1; on dark, mist on indigo is 13.5:1 and the lark #EE6B3D is 4.9:1.

New here? Install the tracker first — the badge is the last, optional step.