The Storyflo brand kit.
Everything a publisher, partner, or agent platform needs to attribute, embed, or co-brand Storyflo. Right-click any asset to save, or copy the snippets below into your own surface.
Logos
The mark is a chunky lemniscate (∞) stroked in ink black over the warm cream canvas. Don't recolor the stroke, don't replace the cream backdrop, and don't fill the inner loops. Prefer the SVG when you can.
Color palette
Ink + warm cream canvas anchor the brand. The pink → violet → blue gradient still appears as an accent on share cards and the audio player, but the mark itself stays in two colors only.
Typography
Body + UI: Geist Sans (the Vercel monospace family in its sans variant). Editorial display + serif italic moments: Instrument Serif. Both are loaded via next/font on every page; partners embedding Storyflo cards can use either as a free Google Font.
Voice + tone
- Direct over polished. Storyflo says what something does, not what it's like.
- Lowercase wordmark. “Storyflo” is capitalized in prose. The mark itself is always lowercase “flo”.
- Audio-first framing. “Listen”, “narrated”, “recap” — never “watch”, “view”, “preview”.
- Publishers, not creators. The supply side is publishers; we partner with outlets, not personal brands.
Embed snippets
Drop-in HTML for partner sites. Both surfaces auto-attribute Storyflo + the original publisher; revenue share splits per the partnership tier.
Paste anywhere on a publisher's site. Plays the Storyflo-rendered audio for a given article slug; auto-credits Storyflo + the publisher.
<iframe src="https://storyflo.com/embed/article/<your-slug>" width="100%" height="180" frameBorder="0" allow="autoplay; clipboard-read; clipboard-write" loading="lazy" ></iframe>
Inline anchor that opens the article on storyflo.com and auto-plays. Includes the gradient infinity-flow mark.
<a
href="https://storyflo.com/story/<your-slug>?autoplay=1"
style="display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:#0a0a0a;color:#fff;border-radius:999px;text-decoration:none;font-weight:600;"
>
<svg width="20" height="20" viewBox="0 0 100 100" aria-hidden>
<rect width="100" height="100" rx="22" fill="#f6f5f2"/>
<path fill="#0a0a0a" fill-rule="evenodd" d="M 24 50 a 14 14 0 1 1 28 0 a 14 14 0 1 1 -28 0 Z M 30 50 a 8 8 0 1 0 16 0 a 8 8 0 1 0 -16 0 Z M 48 50 a 14 14 0 1 1 28 0 a 14 14 0 1 1 -28 0 Z M 54 50 a 8 8 0 1 0 16 0 a 8 8 0 1 0 -16 0 Z"/>
</svg>
Listen on Storyflo
</a>Misuse
- Don't skew, rotate, or recolor the disc.
- Don't replace “flo” with another word inside the disc.
- Don't use Storyflo branding to imply a publisher endorsement we haven't agreed to in writing.
- Don't embed the audio player without crediting the original publisher.
Need something not in the kit? press@storyflo.com — happy to spec partner-specific assets for launch.