Skip to Main
schemawp
Back to docs

Patchable ACSS Keys

What is a patchable key?

Automatic.CSS stores your design system as a large configuration object — over 2,500 individual settings covering everything from root color values to generated spacing tokens to component-level CSS variables. SchemaWP’s AI agent can read any of these settings, but it can only write to a curated subset called patchable keys.

A patchable key meets three criteria:

  1. It is a root input, not a derived output — patching it changes the design system at the source
  2. It has a predictable value type that can be validated before writing
  3. It is safe to change without side effects the agent cannot reason about

Why not all 2,500+ keys?

This is a deliberate constraint, not a technical limitation.

ACSS auto-generates the vast majority of its settings from a small number of root inputs. When you patch color-primary with a hex value, ACSS expands it into a full family of 40+ OKLCH shade variants automatically. Allowing the agent to patch those generated values directly would create conflicts — the agent could set a shade that gets immediately overwritten the next time ACSS regenerates, or produce an inconsistent palette where relationships between shades no longer hold.

The same logic applies across the design system:

  • Spacingbase-space, base-space-min, and space-scale are patchable. The 20+ derived tokens (--space-xs, --space-m, etc.) are not.
  • Radiusbase-radius and radius-scale are patchable. The derived scale tokens are not.
  • Typography — the root size and scale keys are patchable. The computed fluid clamp() values that ACSS generates from them are not.
  • Colors — root hex values per family are patchable. All OKLCH component keys are not.

Beyond generated values, some settings are intentionally dashboard-only — things like dark scheme overrides and auto color scheme settings — where the agent changing them mid-session could produce unpredictable results without the user understanding what happened.

The current ~185 patchable keys cover the full set of root inputs a designer would actually change to control a site’s visual identity.

More keys are coming

The patchable key set is not fixed. We are actively expanding it as we confirm two things: that the agent handles each new domain correctly, and that the session token cost stays within a range that keeps interactions fast and predictable.

Every new key added requires the agent to reason about valid values, understand what it’s changing, and surface sensible suggestions. Adding keys prematurely — before the agent’s context is tuned for that domain — risks low-quality patches and confusing output. We’d rather ship a smaller, well-understood set and expand deliberately than open everything up and deal with bad writes.

This documentation is updated with each batch.

Current patchable keys

Colors — 28 keys

Root hex

KeyValue typeNotes
color-primaryhexAuto-expands to full OKLCH shade family
color-secondaryhexAuto-expands
color-accenthexAuto-expands
color-basehexAuto-expands
color-neutralhexAuto-expands, must be achromatic
color-tertiaryhexAuto-expands

Color family toggles

KeyValue typeValid values
option-primary-clrtoggle"on" | "off"
option-secondary-clrtoggle"on" | "off"
option-accent-clrtoggle"on" | "off"
option-base-clrtoggle"on" | "off"
option-neutral-clrtoggle"on" | "off"
option-tertiary-clrtoggle"on" | "off"

Button colors

KeyValue typeNotes
btn-primary-bgcss_valuee.g. var(--primary)
btn-primary-textcss_valuee.g. var(--primary-ultra-light)
btn-secondary-bgcss_value
btn-secondary-textcss_value
btn-accent-bgcss_value
btn-accent-textcss_value
btn-base-bgcss_value
btn-base-textcss_value
btn-neutral-bgcss_value
btn-neutral-textcss_value
btn-tertiary-bgcss_value
btn-tertiary-textcss_value

Semantic text

KeyValue typeNotes
text-lightcss_valueDefault text color for dark sections
text-darkcss_valueDefault text color for light sections
text-light-mutedcss_valueAccepts color-mix() expressions
text-dark-mutedcss_valueAccepts color-mix() expressions

Semantic background assignments — 20 keys

KeyValue typeNotes
bg-lightcss_valueSurface color
bg-light-textcss_value
bg-light-headingcss_value
bg-light-buttoncss_value
bg-light-iconcss_value
bg-darkcss_value
bg-dark-textcss_value
bg-dark-headingcss_value
bg-dark-buttoncss_value
bg-dark-iconcss_value
bg-ultra-lightcss_value
bg-ultra-light-textcss_value
bg-ultra-light-headingcss_value
bg-ultra-light-buttoncss_value
bg-ultra-light-iconcss_value
bg-ultra-darkcss_value
bg-ultra-dark-textcss_value
bg-ultra-dark-headingcss_value
bg-ultra-dark-buttoncss_value
bg-ultra-dark-iconcss_value

Spacing — 7 keys

KeyValue typeNotes
base-spaceintegerBare integer, no unit
base-space-minintegerBare integer, no unit
space-scalenumeric stringe.g. "1.5"
mob-space-scalenumeric string
section-padding-blockintegerBare integer
space-adjust-sectionintegerMultiplier
mob-space-adjust-sectionintegerMultiplier

Layout — 4 keys

KeyValue typeNotes
vp-maxintegerMax content width — bare integer, no unit
vp-minintegerMust be less than vp-max
gutter-maxintegerDesktop horizontal padding
gutter-minintegerMobile horizontal padding

Radius — 3 keys

KeyValue typeNotes
base-radiuspx stringe.g. "8px"
radius-scalenumeric stringe.g. "1.5"
btn-border-radiuspx stringe.g. "999px"

Typography — scale & size — 13 keys

KeyValue typeNotes
heading-font-familycss_valueMust include fallback stack
text-font-familycss_valueMust include fallback stack
heading-weightcss_valuee.g. "700"
heading-scalenumeric stringe.g. "1.333"
mob-heading-scalenumeric string
text-scalenumeric string
mob-text-scalenumeric string
base-text-deskintegerBare integer, no unit
base-text-mobintegerBare integer, no unit
base-heading-deskintegerBare integer, no unit
base-heading-mobintegerBare integer, no unit
base-heading-lhnumeric stringUnitless e.g. "1.2"
base-text-lhnumeric stringUnitless e.g. "1.6"

Typography — line height overrides — 11 keys

Used for explicit per-element overrides only. Default to the global keys (base-heading-lh, base-text-lh) for general line height changes.

KeyValue typeNotes
h1-line-heightcss_valuePer-heading override
h2-line-heightcss_value
h3-line-heightcss_value
h4-line-heightcss_value
h5-line-heightcss_value
h6-line-heightcss_value
text-s-line-heightcss_valuePer-size override
text-l-line-heightcss_value
text-xl-line-heightcss_value
text-xs-line-heightcss_value
text-xxl-line-heightcss_value

Typography — heading size overrides — 12 keys

Override path only — use when the user explicitly requests a specific px size for a specific heading. Do not combine with scale key changes in the same patch. ACSS bypasses the scale system for the targeted heading only.

KeyValue typeNotes
h1-maxintegerDesktop size — bare integer, no unit
h1-minintegerMobile size — bare integer, no unit
h2-maxinteger
h2-mininteger
h3-maxinteger
h3-mininteger
h4-maxinteger
h4-mininteger
h5-maxinteger
h5-mininteger
h6-maxinteger
h6-mininteger

Typography — text size overrides — 12 keys

Override path only. Empty string clears the override and restores the scale-generated value.

KeyValue typeNotes
text-xs-maxintegerDesktop size — bare integer, no unit
text-xs-minintegerMobile size — bare integer, no unit
text-s-maxinteger
text-s-mininteger
text-m-maxinteger
text-m-mininteger
text-l-maxinteger
text-l-mininteger
text-xl-maxinteger
text-xl-mininteger
text-xxl-maxinteger
text-xxl-mininteger

Typography — font slots — 50 keys

Five slots (font-1 through font-5), each with 10 sub-keys. Typically managed via the load_google_font tool rather than patched directly.

Sub-keyValue typeNotes
font-{n}-family-namecss_valuen = 1–5
font-{n}-srccss_valueLocal woff2 URL only
font-{n}-formatcss_value
font-{n}-format-fallbackcss_value
font-{n}-typeenum"static" | "variable"
font-{n}-weightcss_value
font-{n}-stylecss_value
font-{n}-stretchcss_value
font-{n}-variation-settingscss_valueVariable fonts only
font-{n}-displaycss_value

Components — 18 keys

Cards

KeyValue typeNotes
option-cardstoggle"on" | "off" — enable before patching card-* keys
card-backgroundcss_value
card-border-colorcss_value
card-radiuscss_valueInherits global radius by default
card-paddingcss_value
card-gapcss_value
card-shadowcss_value

Icons

KeyValue typeNotes
option-iconstoggle"on" | "off" — enable before patching icon-* keys
icon-backgroundcss_value
icon-colorcss_value
icon-border-colorcss_value
icon-paddingcss_valueCreates box effect
icon-radiuscss_value
icon-size-scss_valuee.g. "16px"
icon-size-mcss_valuee.g. "32px"
icon-size-lcss_valuee.g. "64px"
icon-default-styleenum"boxed" | "plain"
icon-default-schemeenum"inherit" | "light" | "dark"

What is never patchable

Key / PatternReason
color-*-alt (6 keys)Dark scheme overrides — configure via WP Admin → Palette
auto-color-schemeRead-only via MCP
website-color-schemeRead-only via MCP
All *-l-oklch, *-c-oklch, *-h-oklch keysAuto-generated from root hex — blocked by validator
All derived space-*, radius-* tokensAuto-generated from root keys
Computed fluid size tokens (--h1, --h2, --text-l, etc.)Read-only CSS output variables. Patch the root scale keys or use the size override keys (h1-max, h2-max, text-xl-max, etc.) to control their values