diff --git a/src/pages/components/number-input/style.mdx b/src/pages/components/number-input/style.mdx
index 912a88c8e8e..60dca283b01 100755
--- a/src/pages/components/number-input/style.mdx
+++ b/src/pages/components/number-input/style.mdx
@@ -8,18 +8,16 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 ## Color
 
-Inputs come in two different colors. The default input color is `$field-01` and
-is used on `$ui-background` and `$ui-02` page backgrounds. The `--light` version
-input color is `$field-02` and is used on `$ui-01` page backgrounds.
-
-| Class                              | Property         | Color token |
-| ---------------------------------- | ---------------- | ----------- |
-| `.bx--label`                       | text color       | `$text-02`  |
-| `.bx--number input[type='number']` | text color       | `$text-01`  |
-| `.bx--number`                      | background-color | `$field-01` |
-| `.bx--number--light`               | background-color | `$field-02` |
-| `.bx--number`                      | border-bottom    | `$ui-04`    |
-| `.bx--number__controls`            | svg color        | `$icon-01`  |
+Inputs come in two different colors. The default input color is `$field` and
+is used on `$background` and `$overlay` page backgrounds. 
+
+| Class                              | Property         | Color token       |
+| ---------------------------------- | ---------------- | ----------------- |
+| `.bx--label`                       | text color       | `$text-secondary` |
+| `.bx--number input[type='number']` | text color       | `$text-primary`   |
+| `.bx--number`                      | background-color | `$field`          |
+| `.bx--number`                      | border-bottom    | `$border-strong`  |
+| `.bx--number__controls`            | svg color        | `$icon-primary`   |
 
 <div className="image--fixed">
 
@@ -31,16 +29,16 @@ input color is `$field-02` and is used on `$ui-01` page backgrounds.
 
 ### Interactive states
 
-| Class                                       | Property         | Color token    |
-| ------------------------------------------- | ---------------- | -------------- |
-| `.bx--number:focus`                         | border           | `$focus`       |
-| `.bx--number__controls:focus`               | border           | `$focus`       |
-| `[data-invalid]`                            | border           | `$support-01`  |
-| `[data-invalid]:focus`                      | color            | `$support-01`  |
-| `.bx--form-requirement`                     | text color       | `$support-01`  |
-| `.bx--label:disabled`                       | text color       | `$disabled-02` |
-| `.bx--number:disabled`                      | background-color | `$disabled-01` |
-| `.bx--number input[type='number']:disabled` | text color       | `$disabled-03` |
+| Class                                       | Property         | Color token       |
+| ------------------------------------------- | ---------------- | ----------------- |
+| `.bx--number:focus`                         | border           | `$focus`          |
+| `.bx--number__controls:focus`               | border           | `$focus`          |
+| `[data-invalid]`                            | border           | `$support-error`  |
+| `[data-invalid]:focus`                      | color            | `$support-error`  |
+| `.bx--form-requirement`                     | text color       | `$support-error`  |
+| `.bx--label:disabled`                       | text color       | `$text-disabled`  |
+| `.bx--number:disabled`                      | background-color | `$field-disabled` |
+| `.bx--number input[type='number']:disabled` | text color       | `$text-disabled`  |
 
 **Active:** Number input should have a default number to start. The input should
 never be empty.