diff --git a/constraintlayout/compose/src/main/java/androidx/constraintlayout/compose/ConstraintLayout.kt b/constraintlayout/compose/src/main/java/androidx/constraintlayout/compose/ConstraintLayout.kt
index db6c35ef9..ba24e15d2 100644
--- a/constraintlayout/compose/src/main/java/androidx/constraintlayout/compose/ConstraintLayout.kt
+++ b/constraintlayout/compose/src/main/java/androidx/constraintlayout/compose/ConstraintLayout.kt
@@ -2178,6 +2178,32 @@ internal open class Measurer : BasicMeasure.Measurer, DesignInfoProvider {
 
     private var designElements = arrayListOf<DesignElement>()
 
+
+    private fun getColor(str: String?, defaultColor: Color = Color.Black) : Color {
+        if (str != null && str.startsWith('#')) {
+            var str2 = str.substring(1)
+            if(str2.length == 6) {
+                str2 = "FF$str2"
+            }
+            try {
+                return Color(java.lang.Long.parseLong(str2, 16).toInt())
+            } catch (e: Exception) {
+                return defaultColor
+            }
+        }
+        return defaultColor
+    }
+
+    private fun getTextStyle(params: HashMap<String, String>) : TextStyle {
+        val fontSizeString = params["size"]
+        var fontSize = TextUnit.Unspecified
+        if (fontSizeString != null) {
+            fontSize = fontSizeString.toFloat().sp
+        }
+        var textColor = getColor(params["color"])
+        return TextStyle(fontSize = fontSize, color = textColor)
+    }
+
     @Composable
     fun createDesignElements() {
         for (element in designElements) {
@@ -2189,29 +2215,28 @@ internal open class Measurer : BasicMeasure.Measurer, DesignInfoProvider {
                 when (element.type) {
                     "button" -> {
                         val text = element.params["text"] ?: "text"
-                        var style = TextStyle.Default
-                        val fontSizeString = element.params["size"]
-                        if (fontSizeString != null) {
-                            val fontSize = fontSizeString.toFloat().sp
-                            style = TextStyle(fontSize = fontSize)
-                        }
+                        val colorBackground = getColor(element.params["backgroundColor"], Color.LightGray)
                         BasicText(modifier = Modifier
                             .layoutId(id)
                             .clip(RoundedCornerShape(20))
-                            .background(Color.LightGray)
+                            .background(colorBackground)
                             .padding(8.dp),
-                            text = text, style = style)
+                            text = text, style = getTextStyle(element.params))
+                    }
+                    "box" -> {
+                        val text = element.params["text"] ?: ""
+                        val colorBackground = getColor(element.params["backgroundColor"], Color.LightGray)
+                        Box(modifier = Modifier.layoutId(id).background(colorBackground)) {
+                            BasicText(
+                                modifier = Modifier.padding(8.dp),
+                                text = text, style = getTextStyle(element.params)
+                            )
+                        }
                     }
                     "text" -> {
                         val text = element.params["text"] ?: "text"
-                        var style = TextStyle.Default
-                        val fontSizeString = element.params["size"]
-                        if (fontSizeString != null) {
-                            val fontSize = fontSizeString.toFloat().sp
-                            style = TextStyle(fontSize = fontSize)
-                        }
                         BasicText(modifier = Modifier.layoutId(id),
-                            text = text, style = style)
+                            text = text, style = getTextStyle(element.params))
                     }
                     "textfield" -> {
                         val text = element.params["text"] ?: "text"
diff --git a/projects/ComposeConstraintLayout/app/src/main/java/com/example/constraintlayout/MainActivity.kt b/projects/ComposeConstraintLayout/app/src/main/java/com/example/constraintlayout/MainActivity.kt
index 924bab652..3a3d9f241 100644
--- a/projects/ComposeConstraintLayout/app/src/main/java/com/example/constraintlayout/MainActivity.kt
+++ b/projects/ComposeConstraintLayout/app/src/main/java/com/example/constraintlayout/MainActivity.kt
@@ -18,7 +18,7 @@ import com.google.accompanist.coil.rememberCoilPainter
 
 class MainActivity : AppCompatActivity() {
     private var mFrameLayout: FrameLayout? = null
-    private var composeNum = 39
+    private var composeNum = 38
     private var MAX = 39
 
     var map = HashMap<Int, String>();
@@ -40,13 +40,13 @@ class MainActivity : AppCompatActivity() {
     }
 
     private fun defineDesignElements() {
-        DesignElements.define("wow") {
+        DesignElements.define("text-material") {
                 id, params ->
             val text = params["text"] ?: "text"
             Text(modifier = Modifier.layoutId(id),
                 text= text)
         }
-        DesignElements.define("button") {
+        DesignElements.define("button-material") {
                 id, params ->
             val text = params["text"] ?: "text"
             Button(modifier = Modifier.layoutId(id),
@@ -55,7 +55,7 @@ class MainActivity : AppCompatActivity() {
                 Text(text = text)
             }
         }
-        DesignElements.define("image") {
+        DesignElements.define("image-coil") {
                 id, params ->
             val url = params["url"] ?: "url"
             val description = params["description"] ?: "Image Description"