infographic design guidelines

Baseworks Infographic Design & Export Guidelines

This document outlines the standard procedures, brand aesthetics, and technical requirements for creating custom SVG/HTML infographics for Baseworks communications (newsletters, social media, and web features).

1. Brand Visual Aesthetics

Every infographic must adhere to the core Baseworks digital design language:

Typography: We use the Jost font family (wght@300;400;500;600) loaded from Google Fonts.
Backgrounds: Deep dark scheme. Default canvas and primary container background is #1A202C.
Accent Color: Baseworks Teal #58c4cf. This should be used for highlights, glowing nodes, active lines, and primary callouts.
Text Colors:
- Primary Titles/Headings: White #ffffff.
- Secondary/Description Text: Light Gray-Blue #a0aec0.
- Labels/Micro-copy: Teal #58c4cf (uppercase, wide letter-spacing).
Subtle Elements: Use low-opacity whites (rgba(255,255,255,0.02) or 0.05) or dark grays (#4a5568) for inactive states, grids, and background structural lines. Use rgba(88, 196, 207, 0.4) for subtle container borders.

2. Structural Requirements (HTML/SVG)

To guarantee portability and high-quality rendering without external asset dependencies:

Use Inline SVG: All shapes, flows, and graphics must be mathematically drawn using inline SVG elements rather than embedding binary images like JPEGs or standard external links inside the HTML.
Self-Contained File: The HTML file must house all its CSS styles within a <style> block in the <head> or directly inside the <svg>. No external stylesheets except for the Google Fonts API.
Coordinate System: Establish a rigid viewBox on the <svg> (e.g., 0 0 800 400) and draw all elements to that scale.
Strict Container Sizing: The containing wrapper <div> must have explicit pixel width: Xpx and height: Xpx parameters rather than relying on dynamic properties like flexbox or auto-scaling, which fail during headless screenshot captures. Never use position: absolute; on wrappers containing the main SVGs without defining a locked height on the <body>, as this collapses the document height to 0.

3. High-Resolution Headless Chrome Export Guide

The safest and highest-fidelity method of converting an HTML infographic into a transparent PNG for emails or other fixed media is using headless Google Chrome.

Important Chrome Headless Quirks:

Window Chrome Subtraction Bug: Chrome interprets the --window-size argument as the External OS Window Size rather than the actual internal viewport. This means if you render an 800x400 image and set --window-size=800,400, the actual viewport will be roughly 800x300, aggressively cropping the bottom of your image.
The Fix: Always pad your height heavily in the command line (e.g., requesting --window-size=800,600 for an 800x400 image).

Standard CLI Export Command:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --headless \
  --window-size=800,600 \   # IMPORTANT: Add +200px to height
  --force-device-scale-factor=3 \  # Forces Retina (3x) resolution for clean vectors
  --default-background-color="00000000" \  # Grants absolute transparency
  --screenshot="/path/to/downloads/export-transparent.png" \
  "file:///path/to/infographic.html"

4. Drop Shadows & Compositing

If an image requires a large, diffused drop shadow, it is heavily recommended to apply it manually via the final layout editor (like Elementor or Canva) rather than hard-coding it in CSS before exporting. If a CSS box-shadow is strictly necessary in the HTML, ensure the HTML wrapper <body> has explicit padding on all sides (equivalent to at least the shadow radius), and expand both the internal coordinate system and the --window-size height enough to clear it.