Branding as code, not Figma exports
SmarkForm, an open-source markup-driven form toolkit, is shipping version 0.13.0 with a new logo—except it's not designed in the traditional sense. The logo is generated via Pug templates, outputting real SVG files with embedded, subsetted fonts through a CLI pipeline.
The approach treats branding as infrastructure: parametric, version-controlled, and reproducible. Variants for light/dark modes, compact layouts, and monochrome versions are defined in code, not exported manually from design tools.
The technical stack
Pug, a high-performance HTML template engine, generates SVG directly—not HTML that contains SVG. The root node is <svg>, using doctype svg to follow SVG specs. A Pug mixin handles parametrization: mode (light/dark), compact boolean, monochrome flag, and size all compute dimensions and variant logic.
Fonts are embedded via base64-encoded WOFF2 files, subsetted to only the glyphs used ("<SmarkForm}" in this case). This keeps SVG files small and eliminates external font dependencies. Tools like pyftsubset from fonttools handle the subsetting; the developer used Work Sans from Google Fonts, chosen for its SIL Open Font License.
One gotcha: base64 allows whitespace, but CSS does not. Stripping newlines from the base64 string is critical—otherwise fonts silently fail to load.
Why this matters for enterprise
This isn't common practice, but it solves real problems for SaaS products and enterprise apps needing consistent branding across themes, locales, or white-label deployments. Static assets require manual updates; parametric systems scale.
The approach also fits DevOps pipelines—logos become build artifacts, not Dropbox links. For APAC enterprises pushing design systems into CI/CD, this is worth noting: branding can be code, not just creative.
The trade-off: designers lose visual tools. Engineers gain reproducibility. Whether that's the right trade depends on how often your logo changes—and how many variants you need to maintain.
SmarkForm's approach is niche, but the underlying pattern—treating visual assets as generated infrastructure—will resonate with teams already automating everything else.