Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

Multi-purpose CSS Toolkit that uses Emotion. Contains basic CSS setup, mixins, utils and debug mode (separate package).

What it does?

  • Converts TS config into CSS variables
  • Functions to access those variables
  • Functions that extend CSS functionality
  • Integrated normalize.css import
  • Provides basic global styles
  • Provides basic utils
  • Extension points for utils & global styles
  • Debug sidebar with all CSS vars and utils (separate package)


Note: this is a private package so the installation requires you to use prototypdigital account. You can use npm logout and npm login to switch accounts. Make sure to switch back to your account after npm install has been finished.

yarn add --dev @prototyp/gatsby-plugin-gumball @prototyp/gatsby-plugin-gumball-debug


  • normalize.css
  • Absolute imports - configured in Gatsby


Add the following snippet to gatsby-config.js

const activeEnv =
  process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || "development"

const isDev = activeEnv === "development"

module.exports = {
  plugins: [
      ? [
            resolve: "@prototyp/gatsby-plugin-gumball-debug",
            options: {
              debug: true,
      : [])

Add the following line to tsconfig.json

  "compilerOptions": {
    "typeRoots": ["node_modules/@prototyp/"]

Required files in src/style:

  • variables.ts - use variables.ts.example as a template from the package.
  • global.styles.ts - use the following starting starter template:
import { css } from "@emotion/react"

export const global = css``;
  • utils.styles.ts - use the following starter template:
export {};
© 2023 Gatsby, Inc.