diff --git a/frontend/src/app/main/ui/workspace/tokens/management/create/border_radius.cljs b/frontend/src/app/main/ui/workspace/tokens/management/create/border_radius.cljs
index 2f7351062e..0b7bb2f4a1 100644
--- a/frontend/src/app/main/ui/workspace/tokens/management/create/border_radius.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/create/border_radius.cljs
@@ -23,7 +23,7 @@
    [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
    [app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
    [app.main.ui.forms :as fc]
-   [app.main.ui.workspace.tokens.management.create.form-input-token :refer [form-input-token*]]
+   [app.main.ui.workspace.tokens.management.create.input-token :refer [input-token*]]
    [app.util.dom :as dom]
    [app.util.forms :as fm]
    [app.util.i18n :refer [tr]]
@@ -187,7 +187,7 @@
            {:level :warning :appearance :ghost} (tr "workspace.tokens.warning-name-change")]])]
 
       [:div {:class (stl/css :input-row)}
-       [:> form-input-token*
+       [:> input-token*
         {:placeholder (tr "workspace.tokens.token-value-enter")
          :label (tr "workspace.tokens.token-value")
          :name :value
diff --git a/frontend/src/app/main/ui/workspace/tokens/management/create/color.cljs b/frontend/src/app/main/ui/workspace/tokens/management/create/color.cljs
index 6b4bcbe8d6..a43bff2751 100644
--- a/frontend/src/app/main/ui/workspace/tokens/management/create/color.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/create/color.cljs
@@ -23,7 +23,7 @@
    [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
    [app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
    [app.main.ui.forms :as fc]
-   [app.main.ui.workspace.tokens.management.create.form-color-input-token :refer [form-color-input-token*]]
+   [app.main.ui.workspace.tokens.management.create.color-input-token :refer [color-input-token*]]
    [app.util.dom :as dom]
    [app.util.forms :as fm]
    [app.util.i18n :refer [tr]]
@@ -188,7 +188,7 @@
            {:level :warning :appearance :ghost} (tr "workspace.tokens.warning-name-change")]])]
 
       [:div {:class (stl/css :input-row)}
-       [:> form-color-input-token*
+       [:> color-input-token*
         {:placeholder (tr "workspace.tokens.token-value-enter")
          :label (tr "workspace.tokens.token-value")
          :name :value
diff --git a/frontend/src/app/main/ui/workspace/tokens/management/create/form_color_input_token.cljs b/frontend/src/app/main/ui/workspace/tokens/management/create/color_input_token.cljs
similarity index 93%
rename from frontend/src/app/main/ui/workspace/tokens/management/create/form_color_input_token.cljs
rename to frontend/src/app/main/ui/workspace/tokens/management/create/color_input_token.cljs
index d232a27de9..548aecf11c 100644
--- a/frontend/src/app/main/ui/workspace/tokens/management/create/form_color_input_token.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/create/color_input_token.cljs
@@ -4,7 +4,7 @@
 ;;
 ;; Copyright (c) KALEIDOS INC
 
-(ns app.main.ui.workspace.tokens.management.create.form-color-input-token
+(ns app.main.ui.workspace.tokens.management.create.color-input-token
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.colors :as color]
@@ -102,7 +102,7 @@
        :on-finish-drag on-finish-drag
        :on-change on-change'}]]))
 
-(mf/defc form-color-input-token*
+(mf/defc color-input-token*
   [{:keys [name tokens token] :rest props}]
 
   (let [form       (mf/use-ctx fc/context)
@@ -259,33 +259,33 @@
        [:> ramp* {:color value :on-change on-change-value}])]))
 
 (defn- on-composite-indexed-input-token-change
-  ([form field index value]
-   (on-composite-indexed-input-token-change form field index value false))
-  ([form field index value trim?]
+  ([form field index value composite-type]
+   (on-composite-indexed-input-token-change form field index value composite-type false))
+  ([form field index value composite-type trim?]
    (letfn [(clean-errors [errors]
              (-> errors
                  (dissoc field)
                  (not-empty)))]
      (swap! form (fn [state]
                    (-> state
-                       (assoc-in [:data :value :shadows index field] (if trim? (str/trim value) value))
+                       (assoc-in [:data :value composite-type index field] (if trim? (str/trim value) value))
                        (update :errors clean-errors)
                        (update :extra-errors clean-errors)))))))
 
-(mf/defc color-input-indexed*
-  [{:keys [name tokens token index] :rest props}]
+(mf/defc color-input-token-indexed*
+  [{:keys [name tokens token index composite-type] :rest props}]
 
   (let [form       (mf/use-ctx fc/context)
         input-name name
 
         error
-        (get-in @form [:errors :value :shadows index input-name])
+        (get-in @form [:errors :value composite-type index input-name])
 
         value
-        (get-in @form [:data :value :shadows index input-name] "")
+        (get-in @form [:data :value composite-type index input-name] "")
 
         color-resolved
-        (get-in @form [:data :value :shadows index :color-result] "")
+        (get-in @form [:data :value composite-type index :color-result] "")
 
         valid-color (or (tinycolor/valid-color value)
                         (tinycolor/valid-color color-resolved))
@@ -309,7 +309,7 @@
 
         resolve-stream
         (mf/with-memo [token]
-          (if-let [value (get-in token [:value :shadows index input-name])]
+          (if-let [value (get-in token [:value composite-type index input-name])]
             (rx/behavior-subject value)
             (rx/subject)))
 
@@ -363,7 +363,7 @@
                                  (tinycolor/set-alpha (or alpha 1))
                                  (tinycolor/->string format))]
              (when (not= value color-value)
-               (on-composite-indexed-input-token-change form input-name index color-value true)
+               (on-composite-indexed-input-token-change form input-name index color-value composite-type true)
                (rx/push! resolve-stream color-value)))))
 
         on-change
@@ -374,7 +374,7 @@
                  value (if (tinycolor/hex-without-hash-prefix? raw-value)
                          (dm/str "#" raw-value)
                          raw-value)]
-             (on-composite-indexed-input-token-change form input-name index value true)
+             (on-composite-indexed-input-token-change form input-name index value composite-type true)
              (rx/push! resolve-stream value))))
 
         props
@@ -390,7 +390,7 @@
                                   :hint-message (:message error)})
           props)]
 
-    (mf/with-effect [resolve-stream tokens token input-name index]
+    (mf/with-effect [resolve-stream tokens token input-name index composite-type]
       (let [subs (->> resolve-stream
                       (rx/debounce 300)
                       (rx/mapcat (partial resolve-value tokens token))
@@ -404,24 +404,24 @@
                          (cond
                            (and error (str/empty? (:error/value error)))
                            (do
-                             (swap! form update-in [:errors :value :shadows index] dissoc input-name)
-                             (swap! form update-in [:data :value :shadows index] dissoc input-name)
-                             (swap! form assoc-in [:data :value :shadows index :color-result] "")
+                             (swap! form update-in [:errors :value composite-type index] dissoc input-name)
+                             (swap! form update-in [:data :value composite-type index] dissoc input-name)
+                             (swap! form assoc-in [:data :value composite-type index :color-result] "")
                              (swap! form update :extra-errors dissoc :value)
                              (reset! hint* {}))
 
                            (some? error)
                            (let [error' (:message error)]
-                             (swap! form assoc-in  [:extra-errors :value :shadows index input-name] {:message error'})
-                             (swap! form assoc-in [:data :value :shadows index :color-result] "")
+                             (swap! form assoc-in  [:extra-errors :value composite-type index input-name] {:message error'})
+                             (swap! form assoc-in [:data :value composite-type index :color-result] "")
                              (reset! hint* {:message error' :type "error"}))
 
                            :else
                            (let [message (tr "workspace.tokens.resolved-value" (dwtf/format-token-value value))
-                                 input-value (get-in @form [:data :value :shadows index input-name] "")]
+                                 input-value (get-in @form [:data :value composite-type index input-name] "")]
                              (swap! form update :errors dissoc :value)
                              (swap! form update :extra-errors dissoc :value)
-                             (swap! form assoc-in [:data :value :shadows index :color-result] (dwtf/format-token-value value))
+                             (swap! form assoc-in [:data :value composite-type index :color-result] (dwtf/format-token-value value))
                              (if (= input-value (str value))
                                (reset! hint* {})
                                (reset! hint* {:message message :type "hint"})))))))]
diff --git a/frontend/src/app/main/ui/workspace/tokens/management/create/dimensions.cljs b/frontend/src/app/main/ui/workspace/tokens/management/create/dimensions.cljs
index ff5f2b23b3..36bca4822f 100644
--- a/frontend/src/app/main/ui/workspace/tokens/management/create/dimensions.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/create/dimensions.cljs
@@ -23,7 +23,7 @@
    [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
    [app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
    [app.main.ui.forms :as fc]
-   [app.main.ui.workspace.tokens.management.create.form-input-token :refer [form-input-token*]]
+   [app.main.ui.workspace.tokens.management.create.input-token :refer [input-token*]]
    [app.util.dom :as dom]
    [app.util.forms :as fm]
    [app.util.i18n :refer [tr]]
@@ -186,7 +186,7 @@
            {:level :warning :appearance :ghost} (tr "workspace.tokens.warning-name-change")]])]
 
       [:div {:class (stl/css :input-row)}
-       [:> form-input-token*
+       [:> input-token*
         {:placeholder (tr "workspace.tokens.token-value-enter")
          :label (tr "workspace.tokens.token-value")
          :name :value
diff --git a/frontend/src/app/main/ui/workspace/tokens/management/create/form_input_token.cljs b/frontend/src/app/main/ui/workspace/tokens/management/create/input_token.cljs
similarity index 92%
rename from frontend/src/app/main/ui/workspace/tokens/management/create/form_input_token.cljs
rename to frontend/src/app/main/ui/workspace/tokens/management/create/input_token.cljs
index d2e9314881..13cf29389e 100644
--- a/frontend/src/app/main/ui/workspace/tokens/management/create/form_input_token.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/create/input_token.cljs
@@ -4,7 +4,7 @@
 ;;
 ;; Copyright (c) KALEIDOS INC
 
-(ns app.main.ui.workspace.tokens.management.create.form-input-token
+(ns app.main.ui.workspace.tokens.management.create.input-token
   (:require
    [app.common.data :as d]
    [app.common.types.tokens-lib :as ctob]
@@ -39,7 +39,7 @@
                 (rx/of {:value resolved-value})
                 (rx/of {:error (first errors)}))))))))
 
-(mf/defc form-input-token*
+(mf/defc input-token*
   [{:keys [name tokens token] :rest props}]
 
   (let [form       (mf/use-ctx fc/context)
@@ -126,7 +126,7 @@
                        (update :errors clean-errors)
                        (update :extra-errors clean-errors)))))))
 
-(mf/defc form-input-token-composite*
+(mf/defc input-token-composite*
   [{:keys [name tokens token] :rest props}]
 
   (let [form       (mf/use-ctx fc/context)
@@ -214,34 +214,34 @@
     [:> input* props]))
 
 (defn- on-composite-indexed-input-token-change
-  ([form field index value]
-   (on-composite-indexed-input-token-change form field index value false))
-  ([form field index value trim?]
+  ([form field index value composite-type]
+   (on-composite-indexed-input-token-change form field index value composite-type false))
+  ([form field index value composite-type trim?]
    (letfn [(clean-errors [errors]
              (-> errors
                  (dissoc field)
                  (not-empty)))]
      (swap! form (fn [state]
                    (-> state
-                       (assoc-in [:data :value :shadows index field] (if trim? (str/trim value) value))
+                       (assoc-in [:data :value composite-type index field] (if trim? (str/trim value) value))
                        (update :errors clean-errors)
                        (update :extra-errors clean-errors)))))))
 
-(mf/defc form-input-token-indexed*
-  [{:keys [name tokens token index] :rest props}]
+(mf/defc input-token-indexed*
+  [{:keys [name tokens token index composite-type] :rest props}]
 
   (let [form       (mf/use-ctx fc/context)
         input-name name
 
         error
-        (get-in @form [:errors :value :shadows index input-name])
+        (get-in @form [:errors :value composite-type index input-name])
 
         value-from-form
-        (get-in @form [:data :value :shadows index input-name] "")
+        (get-in @form [:data :value composite-type index input-name] "")
 
         resolve-stream
         (mf/with-memo [token index input-name]
-          (if-let [value (get-in token [:value :shadows index input-name])]
+          (if-let [value (get-in token [:value composite-type index input-name])]
             (rx/behavior-subject value)
             (rx/subject)))
 
@@ -256,7 +256,7 @@
          (mf/deps resolve-stream input-name index)
          (fn [event]
            (let [value (-> event dom/get-target dom/get-input-value)]
-             (on-composite-indexed-input-token-change form input-name index value true)
+             (on-composite-indexed-input-token-change form input-name index value composite-type true)
              (rx/push! resolve-stream value))))
 
         props
@@ -276,7 +276,7 @@
           (mf/spread-props props {:hint-formated true})
           props)]
 
-    (mf/with-effect [resolve-stream tokens token input-name index]
+    (mf/with-effect [resolve-stream tokens token input-name index composite-type]
       (let [subs (->> resolve-stream
                       (rx/debounce 300)
                       (rx/mapcat (partial resolve-value tokens token))
@@ -290,19 +290,19 @@
                          (cond
                            (and error (str/empty? (:error/value error)))
                            (do
-                             (swap! form update-in [:errors :value :shadows index] dissoc input-name)
-                             (swap! form update-in [:data :value :shadows index] dissoc input-name)
+                             (swap! form update-in [:errors :value composite-type index] dissoc input-name)
+                             (swap! form update-in [:data :value composite-type index] dissoc input-name)
                              (swap! form update :extra-errors dissoc :value)
                              (reset! hint* {}))
 
                            (some? error)
                            (let [error' (:message error)]
-                             (swap! form assoc-in  [:extra-errors :value :shadows index input-name] {:message error'})
+                             (swap! form assoc-in  [:extra-errors :value composite-type index input-name] {:message error'})
                              (reset! hint* {:message error' :type "error"}))
 
                            :else
                            (let [message (tr "workspace.tokens.resolved-value" (dwtf/format-token-value value))
-                                 input-value (get-in @form [:data :value :shadows index input-name] "")]
+                                 input-value (get-in @form [:data :value composite-type index input-name] "")]
                              (swap! form update :errors dissoc :value)
                              (swap! form update :extra-errors dissoc :value)
                              (if (= input-value (str value))
diff --git a/frontend/src/app/main/ui/workspace/tokens/management/create/form_select_token.cljs b/frontend/src/app/main/ui/workspace/tokens/management/create/select_token.cljs
similarity index 71%
rename from frontend/src/app/main/ui/workspace/tokens/management/create/form_select_token.cljs
rename to frontend/src/app/main/ui/workspace/tokens/management/create/select_token.cljs
index 23565accc0..027482ee87 100644
--- a/frontend/src/app/main/ui/workspace/tokens/management/create/form_select_token.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/create/select_token.cljs
@@ -4,26 +4,26 @@
 ;;
 ;; Copyright (c) KALEIDOS INC
 
-(ns app.main.ui.workspace.tokens.management.create.form-select-token
+(ns app.main.ui.workspace.tokens.management.create.select-token
   (:require
    [app.main.ui.ds.controls.select :refer [select*]]
    [app.main.ui.forms :as fc]
    [rumext.v2 :as mf]))
 
 (mf/defc select-composite*
-  [{:keys [name index] :rest props}]
+  [{:keys [name index composite-type] :rest props}]
   (let [form       (mf/use-ctx fc/context)
         input-name name
 
         value
-        (get-in @form [:data :value :shadows index input-name] false)
+        (get-in @form [:data :value composite-type index input-name] false)
 
         on-change
         (mf/use-fn
          (mf/deps input-name)
          (fn [type]
            (let [is-inner? (= type "inner")]
-             (swap! form assoc-in [:data :value :shadows index input-name] is-inner?))))
+             (swap! form assoc-in [:data :value composite-type index input-name] is-inner?))))
 
         props (mf/spread-props props {:default-selected (if value "inner" "drop")
                                       :variant "ghost"
diff --git a/frontend/src/app/main/ui/workspace/tokens/management/create/shadow.cljs b/frontend/src/app/main/ui/workspace/tokens/management/create/shadow.cljs
index b4958a517d..e6f048cb50 100644
--- a/frontend/src/app/main/ui/workspace/tokens/management/create/shadow.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/create/shadow.cljs
@@ -27,9 +27,9 @@
    [app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
    [app.main.ui.forms :as forms]
    [app.main.ui.hooks :as hooks]
-   [app.main.ui.workspace.tokens.management.create.form-color-input-token :refer [color-input-indexed*]]
-   [app.main.ui.workspace.tokens.management.create.form-input-token :refer [form-input-token-composite* form-input-token-indexed*]]
-   [app.main.ui.workspace.tokens.management.create.form-select-token :refer [select-composite*]]
+   [app.main.ui.workspace.tokens.management.create.color-input-token :refer [color-input-token-indexed*]]
+   [app.main.ui.workspace.tokens.management.create.input-token :refer [input-token-composite* input-token-indexed*]]
+   [app.main.ui.workspace.tokens.management.create.select-token :refer [select-composite*]]
    [app.util.dom :as dom]
    [app.util.forms :as fm]
    [app.util.i18n :refer [tr]]
@@ -38,13 +38,6 @@
    [cuerdas.core :as str]
    [rumext.v2 :as mf]))
 
-;; TODO: Review if code has this implementation
-(defn vec-remove
-  "remove elem in coll"
-  [pos coll]
-  (into (subvec coll 0 pos) (subvec coll (inc pos))))
-
-;; TODO: Put this in a common file, and use ir for shadow option menu as well
 (def ^:private default-token-shadow
   {:offsetX "4"
    :offsetY "4"
@@ -52,30 +45,30 @@
    :spread "0"})
 
 (defn get-subtoken
-  [token index prop]
-  (let [value (get-in token [:value :shadows index prop])]
+  [token index prop composite-type]
+  (let [value (get-in token [:value composite-type index prop])]
     (d/without-nils
      {:type  (if (= prop :color) :color :number)
       :value value})))
 
 (mf/defc shadow-formset*
-  [{:keys [index token tokens remove-shadow-block show-button] :as props}]
-  (let [inset-token (get-subtoken token index :inset)
+  [{:keys [index token tokens remove-shadow-block show-button composite-type] :as props}]
+  (let [inset-token (get-subtoken token index :inset composite-type)
         inset-token (hooks/use-equal-memo inset-token)
 
-        color-token (get-subtoken token index :color)
+        color-token (get-subtoken token index :color composite-type)
         color-token (hooks/use-equal-memo color-token)
 
-        offset-x-token (get-subtoken token index :offsetX)
+        offset-x-token (get-subtoken token index :offsetX composite-type)
         offset-x-token (hooks/use-equal-memo offset-x-token)
 
-        offset-y-token (get-subtoken token index :offsetY)
+        offset-y-token (get-subtoken token index :offsetY composite-type)
         offset-y-token (hooks/use-equal-memo offset-y-token)
 
-        blur-token (get-subtoken token index :blur)
+        blur-token (get-subtoken token index :blur composite-type)
         blur-token (hooks/use-equal-memo blur-token)
 
-        spread-token (get-subtoken token index :spreadX)
+        spread-token (get-subtoken token index :spreadX composite-type)
         spread-token (hooks/use-equal-memo spread-token)
 
         on-button-click
@@ -93,6 +86,7 @@
                              :token inset-token
                              :tokens tokens
                              :index index
+                             :composite-type composite-type
                              :name :inset}]
       (when show-button
         [:> icon-button* {:variant "ghost"
@@ -102,74 +96,82 @@
                           :icon i/remove}])]
      [:div {:class (stl/css :inputs-wrapper)}
       [:div {:class (stl/css :input-row)}
-       [:> color-input-indexed*
+       [:> color-input-token-indexed*
         {:placeholder (tr "workspace.tokens.token-value-enter")
          :aria-label (tr "workspace.tokens.color")
          :name :color
          :token color-token
+         :composite-type composite-type
          :index index
          :tokens tokens}]]
 
       [:div {:class (stl/css :input-row)}
-       [:> form-input-token-indexed*
+       [:> input-token-indexed*
         {:aria-label (tr "workspace.tokens.shadow-x")
          :icon i/character-x
          :placeholder (tr "workspace.tokens.shadow-x")
          :name :offsetX
          :token offset-x-token
          :index index
+         :composite-type composite-type
          :tokens tokens}]]
 
       [:div {:class (stl/css :input-row)}
-       [:> form-input-token-indexed*
+       [:> input-token-indexed*
         {:aria-label (tr "workspace.tokens.shadow-y")
          :icon i/character-y
          :placeholder (tr "workspace.tokens.shadow-y")
          :name :offsetY
          :token offset-y-token
          :index index
+         :composite-type composite-type
          :tokens tokens}]]
 
       [:div {:class (stl/css :input-row)}
-       [:> form-input-token-indexed*
+       [:> input-token-indexed*
         {:aria-label (tr "workspace.tokens.shadow-blur")
          :placeholder (tr "workspace.tokens.shadow-blur")
          :name :blur
-         :slot-start (mf/html [:span {:class (stl/css :visible-label)} "Blur:"])
+         :slot-start (mf/html [:span {:class (stl/css :visible-label)}
+                               (str (tr "workspace.tokens.shadow-blur") ":")])
          :token blur-token
          :index index
+         :composite-type composite-type
          :tokens tokens}]]
 
       [:div {:class (stl/css :input-row)}
-       [:> form-input-token-indexed*
+       [:> input-token-indexed*
         {:aria-label (tr "workspace.tokens.shadow-spread")
          :placeholder (tr "workspace.tokens.shadow-spread")
          :name :spread
-         :slot-start (mf/html [:span {:class (stl/css :visible-label)} "Spread:"])
+         :slot-start (mf/html [:span {:class (stl/css :visible-label)}
+                               (str (tr "workspace.tokens.shadow-spread") ":")])
          :token spread-token
+         :composite-type composite-type
          :index index
          :tokens tokens}]]]]))
 
 (mf/defc composite-form*
-  [{:keys [token tokens remove-shadow-block] :as props}]
+  [{:keys [token tokens remove-shadow-block composite-type] :as props}]
   (let [form
         (mf/use-ctx forms/context)
 
         length
-        (-> form deref :data :value :shadows count)]
+        (-> form deref :data :value composite-type count)]
 
     (for [index (range length)]
       [:> shadow-formset* {:key index
                            :index index
                            :token token
                            :tokens tokens
+                           :composite-type composite-type
                            :remove-shadow-block remove-shadow-block
                            :show-button (> length 1)}])))
 
 (mf/defc reference-form*
   [{:keys [token tokens] :as props}]
   [:div {:class (stl/css :input-row-reference)}
-   [:> form-input-token-composite*
+   [:> input-token-composite*
     {:placeholder (tr "workspace.tokens.reference-composite-shadow")
      :aria-label (tr "labels.reference")
      :icon i/drop-shadow
@@ -193,10 +195,9 @@
 
      [:value
       [:map
-       [:shadows {:optinal true}
+       [:shadow {:optinal true}
         [:vector
          [:map
-          ;; TODO: cambiar offsetX por offset-x
           [:offsetX {:optional true} [:maybe :string]]
           [:offsetY {:optional true} [:maybe :string]]
           [:blur {:optional true} [:maybe :string]]
@@ -225,7 +226,7 @@
        (let [reference  (get value :reference)
              ref-valid? (and reference (not (str/blank? reference)))
 
-             shadows (get value :shadows)
+             shadows (get value :shadow)
              ;; To be a valid shadow it must contain one on each valid values
              valid-composite-shadow?
              (and (seq shadows)
@@ -245,6 +246,9 @@
 
   (let [active-tab* (mf/use-state #(if (cft/is-reference? token) :reference :composite))
         active-tab (deref active-tab*)
+
+        composite-type :shadow
+
         token
         (mf/with-memo [token]
           (or token
@@ -252,16 +256,17 @@
                 (cond
                   (string? value)
                   {:value {:reference value
-                           :shadows   []}
+                           :shadow   []}
                    :type :shadow}
 
                   (vector? value)
                   {:value {:reference nil
-                           :shadows   value}
+                           :shadow   value}
                    :type :shadow})
+
                 {:type :shadow
                  :value {:reference nil
-                         :shadows   [default-token-shadow]}})))
+                         :shadow   [default-token-shadow]}})))
 
         token-type
         (get token :type)
@@ -271,10 +276,6 @@
 
         token-title (str/lower (:title token-properties))
 
-        ;; TODO: review
-        show-button* (mf/use-state false)
-        show-button (deref show-button*)
-
         tokens
         (mf/deref refs/workspace-active-theme-sets-tokens)
 
@@ -299,15 +300,15 @@
                 (cond
                   (string? raw-value)
                   {:reference raw-value
-                   :shadows   []}
+                   :shadow   []}
 
                   (vector? raw-value)
                   {:reference nil
-                   :shadows   raw-value}
+                   :shadow   raw-value}
 
                   :else
                   {:reference nil
-                   :shadows   [default-token-shadow]})]
+                   :shadow   [default-token-shadow]})]
 
             {:name        (:name token "")
              :description (:description token "")
@@ -358,18 +359,20 @@
 
         on-add-shadow-block
         (mf/use-fn
+         (mf/deps composite-type)
          (fn []
-           (swap! form  update-in [:data :value :shadows] conj default-token-shadow)))
+           (swap! form  update-in [:data :value composite-type] conj default-token-shadow)))
 
         remove-shadow-block
         (mf/use-fn
+         (mf/deps composite-type)
          (fn [index event]
            (dom/prevent-default event)
-           (swap! form update-in [:data :value :shadows] #(vec-remove index %))))
+           (swap! form update-in [:data :value composite-type] #(d/remove-at-index % index))))
 
         on-submit
         (mf/use-fn
-         (mf/deps validate-token token tokens token-type active-tab)
+         (mf/deps validate-token token tokens token-type active-tab composite-type)
          (fn [form _event]
            (let [name (get-in @form [:clean-data :name])
                  description (get-in @form [:clean-data :description])
@@ -377,7 +380,7 @@
 
              (->> (validate-token {:token-value (if (= active-tab :reference)
                                                   (:reference value)
-                                                  (:shadows value))
+                                                  (composite-type value))
                                    :token-name name
                                    :token-description description
                                    :prev-token token
@@ -446,7 +449,7 @@
         [:> composite-form* {:token token
                              :tokens tokens
                              :remove-shadow-block remove-shadow-block
-                             :show-button show-button}]
+                             :composite-type composite-type}]
 
         [:> reference-form* {:token token
                              :tokens tokens}])
diff --git a/frontend/src/app/main/ui/workspace/tokens/management/create/text_case.cljs b/frontend/src/app/main/ui/workspace/tokens/management/create/text_case.cljs
index ed80b5b46f..f1b70af916 100644
--- a/frontend/src/app/main/ui/workspace/tokens/management/create/text_case.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/create/text_case.cljs
@@ -23,7 +23,7 @@
    [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
    [app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
    [app.main.ui.forms :as fc]
-   [app.main.ui.workspace.tokens.management.create.form-input-token :refer [form-input-token*]]
+   [app.main.ui.workspace.tokens.management.create.input-token :refer [input-token*]]
    [app.util.dom :as dom]
    [app.util.forms :as fm]
    [app.util.i18n :refer [tr]]
@@ -187,7 +187,7 @@
            {:level :warning :appearance :ghost} (tr "workspace.tokens.warning-name-change")]])]
 
       [:div {:class (stl/css :input-row)}
-       [:> form-input-token*
+       [:> input-token*
         {:placeholder (tr "workspace.tokens.text-case-value-enter")
          :label (tr "workspace.tokens.token-value")
          :name :value
diff --git a/frontend/src/app/main/ui/workspace/tokens/management/create/typography.cljs b/frontend/src/app/main/ui/workspace/tokens/management/create/typography.cljs
index d94479d60a..564b147f05 100644
--- a/frontend/src/app/main/ui/workspace/tokens/management/create/typography.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/create/typography.cljs
@@ -26,7 +26,7 @@
    [app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
    [app.main.ui.forms :as forms]
    [app.main.ui.workspace.tokens.management.create.combobox-token-fonts :refer [font-picker-composite-combobox*]]
-   [app.main.ui.workspace.tokens.management.create.form-input-token :refer [form-input-token-composite*]]
+   [app.main.ui.workspace.tokens.management.create.input-token :refer [input-token-composite*]]
    [app.util.dom :as dom]
    [app.util.forms :as fm]
    [app.util.i18n :refer [tr]]
@@ -97,7 +97,7 @@
         :token font-family-sub-token
         :tokens tokens}]]
      [:div {:class (stl/css :input-row)}
-      [:> form-input-token-composite*
+      [:> input-token-composite*
        {:aria-label "Font Size"
         :icon i/text-font-size
         :placeholder (tr "workspace.tokens.font-size-value-enter")
@@ -105,7 +105,7 @@
         :token font-size-sub-token
         :tokens tokens}]]
      [:div {:class (stl/css :input-row)}
-      [:> form-input-token-composite*
+      [:> input-token-composite*
        {:aria-label "Font Weight"
         :icon i/text-font-weight
         :placeholder (tr "workspace.tokens.font-weight-value-enter")
@@ -113,7 +113,7 @@
         :token font-weight-sub-token
         :tokens tokens}]]
      [:div {:class (stl/css :input-row)}
-      [:> form-input-token-composite*
+      [:> input-token-composite*
        {:aria-label "Line Height"
         :icon i/text-lineheight
         :placeholder (tr "workspace.tokens.line-height-value-enter")
@@ -121,7 +121,7 @@
         :token line-height-sub-token
         :tokens tokens}]]
      [:div {:class (stl/css :input-row)}
-      [:> form-input-token-composite*
+      [:> input-token-composite*
        {:aria-label "Letter Spacing"
         :icon i/text-letterspacing
         :placeholder (tr "workspace.tokens.letter-spacing-value-enter-composite")
@@ -129,7 +129,7 @@
         :token letter-spacing-sub-token
         :tokens tokens}]]
      [:div {:class (stl/css :input-row)}
-      [:> form-input-token-composite*
+      [:> input-token-composite*
        {:aria-label "Text Case"
         :icon i/text-mixed
         :placeholder (tr "workspace.tokens.text-case-value-enter")
@@ -137,7 +137,7 @@
         :token text-case-sub-token
         :tokens tokens}]]
      [:div {:class (stl/css :input-row)}
-      [:> form-input-token-composite*
+      [:> input-token-composite*
        {:aria-label "Text Decoration"
         :icon i/text-underlined
         :placeholder (tr "workspace.tokens.text-decoration-value-enter")
@@ -148,7 +148,7 @@
 (mf/defc reference-form*
   [{:keys [token tokens] :as props}]
   [:div {:class (stl/css :input-row)}
-   [:> form-input-token-composite*
+   [:> input-token-composite*
     {:placeholder (tr "workspace.tokens.reference-composite")
      :aria-label (tr "labels.reference")
      :icon i/text-typography