Skip to content
Gusto’s condensed “G” logoWorkbench

Illustrations

We use an expressive, hand-drawn illustration style that emphasizes humanity. In the platform, illustrations help us celebrate little moments and emphasize the benefits of our platform.
Figma logo
  • Illustrations are exported as React components using the Img component
    • all props and advice for Img are also applicable to illustrations
    • loading="lazy" is used by default the same way Img does.
  • Small illustrations are sized 56×56
  • We generate the following widths for medium and large illustrations:
    • 240, 320, 480, 720, 960, 1200, 1440, 1680, 1920, 2560
  • Medium and large illustrations render to fit their container by default, allowing them to grow proportionally to the width of their parent container.
  • Our illustration library requires @gusto/workbench-webpack-plugin to configure the directory where the assets will be stored

This example uses native lazy loading by default (where supported); we generally suggest following this pattern for non-essential illustrations to improve page load performance.

This example uses the default fit="container" to allow the image to expand to the width of its container.

The illustration will occupy the full width of the Box (highlighted with a border), which is set to 50% of the width of its parent.

  • Illustrations are delivered as React components using the picture element
    • This allows us to provide the browser with a range of image paths that can be used to load the most efficient file for the current environment
  • We generate AVIF and WebP image formats from an SVG source
    • We do not generate PNG files because WebP is widely supported and offers superior efficiency
    • AVIF generally performs best when supported
  • We generate image sizes up to 2560px in width, but we will serve the source SVG file once AVIF and WebP file size becomes larger than the original
    • This ensures that we are always serving the smallest-possible file
  • We use role="presentation" to instruct screen readers to ignore illustrations by default
    • this saves time for our users since illustrations rarely aid in the comprehension of page content for non-sighted users
    • This alleviates the need for alt text as screen readers will skip over them