diff --git a/packages/css/src/index.ts b/packages/css/src/index.ts
index 3bacc0a0f..01baaf454 100644
--- a/packages/css/src/index.ts
+++ b/packages/css/src/index.ts
@@ -112,6 +112,7 @@ export const multiples = {
 export const scales = {
   color: 'colors',
   background: 'colors',
+  accentColor: 'colors',
   backgroundColor: 'colors',
   borderColor: 'colors',
   caretColor: 'colors',
diff --git a/packages/css/test/index.ts b/packages/css/test/index.ts
index 069a59a8f..3eb4b73cc 100644
--- a/packages/css/test/index.ts
+++ b/packages/css/test/index.ts
@@ -577,16 +577,18 @@ test('flexBasis uses theme.sizes', () => {
   })
 })
 
-test('fill and stroke and caretColor use theme.colors', () => {
+test('fill, stroke, caretColor, and accentColor use theme.colors', () => {
   const style = css({
     fill: 'primary',
     stroke: 'secondary',
     caretColor: 'primary',
+    accentColor: 'secondary',
   })(theme)
   expect(style).toEqual({
     fill: 'tomato',
     stroke: 'cyan',
     caretColor: 'tomato',
+    accentColor: 'cyan',
   })
 })
 
diff --git a/packages/docs/src/pages/sx-prop.mdx b/packages/docs/src/pages/sx-prop.mdx
index 13cb4d06b..ea34a05a9 100644
--- a/packages/docs/src/pages/sx-prop.mdx
+++ b/packages/docs/src/pages/sx-prop.mdx
@@ -60,6 +60,7 @@ available.
 | `letterSpacing`           | `letterSpacings` |
 | `color`                   | `colors`         |
 | `bg`, `backgroundColor`   | `colors`         |
+| `accentColor`             | `colors`         |
 | `borderColor`             | `colors`         |
 | `caretColor`              | `colors`         |
 | `outlineColor`            | `colors`         |