Get a plan

Home/Brand Assets

[ Brand assets ]

The mark,
and the code behind it.

What the PRISM mark means, how to use it, and the exact files and code to drop the logo or the animated graphic into a different site.

[ The concept ]

White light in.
Spectrum out.

A prism doesn't create color — it separates light that was already there into cyan, magenta, yellow and black, the four inks a printer mixes to make everything else. That's the whole idea behind the mark: one input (a customer), split across every channel that can reach them, recombining as one output (revenue). The four-dot logo is a tiny printer's registration mark — the crosshair a press uses to line up those four inks — repurposed as a monogram.

[ Animated graphic ]

The beam.

A single white beam hits a triangle and splits into cyan, magenta, yellow and white. It's plain SVG with a few lines of CSS — no JavaScript, no build step — so it animates wherever you drop it: inline, as a background image, or even as a plain <img>.

Download the SVG ↓ Open in a new tab ↗

Option A — drop in the file, no code

The exported file is fully self-contained — the animation is defined inside the SVG's own <style> tag, so it keeps animating even loaded as a plain image. 

<img
  src="prism-graphic-animated.svg"
  alt="Animated prism graphic"
  style="width:100%;max-width:480px;display:block;"
>

Option B — inline SVG, so you can recolor it

Paste the markup directly into your HTML instead of linking the file, and the four ink colors become CSS variables your own stylesheet can override — useful if your brand uses a different four-color system than CMYK. 

<!-- 1. Paste this SVG anywhere in your page -->
<svg viewBox="0 0 640 640" class="prism-graphic" aria-hidden="true">
  <line class="beam beam-in" x1="0" y1="320" x2="220" y2="320"/>
  <polygon class="prism-shape" points="220,258 220,382 300,320"/>
  <line class="beam beam-c" x1="300" y1="320" x2="620" y2="120"/>
  <line class="beam beam-m" x1="300" y1="320" x2="620" y2="250"/>
  <line class="beam beam-y" x1="300" y1="320" x2="620" y2="410"/>
  <line class="beam beam-k" x1="300" y1="320" x2="620" y2="540"/>
</svg>

<!-- 2. Add this once to your stylesheet -->
<style>
.prism-graphic{
  --prism-c: #00AEEF;   /* swap these four for your own brand colors */
  --prism-m: #EC008C;
  --prism-y: #FFE600;
  --prism-k: #f5f5f5;
}
.prism-graphic .beam{ stroke-width:1.8; fill:none; opacity:0.9; stroke-dasharray:6 10; animation:prism-flow 3.2s linear infinite; }
.prism-graphic .beam-in{ stroke:var(--prism-k); opacity:0.55; animation-duration:1.6s; }
.prism-graphic .prism-shape{ fill:rgba(245,245,245,0.05); stroke:var(--prism-k); stroke-width:1.4; opacity:0.65; }
.prism-graphic .beam-c{ stroke:var(--prism-c); }
.prism-graphic .beam-m{ stroke:var(--prism-m); }
.prism-graphic .beam-y{ stroke:var(--prism-y); }
.prism-graphic .beam-k{ stroke:var(--prism-k); opacity:0.6; }
@keyframes prism-flow{ to{ stroke-dashoffset:-160; } }
@media (prefers-reduced-motion: reduce){
  .prism-graphic .beam{ animation:none; stroke-dasharray:none; }
}
</style>

Do

  • Give it room — the beams need horizontal space to fan out; don't force it into a tight square.
  • Place it on a dark background. It was designed for one.
  • Keep all four colors together as a set.

Don't

  • Drop it on a light or white background as-is — the white beam and "K" line disappear.
  • Stretch it to a non-16:9-ish box; the triangle will look off-center.
  • Recolor just one or two of the four beams — the set is the point.

[ All files ]

Everything in one place.

prism-logo-mark.svg Icon, dark bg prism-logo-mark-on-light.svg Icon, light bg prism-logo-full.svg Full lockup, dark bg prism-logo-full-on-light.svg Full lockup, light bg prism-graphic-animated.svg Self-animating beam graphic

Building this into a client site and want a hand?

Get in touch ↗