diff --git a/VDSSample/ViewControllers/TileletViewController.swift b/VDSSample/ViewControllers/TileletViewController.swift
index aafe67d..e4e0c10 100644
--- a/VDSSample/ViewControllers/TileletViewController.swift
+++ b/VDSSample/ViewControllers/TileletViewController.swift
@@ -71,7 +71,7 @@ class TileletViewController: BaseViewController<Tilelet> {
     enum ColorPickerType {
         case backgroundColor
         case gradientColor1, gradientColor2
-        case contentViewBackgroundColor, light, dark
+        case contentViewBackgroundColor, custom
     }
     
     lazy var gradientColorView1: ColorPickerView<ColorPickerType> = {
@@ -107,11 +107,11 @@ class TileletViewController: BaseViewController<Tilelet> {
     }
     
     enum TitleTextColor: String, CaseIterable {
-        case primary, custom
+        case primary, token, custom
     }
     
     enum TextColor: String, CaseIterable {
-        case primary, secondary, custom
+        case primary, secondary, token, custom
     }
     
     /// eyebrow
@@ -122,15 +122,15 @@ class TileletViewController: BaseViewController<Tilelet> {
                            items: TextColor.allCases)
     }()
 
-    lazy var eyebrowLightColorView: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.light) { [weak self] picker in
-            self?.colorPickerType = picker.pickerType
-            self?.selectedColorTapped(picker)
-        }
+    lazy var eyebrowTokenColorView = {
+        PickerSelectorView(title: "paletteBlack",
+                           picker: self.picker,
+                           items: UIColor.VDSColor.allCases)
     }()
-    
-    lazy var eyebrowDarkColorView: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.dark) { [weak self] picker in
+
+    lazy var eyebrowCustomColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.custom) { [weak self] picker in
+            self?.currentSurfaceColorType = .eyebrow
             self?.colorPickerType = picker.pickerType
             self?.selectedColorTapped(picker)
         }
@@ -143,15 +143,15 @@ class TileletViewController: BaseViewController<Tilelet> {
                            picker: self.picker,
                            items: TitleTextColor.allCases)
     }()
-    lazy var titleLightColorView: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.light) { [weak self] picker in
-            self?.colorPickerType = picker.pickerType
-            self?.selectedColorTapped(picker)
-        }
+    lazy var titleTokenColorView = {
+        PickerSelectorView(title: "paletteBlack",
+                           picker: self.picker,
+                           items: UIColor.VDSColor.allCases)
     }()
-    
-    lazy var titleDarkColorView: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.dark) { [weak self] picker in
+
+    lazy var titleCustomColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.custom) { [weak self] picker in
+            self?.currentSurfaceColorType = .title
             self?.colorPickerType = picker.pickerType
             self?.selectedColorTapped(picker)
         }
@@ -164,20 +164,21 @@ class TileletViewController: BaseViewController<Tilelet> {
                            picker: self.picker,
                            items: TextColor.allCases)
     }()
-    lazy var subtitleLightColorView: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.light) { [weak self] picker in
-            self?.colorPickerType = picker.pickerType
-            self?.selectedColorTapped(picker)
-        }
+    lazy var subtitleTokenColorView = {
+        PickerSelectorView(title: "paletteBlack",
+                           picker: self.picker,
+                           items: UIColor.VDSColor.allCases)
     }()
-    
-    lazy var subtitleDarkColorView: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.dark) { [weak self] picker in
+
+    lazy var subtitleCustomColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.custom) { [weak self] picker in
+            self?.currentSurfaceColorType = .subtitle
             self?.colorPickerType = picker.pickerType
             self?.selectedColorTapped(picker)
         }
     }()
 
+    var descriptionIconFormStackView = FormSection().with { $0.isHidden = true }
     lazy var descriptionNamePickerSelectorView = {
         PickerSelectorView(title: "",
                            picker: self.picker,
@@ -190,34 +191,35 @@ class TileletViewController: BaseViewController<Tilelet> {
                            items: Icon.Size.allCases)
     }()
 
-    lazy var descriptionIconLightColorView: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.light) { [weak self] picker in
+    lazy var descriptionIconTokenColorView = {
+        PickerSelectorView(title: "paletteBlack",
+                           picker: self.picker,
+                           items: UIColor.VDSColor.allCases)
+    }()
+
+    lazy var descriptionIconCustomColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.custom) { [weak self] picker in
             self?.currentSurfaceColorType = .descriptionIcon
             self?.colorPickerType = picker.pickerType
             self?.selectedColorTapped(picker)
         }
     }()
-    
-    var descriptionIconFormStackView = FormSection().with { $0.isHidden = true }
-    lazy var descriptionIconDarkColorView: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.dark) { [weak self] picker in
-            self?.currentSurfaceColorType = .descriptionIcon
-            self?.colorPickerType = picker.pickerType
-            self?.selectedColorTapped(picker)
-        }
-    }()
-    
+        
     var directionalIconFormStackView = FormSection().with { $0.isHidden = true }
-    lazy var directionalIconLightColorView: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.light) { [weak self] picker in
-            self?.currentSurfaceColorType = .directionalIcon
-            self?.colorPickerType = picker.pickerType
-            self?.selectedColorTapped(picker)
-        }
+    lazy var directionalIconSizePickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: Icon.Size.allCases)
     }()
-    
-    lazy var directionalIconDarkColorView: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.dark) { [weak self] picker in
+
+    lazy var directionalIconTokenColorView = {
+        PickerSelectorView(title: "paletteBlack",
+                           picker: self.picker,
+                           items: UIColor.VDSColor.allCases)
+    }()
+
+    lazy var directionalIconCustomColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.custom) { [weak self] picker in
             self?.currentSurfaceColorType = .directionalIcon
             self?.colorPickerType = picker.pickerType
             self?.selectedColorTapped(picker)
@@ -309,8 +311,8 @@ class TileletViewController: BaseViewController<Tilelet> {
             $0.addFormRow(label: "Color", view: eyebrowColorPickerSelectorView)
         }))
         
-        eyebrowColorsFormStackView.addFormRow(label: "Light", view: eyebrowLightColorView)
-        eyebrowColorsFormStackView.addFormRow(label: "Dark", view: eyebrowDarkColorView)
+        eyebrowColorsFormStackView.addFormRow(label: "Token", view: eyebrowTokenColorView)
+        eyebrowColorsFormStackView.addFormRow(label: "Custom", view: eyebrowCustomColorView)
         append(section: eyebrowColorsFormStackView)
 
         append(section: .init().with({
@@ -320,8 +322,8 @@ class TileletViewController: BaseViewController<Tilelet> {
             $0.addFormRow(label: "Text", view: titleTextField)
             $0.addFormRow(label: "Color", view: titleColorPickerSelectorView)
         }))
-        titleColorsFormStackView.addFormRow(label: "Light", view: titleLightColorView)
-        titleColorsFormStackView.addFormRow(label: "Dark", view: titleDarkColorView)
+        titleColorsFormStackView.addFormRow(label: "Token", view: titleTokenColorView)
+        titleColorsFormStackView.addFormRow(label: "Custom", view: titleCustomColorView)
         append(section: titleColorsFormStackView)
 
         append(section: .init().with({
@@ -329,8 +331,8 @@ class TileletViewController: BaseViewController<Tilelet> {
             $0.addFormRow(label: "Text", view: subTitleTextField)
             $0.addFormRow(label: "Color", view: subtitleColorPickerSelectorView)
         }))
-        subtitleColorsFormStackView.addFormRow(label: "Light", view: subtitleLightColorView)
-        subtitleColorsFormStackView.addFormRow(label: "Dark", view: subtitleDarkColorView)
+        subtitleColorsFormStackView.addFormRow(label: "Token", view: subtitleTokenColorView)
+        subtitleColorsFormStackView.addFormRow(label: "Custom", view: subtitleCustomColorView)
         append(section: subtitleColorsFormStackView)
 
         append(section: .init().with({
@@ -340,8 +342,8 @@ class TileletViewController: BaseViewController<Tilelet> {
         append(section: descriptionIconFormStackView)
         descriptionIconFormStackView.addFormRow(label: "Icon", view: descriptionNamePickerSelectorView)
         descriptionIconFormStackView.addFormRow(label: "Size", view: descriptionIconSizePickerSelectorView)
-        descriptionIconFormStackView.addFormRow(label: "Light", view: descriptionIconLightColorView)
-        descriptionIconFormStackView.addFormRow(label: "Dark", view: descriptionIconDarkColorView)
+        descriptionIconFormStackView.addFormRow(label: "Token", view: descriptionIconTokenColorView)
+        descriptionIconFormStackView.addFormRow(label: "Custom", view: descriptionIconCustomColorView)
 
         append(section: .init().with({
             $0.title = "Directional Icon"
@@ -350,8 +352,8 @@ class TileletViewController: BaseViewController<Tilelet> {
         append(section: directionalIconFormStackView)
         directionalIconFormStackView.addFormRow(label: "Icon", view: directionIconPickerSelectorView)
         directionalIconFormStackView.addFormRow(label: "Size", view: directionIconSizePickerSelectorView)
-        directionalIconFormStackView.addFormRow(label: "Light", view: directionalIconLightColorView)
-        directionalIconFormStackView.addFormRow(label: "Dark", view: directionalIconDarkColorView)
+        directionalIconFormStackView.addFormRow(label: "Token", view: directionalIconTokenColorView)
+        directionalIconFormStackView.addFormRow(label: "Dark", view: directionalIconCustomColorView)
         
         clickableSwitch.onChange = { [weak self] sender in
             guard let self else { return }
@@ -511,13 +513,11 @@ class TileletViewController: BaseViewController<Tilelet> {
         scalingTypePickerSelectorView.text = component.aspectRatio.rawValue
         updateOtherTextStyles()
         
-        descriptionIconLightColorView.selectedColor = VDSColor.elementsPrimaryOnlight
-        descriptionIconDarkColorView.selectedColor = VDSColor.elementsPrimaryOndark
+        descriptionIconCustomColorView.selectedColor = VDSColor.elementsPrimaryOnlight
         descriptionNamePickerSelectorView.text = Icon.Name.multipleDocuments.rawValue
         descriptionIconSizePickerSelectorView.text = Icon.Size.medium.rawValue
 
-        directionalIconLightColorView.selectedColor = VDSColor.elementsPrimaryOnlight
-        directionalIconDarkColorView.selectedColor = VDSColor.elementsPrimaryOndark
+        directionalIconCustomColorView.selectedColor = VDSColor.elementsPrimaryOnlight
         directionIconPickerSelectorView.text = Tilelet.DirectionalIcon.IconType.rightArrow.rawValue
         directionIconSizePickerSelectorView.text = Tilelet.DirectionalIcon.IconSize.medium.rawValue
     }
@@ -537,12 +537,13 @@ class TileletViewController: BaseViewController<Tilelet> {
             switch titleColorPickerSelectorView.selectedItem {
             case .primary:
                 textColor = .primary
+            case .token:
+                textColor = .token(titleTokenColorView.selectedItem)
             case .custom:
-                if let light = titleLightColorView.selectedColor {
-                    let dark = titleDarkColorView.selectedColor ?? light
-                    textColor = .custom(light, dark)
+                if let color = titleCustomColorView.selectedColor {
+                    textColor = .custom(color)
                 } else {
-                    textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
+                    textColor = .custom(VDSColor.elementsPrimaryOnlight)
                 }
             }
             
@@ -560,12 +561,13 @@ class TileletViewController: BaseViewController<Tilelet> {
                 textColor = .primary
             case .secondary:
                 textColor = .secondary
+            case .token:
+                textColor = .token(subtitleTokenColorView.selectedItem)
             case .custom:
-                if let light = subtitleLightColorView.selectedColor {
-                    let dark = subtitleDarkColorView.selectedColor ?? light
-                    textColor = .custom(light, dark)
+                if let color = subtitleCustomColorView.selectedColor {
+                    textColor = .custom(color)
                 } else {
-                    textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
+                    textColor = .custom(VDSColor.elementsPrimaryOnlight)
                 }
             }
 
@@ -583,15 +585,15 @@ class TileletViewController: BaseViewController<Tilelet> {
                 textColor = .primary
             case .secondary:
                 textColor = .secondary
+            case .token:
+                textColor = .token(eyebrowTokenColorView.selectedItem)
             case .custom:
-                if let light = eyebrowLightColorView.selectedColor {
-                    let dark = eyebrowDarkColorView.selectedColor ?? light
-                    textColor = .custom(light, dark)
+                if let color = eyebrowCustomColorView.selectedColor {
+                    textColor = .custom(color)
                 } else {
-                    textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
+                    textColor = .custom(VDSColor.elementsPrimaryOnlight)
                 }
             }
-
             component.eyebrowModel = Tilelet.EyebrowModel(text: text, textColor: textColor, isBold: eyebrowIsBold.isOn, standardStyle: otherStandardStylePickerSelectorView.selectedItem)
         } else {
             component.eyebrowModel = nil
@@ -599,14 +601,14 @@ class TileletViewController: BaseViewController<Tilelet> {
     }
     
     func setDescriptiveIconModel() {
-        let light = descriptionIconLightColorView.selectedColor ?? descriptionIconDarkColorView.selectedColor
-        let dark = descriptionIconDarkColorView.selectedColor ?? descriptionIconLightColorView.selectedColor
+        let custom = descriptionIconCustomColorView.selectedColor ?? VDSColor.paletteBlack
+        let token = descriptionIconTokenColorView.selectedItem
         let iconSize = descriptionIconSizePickerSelectorView.selectedItem
         let iconName = descriptionNamePickerSelectorView.selectedItem
         
-        if let light, let dark {
+        if let iconColor {
             component.descriptiveIconModel = .init(name: iconName,
-                                                   colorConfiguration: SurfaceColorConfiguration(light, dark), size: iconSize)
+                                                   iconColor: iconColor, size: iconSize)
         } else {
             component.descriptiveIconModel = .init(name: iconName,
                                                    size: iconSize)
@@ -614,13 +616,13 @@ class TileletViewController: BaseViewController<Tilelet> {
     }
     
     func setDirectionalIconModel() {
-        let light = directionalIconLightColorView.selectedColor ?? directionalIconDarkColorView.selectedColor
-        let dark = directionalIconDarkColorView.selectedColor ?? directionalIconLightColorView.selectedColor
+        let custom = directionalIconCustomColorView.selectedColor ?? VDSColor.paletteBlack
+        let token = directionalIconTokenColorView.selectedItem
         let iconType = directionIconPickerSelectorView.selectedItem
         let iconSize = directionIconSizePickerSelectorView.selectedItem
                         
-        if let light, let dark {
-            component.directionalIconModel = .init(iconType: iconType, colorConfiguration: SurfaceColorConfiguration(light, dark), size: iconSize)
+        if let iconColor {
+            component.directionalIconModel = .init(iconType: iconType, iconColor: iconColor, size: iconSize)
         } else {
             component.directionalIconModel = .init(iconType: iconType, size: iconSize)
         }
@@ -809,32 +811,22 @@ extension TileletViewController: UIColorPickerViewControllerDelegate {
             gradientColorView2.selectedColor = viewController.selectedColor
             updateGradientColors()
             
-        case .light, .dark:
-            var lightColorView: ColorPickerView<ColorPickerType>
-            var darkColorView: ColorPickerView<ColorPickerType>
+        case .custom:
+            var colorView: ColorPickerView<ColorPickerType>
             
             switch currentSurfaceColorType {
             case .eyebrow:
-                lightColorView = eyebrowLightColorView
-                darkColorView = eyebrowDarkColorView
+                colorView = eyebrowCustomColorView
             case .title:
-                lightColorView = titleLightColorView
-                darkColorView = titleDarkColorView
+                colorView = titleCustomColorView
             case .subtitle:
-                lightColorView = subtitleLightColorView
-                darkColorView = subtitleDarkColorView
+                colorView = subtitleCustomColorView
             case .directionalIcon:
-                lightColorView = directionalIconLightColorView
-                darkColorView = directionalIconDarkColorView
+                colorView = directionalIconCustomColorView
             case .descriptionIcon:
-                lightColorView = descriptionIconLightColorView
-                darkColorView = descriptionIconDarkColorView
-            }
-            if colorPickerType == .light {
-                lightColorView.selectedColor = viewController.selectedColor
-            } else {
-                darkColorView.selectedColor = viewController.selectedColor
+                colorView = descriptionIconCustomColorView
             }
+            colorView.selectedColor = viewController.selectedColor
             
             switch currentSurfaceColorType {
             case .eyebrow:
diff --git a/VDSSample/ViewControllers/TitleLockupViewController.swift b/VDSSample/ViewControllers/TitleLockupViewController.swift
index 6f2c298..7e15dde 100644
--- a/VDSSample/ViewControllers/TitleLockupViewController.swift
+++ b/VDSSample/ViewControllers/TitleLockupViewController.swift
@@ -45,22 +45,22 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
     }()
     
     var currentLabelType: LabelType = .title
-    var colorPickerType: ColorPickerType = .light
+    var colorPickerType: ColorPickerType = .custom
     
     enum LabelType {
         case eyebrow, title, subtitle
     }
     
     enum TitleTextColor: String, CaseIterable {
-        case primary, custom
+        case primary, token, custom
     }
     
     enum TextColor: String, CaseIterable {
-        case primary, secondary, custom
+        case primary, secondary, token, custom
     }
     
     enum ColorPickerType {
-        case light, dark
+        case custom
     }
     
     /// eyebrow
@@ -71,15 +71,14 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
                            items: TextColor.allCases)
     }()
 
-    lazy var eyebrowLightColorView: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.light) { [weak self] picker in
-            self?.colorPickerType = picker.pickerType
-            self?.selectedColorTapped(picker)
-        }
+    lazy var eyebrowTokenColorView = {
+        PickerSelectorView(title: "paletteBlack",
+                           picker: self.picker,
+                           items: UIColor.VDSColor.allCases)
     }()
-    
-    lazy var eyebrowDarkColorView: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.dark) { [weak self] picker in
+
+    lazy var eyebrowCustomColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.custom) { [weak self] picker in
             self?.colorPickerType = picker.pickerType
             self?.selectedColorTapped(picker)
         }
@@ -92,15 +91,15 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
                            picker: self.picker,
                            items: TitleTextColor.allCases)
     }()
-    lazy var titleLightColorView: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.light) { [weak self] picker in
-            self?.colorPickerType = picker.pickerType
-            self?.selectedColorTapped(picker)
-        }
-    }()
     
-    lazy var titleDarkColorView: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.dark) { [weak self] picker in
+    lazy var titleTokenColorView = {
+        PickerSelectorView(title: "paletteBlack",
+                           picker: self.picker,
+                           items: UIColor.VDSColor.allCases)
+    }()
+
+    lazy var titleCustomColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.custom) { [weak self] picker in
             self?.colorPickerType = picker.pickerType
             self?.selectedColorTapped(picker)
         }
@@ -113,15 +112,15 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
                            picker: self.picker,
                            items: TextColor.allCases)
     }()
-    lazy var subtitleLightColorView: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.light) { [weak self] picker in
-            self?.colorPickerType = picker.pickerType
-            self?.selectedColorTapped(picker)
-        }
-    }()
     
-    lazy var subtitleDarkColorView: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.dark) { [weak self] picker in
+    lazy var subtitleTokenColorView = {
+        PickerSelectorView(title: "paletteBlack",
+                           picker: self.picker,
+                           items: UIColor.VDSColor.allCases)
+    }()
+
+    lazy var subtitleCustomColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.custom) { [weak self] picker in
             self?.colorPickerType = picker.pickerType
             self?.selectedColorTapped(picker)
         }
@@ -145,22 +144,22 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
         addFormRow(label: "Eyebrow is Bold", view: eyebrowIsBold)
         addFormRow(label: "Eyebrow Text", view: eyebrowTextField)
         addFormRow(label: "Eyebrow Color", view: eyebrowColorPickerSelectorView)
-        eyebrowColorsFormStackView.addFormRow(label: "Light", view: eyebrowLightColorView)
-        eyebrowColorsFormStackView.addFormRow(label: "Dark", view: eyebrowDarkColorView)
+        eyebrowColorsFormStackView.addFormRow(label: "Token", view: eyebrowTokenColorView)
+        eyebrowColorsFormStackView.addFormRow(label: "Custom", view: eyebrowCustomColorView)
         append(section: eyebrowColorsFormStackView)
 
         addFormRow(label: "Title is Bold", view: titleIsBold)
         addFormRow(label: "Title Style", view: titleStandardStylePickerSelectorView)
         addFormRow(label: "Title Text", view: titleTextField)
         addFormRow(label: "Title Color", view: titleColorPickerSelectorView)
-        titleColorsFormStackView.addFormRow(label: "Light", view: titleLightColorView)
-        titleColorsFormStackView.addFormRow(label: "Dark", view: titleDarkColorView)
+        titleColorsFormStackView.addFormRow(label: "Token", view: titleTokenColorView)
+        titleColorsFormStackView.addFormRow(label: "Dark", view: titleCustomColorView)
         append(section: titleColorsFormStackView)
 
         addFormRow(label: "Subtitle Text", view: subTitleTextField)
         addFormRow(label: "Subtitle Color", view: subtitleColorPickerSelectorView)
-        subtitleColorsFormStackView.addFormRow(label: "Light", view: subtitleLightColorView)
-        subtitleColorsFormStackView.addFormRow(label: "Dark", view: subtitleDarkColorView)
+        subtitleColorsFormStackView.addFormRow(label: "Token", view: subtitleTokenColorView)
+        subtitleColorsFormStackView.addFormRow(label: "Custom", view: subtitleCustomColorView)
         append(section: subtitleColorsFormStackView)
         
         
@@ -221,12 +220,13 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
             switch titleColorPickerSelectorView.selectedItem {
             case .primary:
                 textColor = .primary
+            case .token:
+                textColor = .token(titleTokenColorView.selectedItem)
             case .custom:
-                if let light = titleLightColorView.selectedColor {
-                    let dark = titleDarkColorView.selectedColor ?? light
-                    textColor = .custom(light, dark)
+                if let color = titleCustomColorView.selectedColor {
+                    textColor = .custom(color)
                 } else {
-                    textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
+                    textColor = .custom(VDSColor.elementsPrimaryOnlight)
                 }
             }
 
@@ -255,12 +255,13 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
                 textColor = .primary
             case .secondary:
                 textColor = .secondary
+            case .token:
+                textColor = .token(subtitleTokenColorView.selectedItem)
             case .custom:
-                if let light = subtitleLightColorView.selectedColor {
-                    let dark = subtitleDarkColorView.selectedColor ?? light
-                    textColor = .custom(light, dark)
+                if let color = subtitleCustomColorView.selectedColor {
+                    textColor = .custom(color)
                 } else {
-                    textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
+                    textColor = .custom(VDSColor.elementsPrimaryOnlight)
                 }
             }
             component.subTitleModel = TitleLockup.SubTitleModel(text: text, otherStandardStyle: style, textColor: textColor)
@@ -276,13 +277,15 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
                 textColor = .primary
             case .secondary:
                 textColor = .secondary
+            case .token:
+                textColor = .token(eyebrowTokenColorView.selectedItem)
             case .custom:
-                if let light = eyebrowLightColorView.selectedColor {
-                    let dark = eyebrowDarkColorView.selectedColor ?? light
-                    textColor = .custom(light, dark)
+                if let color = eyebrowCustomColorView.selectedColor {
+                    textColor = .custom(color)
                 } else {
-                    textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
-                }            }
+                    textColor = .custom(VDSColor.elementsPrimaryOnlight)
+                }           
+            }
             component.eyebrowModel = TitleLockup.EyebrowModel(text: text, textColor: textColor, isBold: eyebrowIsBold.isOn, standardStyle: style)
             debug(type: "EyeBrow", textStyle: eyebrowIsBold.isOn ? style.value.bold : style.value.regular)
             
@@ -373,26 +376,18 @@ extension TitleLockupViewController: UIColorPickerViewControllerDelegate {
     
     func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
         guard let hexString = viewController.selectedColor.hexString else { return }
-        var lightColorView: ColorPickerView<ColorPickerType>
-        var darkColorView: ColorPickerView<ColorPickerType>
+        var colorView: ColorPickerView<ColorPickerType>
         
         switch currentLabelType {
         case .eyebrow:
-            lightColorView = eyebrowLightColorView
-            darkColorView = eyebrowDarkColorView
+            colorView = eyebrowCustomColorView
         case .title:
-            lightColorView = titleLightColorView
-            darkColorView = titleDarkColorView
+            colorView = titleCustomColorView
         case .subtitle:
-            lightColorView = subtitleLightColorView
-            darkColorView = subtitleDarkColorView
-        }
-        switch colorPickerType {
-        case .light:
-            lightColorView.selectedColor = viewController.selectedColor
-        case .dark:
-            darkColorView.selectedColor = viewController.selectedColor
+            colorView = subtitleCustomColorView
         }
+
+        colorView.selectedColor = viewController.selectedColor
         
         if currentLabelType == .title {
             setTitleModel()