Update FlatButton and CategoryTab styles

packages/builder/src/components/userInterface/CategoryTab.svelte

@@ -1,7 +1,7 @@
 <script>
   export let categories = []
   export let selectedCategory = {}
-  export let onClick = category => {}
+  export let onClick = (category) => {}
 </script>
 
 <div class="tabs">
@@ -19,8 +19,8 @@
   .tabs {
     display: flex;
     list-style: none;
-    font-size: 18px;
-    font-weight: 600;
+    font-size: var(--font-size-m);
+    font-weight: 500;
   }
 
   li {

packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte

@@ -107,7 +107,7 @@
   }
 
   .instance-name {
-    font-size: 14px;
+    font-size: var(--font-size-xs);
     font-weight: 500;
     color: var(--grey-7);
   }

packages/builder/src/components/userInterface/FlatButton.svelte

@@ -3,7 +3,7 @@
   export let value = ""
   export let text = ""
   export let icon = ""
-  export let onClick = value => {}
+  export let onClick = (value) => {}
   export let selected = false
 
   $: useIcon = !!icon
@@ -22,23 +22,22 @@
 <style>
   .flatbutton {
     cursor: pointer;
-    max-height: 36px;
-    padding: 8px 2px;
+    height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
-    background: #ffffff;
+    background: white;
     color: var(--grey-7);
-    border-radius: 5px;
-    font-size: 14px;
-    font-weight: 400;
+    border-radius: var(--border-radius-m);
+    font-size: var(--font-size-xs);
+    font-weight: 500;
     transition: all 0.3s;
     text-rendering: optimizeLegibility;
   }
 
   .selected {
-    background: var(--grey-3);
+    background: var(--grey-2);
     color: var(--ink);
   }
 

packages/builder/src/pages/[application]/design/_layout.svelte

@@ -105,7 +105,7 @@
     justify-content: flex-start;
     align-items: stretch;
     gap: var(--spacing-l);
-    padding: var(--spacing-xl);
+    padding: var(--spacing-l) var(--spacing-xl);
   }
 
   .nav-group-header > div:nth-child(1) {