// brand
Logos, wordmarks, and the colors that hold them together. Copy any asset as SVG, or grab the file. Please keep the marks intact — the shapes and colors below are the whole kit.
// the logo
The PEST wordmark — the primary logo, exactly as it appears on the site. Use it in headers, docs, footers, and anywhere the brand is named.
// the mark
The Pest glyph on its own. Reach for it as an app icon, avatar, or favicon — anywhere the wordmark would be too wide.
// breathing room
Keep clear space around the mark equal to the height of the glyph's stem. Don't crowd it, and never let other logos or type break into the margin.
// palette
Rose does all the pointing. The green→cyan→pink gradient is reserved for the mark itself. Everything else is zinc.
{ if (copied === '#f43f5e') copied = null }, 2000)" class="active:scale-96 group flex flex-col overflow-hidden rounded-2xl border border-zinc-700 bg-zinc-800 text-left transition-[border-color,scale] hover:border-zinc-200/20" type="button">
accent — rose-500
{ if (copied === '#64e6ae') copied = null }, 2000)" class="active:scale-96 group flex flex-col overflow-hidden rounded-2xl border border-zinc-700 bg-zinc-800 text-left transition-[border-color,scale] hover:border-zinc-200/20" type="button">
gradient start
{ if (copied === '#4ed4ff') copied = null }, 2000)" class="active:scale-96 group flex flex-col overflow-hidden rounded-2xl border border-zinc-700 bg-zinc-800 text-left transition-[border-color,scale] hover:border-zinc-200/20" type="button">
gradient mid
{ if (copied === '#f471b5') copied = null }, 2000)" class="active:scale-96 group flex flex-col overflow-hidden rounded-2xl border border-zinc-700 bg-zinc-800 text-left transition-[border-color,scale] hover:border-zinc-200/20" type="button">
gradient end
{ if (copied === '#18181b') copied = null }, 2000)" class="active:scale-96 group flex flex-col overflow-hidden rounded-2xl border border-zinc-700 bg-zinc-800 text-left transition-[border-color,scale] hover:border-zinc-200/20" type="button">
canvas
{ if (copied === '#e4e4e7') copied = null }, 2000)" class="active:scale-96 group flex flex-col overflow-hidden rounded-2xl border border-zinc-700 bg-zinc-800 text-left transition-[border-color,scale] hover:border-zinc-200/20" type="button">
text
// guidelines
DO
✓ Use the SVGs at their native aspect ratio.
✓ Pick the white mark on dark, the black mark on light.
✓ Give the mark room — respect the clearspace.
✓ Reach for the color mark when you have the contrast for it.
DON'T
✕ Stretch, rotate, or recolor the marks.
✕ Add shadows, outlines, or gradients of your own.
✕ Place the color mark on a low-contrast background.
✕ Rebuild the wordmark in another typeface.