WordPress makes a strong promise with theme.json: themes should be able to define a coherent visual system without scattering styling decisions across unrelated files.

That works surprisingly well until navigation gets involved.

The question I wanted to answer

Could I create sensible link spacing, dropdown surfaces, typography and interaction states without reaching for custom CSS?

The useful boundary is not what WordPress technically allows. It is what can be expressed predictably enough to become part of a repeatable system.

What theme.json handles well

Typography, colors and several block-level decisions fit naturally into the global style system:

{
  "styles": {
    "blocks": {
      "core/navigation": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--small)",
          "fontWeight": "800"
        }
      }
    }
  }
}

Key takeaways

  1. Core spacing scales work reliably across standard containers.
  2. Dropdown behavior requires explicit wrapper CSS if responsive overrides are non-standard.
  3. Keep tokens atomic to avoid cascade conflicts.