theme.json Generator

Palette, type scale, spacing and layout in one file — and the CSS custom properties WordPress generates from them, so you know what to write in your stylesheet.

Colour palette

Basebase

Contrastcontrast

Primaryprimary

Mutedmuted

Typography

body font family

heading font family

base size

scale ratio

small

medium

large

x-large

xx-large

Layout and spacing

contentSize

wideSize

spacing scale steps

root padding

Editor controls

Off means the control is hidden from the editor entirely — the fastest way to stop a client changing every colour on the site.

Style layers

appearanceTools

Turns on border, colour, spacing and typography controls in one line.

Fluid typography

Font sizes interpolate between viewports automatically.

Keep core’s palette

Leaves WordPress’s default colours in the picker alongside yours.

Heading style layer

Sets the heading font, weight and per-level sizes from your scale.

Button style layer

Colours, radius and padding for the button element.

Declare template parts

header and footer parts, as a block theme expects.

settings.custom examples

Two custom tokens, to show how --wp--custom-- names are built.

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "appearanceTools": true,
    "useRootPaddingAwareAlignments": true,
    "layout": {
      "contentSize": "720px",
      "wideSize": "1200px"
    },
    "color": {
      "custom": false,
      "customGradient": false,
      "customDuotone": false,
      "link": true,
      "defaultPalette": false,
      "palette": [
        {
          "slug": "base",
          "name": "Base",
          "color": "#FAF9F7"
        },
        {
          "slug": "contrast",
          "name": "Contrast",
          "color": "#26221C"
        },
        {
          "slug": "primary",
          "name": "Primary",
          "color": "#3858E9"
        },
        {
          "slug": "muted",
          "name": "Muted",
          "color": "#948C7E"
        }
      ]
    },
    "typography": {
      "customFontSize": false,
      "fontStyle": false,
      "fontWeight": false,
      "lineHeight": true,
      "letterSpacing": false,
      "textDecoration": false,
      "textTransform": false,
      "fluid": true,
      "fontSizes": [
        {
          "slug": "small",
          "name": "Small",
          "size": "0.8rem"
        },
        {
          "slug": "medium",
          "name": "Medium",
          "size": "1rem"
        },
        {
          "slug": "large",
          "name": "Large",
          "size": "1.25rem"
        },
        {
          "slug": "x-large",
          "name": "X Large",
          "size": "1.563rem"
        },
        {
          "slug": "xx-large",
          "name": "Xx Large",
          "size": "1.953rem"
        }
      ],
      "fontFamilies": [
        {
          "slug": "body",
          "name": "Body",
          "fontFamily": "\"Instrument Sans\", system-ui, sans-serif"
        }
      ]
    },
    "spacing": {
      "customSpacingSize": false,
      "padding": true,
      "margin": true,
      "blockGap": true,
      "units": [
        "px",
        "rem",
        "em",
        "%",
        "vw"
      ],
      "spacingSizes": [
        {
          "slug": "10",
          "name": "Step 1",
          "size": "0.444rem"
        },
        {
          "slug": "20",
          "name": "Step 2",
          "size": "0.667rem"
        },
        {
          "slug": "30",
          "name": "Step 3",
          "size": "1rem"
        },
        {
          "slug": "40",
          "name": "Step 4",
          "size": "1.5rem"
        },
        {
          "slug": "50",
          "name": "Step 5",
          "size": "2.25rem"
        },
        {
          "slug": "60",
          "name": "Step 6",
          "size": "3.375rem"
        },
        {
          "slug": "70",
          "name": "Step 7",
          "size": "5.063rem"
        }
      ]
    }
  },
  "styles": {
    "color": {
      "background": "var(--wp--preset--color--base)",
      "text": "var(--wp--preset--color--contrast)"
    },
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--body)",
      "fontSize": "var(--wp--preset--font-size--medium)",
      "lineHeight": "1.6"
    },
    "spacing": {
      "padding": {
        "left": "clamp(1rem, 4vw, 2rem)",
        "right": "clamp(1rem, 4vw, 2rem)"
      },
      "blockGap": "var(--wp--preset--spacing--30)"
    },
    "elements": {
      "link": {
        "color": {
          "text": "var(--wp--preset--color--primary)"
        },
        ":hover": {
          "typography": {
            "textDecoration": "none"
          }
        }
      },
      "button": {
        "color": {
          "background": "var(--wp--preset--color--primary)",
          "text": "var(--wp--preset--color--base)"
        },
        "border": {
          "radius": "4px"
        },
        "spacing": {
          "padding": {
            "top": "0.7rem",
            "bottom": "0.7rem",
            "left": "1.4rem",
            "right": "1.4rem"
          }
        },
        "typography": {
          "fontWeight": "600"
        }
      },
      "heading": {
        "typography": {
          "fontWeight": "700",
          "lineHeight": "1.2"
        }
      },
      "h1": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--xx-large)"
        }
      },
      "h2": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--x-large)"
        }
      },
      "h3": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--large)"
        }
      }
    }
  },
  "templateParts": [
    {
      "name": "header",
      "title": "Header",
      "area": "header"
    },
    {
      "name": "footer",
      "title": "Footer",
      "area": "footer"
    }
  ]
}