overlay-svg-text

What problem does it solve?

Unbranded, anonymous open graph and share imagery fails to reinforce brand identity when shared on social platforms or displayed in unfurl previews, and manually compositing brand-compliant text overlays is time-consuming and prone to inconsistencies with the team's type system and gradient standards.

Core Features & Use Cases

• Brand-compliant type system enforcement: Automatically applies the Lossless standard three-element overlay layout (thin sans eyebrow, gradient Hack Bold H1, Poor Story handwritten note) to maintain consistent brand identity across all share assets.
• Project-specific gradient integration: Pulls editable gradient tokens directly from each project's DESIGN.md instead of relying on non-editable raster-baked brand SVGs, ensuring overlays match each project's unique brand palette.
• Use cases: Compositing text on generated OG images before shipping, adding wordmarks to anonymous unfurl previews, and adding brand-consistent title overlays to fundraise deck hero slides or marketing banners.
• Production-ready compositing pipeline: Uses sharp for reliable JPEG output optimized for open graph compatibility, with built-in archive discipline to preserve prior canonical image versions and support for batch processing across multiple aspect ratios.

Quick Start

Use the overlay-svg-text skill to add a brand-compliant title, eyebrow, and handwritten note overlay to the generated OG image for your project.