chore: fixing rabbitai issues

chore: adding test coverage to styles.ts
chore: adding more styles.test.ts unit tests
2026-02-03 13:37:26 -06:00 · 2026-02-02 21:25:55 +08:00 · 2026-02-02 21:25:55 +08:00 · 2026-02-02 21:25:55 +08:00 · 2026-02-02 21:25:55 +08:00 · 2026-02-02 21:25:55 +08:00
42 changed files with 1477 additions and 502 deletions
--- a/apps/web/i18n.lock
+++ b/apps/web/i18n.lock
@@ -1080,7 +1080,6 @@ checksums:
    environments/surveys/edit/add_fallback_placeholder: 0e77ea487ddd7bc7fc2f1574b018dc08
    environments/surveys/edit/add_hidden_field_id: a8f55b51b790cf5f4d898af7770ad1ed
    environments/surveys/edit/add_highlight_border: 66f52b21fbb9aa6561c98a090abaaf8f
-    environments/surveys/edit/add_highlight_border_description: 1c04654a393c0fa31d2b58abb6f85b4b
    environments/surveys/edit/add_logic: f234c9f1393a9ed4792dfbd15838c951
    environments/surveys/edit/add_none_of_the_above: 8e8c3f404204f6ddac2f52e682153202
    environments/surveys/edit/add_option: 143c54f0b201067fe5159284d6daeca2
@@ -1152,15 +1151,8 @@ checksums:
    environments/surveys/edit/change_background: fa71a993869f7d3ac553c547c12c3e9b
    environments/surveys/edit/change_question_type: 2d555ae48df8dbedfc6a4e1ad492f4aa
    environments/surveys/edit/change_survey_type: c26322043a476da6d94adb8b4efe1e93
-    environments/surveys/edit/change_the_background_color_of_the_card: 41d805ef753a7d1e272b48519967bbd4
-    environments/surveys/edit/change_the_background_color_of_the_input_fields: 4edbc9a9f5d145ed096cf5b4f8bdaac0
    environments/surveys/edit/change_the_background_to_a_color_image_or_animation: f1b9c9eb61497dd91b2550dd50c77836
-    environments/surveys/edit/change_the_border_color_of_the_card: 64d76b247ab192343bb327f92a5f220c
-    environments/surveys/edit/change_the_border_color_of_the_input_fields: bb687f41af15a1dd9494c14f97b10425
-    environments/surveys/edit/change_the_border_radius_of_the_card_and_the_inputs: 9eccf688a7a67dfeeeed3de5209058b0
-    environments/surveys/edit/change_the_brand_color_of_the_survey: ecc420c641fb58daaf4d2d0086357b7f
    environments/surveys/edit/change_the_placement_of_this_survey: 64359611bfb23bacc614ffe0b08fbe5d
-    environments/surveys/edit/change_the_question_color_of_the_survey: ab6942138a8c5fc6c8c3b9f8dd95e980
    environments/surveys/edit/changes_saved: 90aab363c9e96eaa1295a997c48f97f6
    environments/surveys/edit/changing_survey_type_will_remove_existing_distribution_channels: 9ce817be04f13f2f0db981145ec48df4
    environments/surveys/edit/checkbox_label: 12a07d6bdf38e283a2e95892ec49b7f8
@@ -1298,7 +1290,6 @@ checksums:
    environments/surveys/edit/hide_progress_bar: 7eefe7db6a051105bded521d94204933
    environments/surveys/edit/hide_question_settings: 99127cd016db2f7fc80333b36473c0ef
    environments/surveys/edit/hostname: 9bdaa7692869999df51bb60d58d9ef62
-    environments/surveys/edit/how_funky_do_you_want_your_cards_in_survey_type_derived_surveys: 3cb16b37510c01af20a80f51b598346e
    environments/surveys/edit/if_you_need_more_please: a7d208c283caf6b93800b809fca80768
    environments/surveys/edit/if_you_really_want_that_answer_ask_until_you_get_it: 31c18a8c7c578db2ba49eed663d1739f
    environments/surveys/edit/ignore_global_waiting_time: e08db543ace4935625e0961cc6e60489
@@ -1392,7 +1383,6 @@ checksums:
    environments/surveys/edit/protect_survey_with_pin_description: 0e55d19b6f3578b1024e03606172a5d2
    environments/surveys/edit/publish: 4aa95ba4793bb293e771bd73b4f87c0f
    environments/surveys/edit/question: 0576462ce60d4263d7c482463fcc9547
-    environments/surveys/edit/question_color: 6e69cb5699368bc68b2e1e1501f555c9
    environments/surveys/edit/question_deleted: ecdeb22b81ae2d732656a7742c1eec7b
    environments/surveys/edit/question_duplicated: 3f02439fd0a8b818bc84c1b1b473898c
    environments/surveys/edit/question_id_updated: e8d94dbefcbad00c7464b3d1fb0ee81a
@@ -1493,7 +1483,6 @@ checksums:
    environments/surveys/edit/styling_set_to_theme_styles: f2c108bf422372b00cf7c87f1b042f69
    environments/surveys/edit/subheading: c0f6f57155692fd8006381518ce4fef0
    environments/surveys/edit/subtract: 2d83b8b9ef35110f2583ddc155b6c486
-    environments/surveys/edit/suggest_colors: ddc4543b416ab774007b10a3434343cd
    environments/surveys/edit/survey_completed_heading: dae5ac4a02a886dc9d9fc40927091919
    environments/surveys/edit/survey_completed_subheading: db537c356c3ab6564d24de0d11a0fee2
    environments/surveys/edit/survey_display_settings: 8ed19e6a8e1376f7a1ba037d82c4ae11
@@ -1933,6 +1922,31 @@ checksums:
    environments/workspace/languages/translate: 59f9803b27e2030ba7323ed239116cf7
    environments/workspace/look/add_background_color: 9be512ee1246e32d3958c56097d202d9
    environments/workspace/look/add_background_color_description: adb6fcb392862b3d0e9420d9b5405ddb
+    environments/workspace/look/advanced_styling_field_border_radius: 63b8f3541a9792d705e67d5aca7b6451
+    environments/workspace/look/advanced_styling_field_button_bg: fc103ab926721e6213d39cc1f913c018
+    environments/workspace/look/advanced_styling_field_button_text: 3304e88bcc3869f3a306634b541e1e07
+    environments/workspace/look/advanced_styling_field_description_color: e2f4cbc96d3f0b75837a9edc95a5eeda
+    environments/workspace/look/advanced_styling_field_description_size: a0d51c3ab7dc56320ecedc2b27917842
+    environments/workspace/look/advanced_styling_field_font_size: ca44d14429b2175a1b194793b4ab8f6b
+    environments/workspace/look/advanced_styling_field_font_weight: bfef83778146cf40550df9650d8a07da
+    environments/workspace/look/advanced_styling_field_headline_color: 4ccf3935ad90c88ad4add24f498673ce
+    environments/workspace/look/advanced_styling_field_headline_size: ddc49fa27fc97ed286d5c4309edd9a3c
+    environments/workspace/look/advanced_styling_field_headline_weight: 0c8b8262945c61f8e2978502362e0a42
+    environments/workspace/look/advanced_styling_field_height: f4da6d7ecd26e3fa75cfea03abb60c00
+    environments/workspace/look/advanced_styling_field_indicator_bg: 00febda2901af0f1b0c17e44f9917c38
+    environments/workspace/look/advanced_styling_field_input_text: 4999bfded16b7d0bbcc858b399745eaa
+    environments/workspace/look/advanced_styling_field_option_bg: 0ceaed10d99ed4ad83cb0934ab970174
+    environments/workspace/look/advanced_styling_field_option_label: 2767a5db32742073a01aac16488e93dc
+    environments/workspace/look/advanced_styling_field_padding_x: 74b440237b4ba662c9898d92e2e06217
+    environments/workspace/look/advanced_styling_field_padding_y: 441d777bdc1cd1e792bf9815cc937c6a
+    environments/workspace/look/advanced_styling_field_placeholder_opacity: fddcbc6e4fc5757aab807a6282d26627
+    environments/workspace/look/advanced_styling_field_shadow: 7b4af1b447ece2b19b5d7717b2e15c4e
+    environments/workspace/look/advanced_styling_field_track_bg: e569155b24616ba6d0a89a07bc85955c
+    environments/workspace/look/advanced_styling_field_track_height: 9ce57cb4583039c224a37e013efb6b8f
+    environments/workspace/look/advanced_styling_section_buttons: 3b44d6e2800e7bf3f133f1bce435f4c2
+    environments/workspace/look/advanced_styling_section_headlines: 6def704c0ac2ecb5951400c806856a41
+    environments/workspace/look/advanced_styling_section_inputs: 76bbeb561122a72fd3ec8c49eff7c563
+    environments/workspace/look/advanced_styling_section_options: a92819a15bc8c3eb44bdd82a5075c9e2
    environments/workspace/look/app_survey_placement: f09cddac6bbb77d4694df223c6edf6b6
    environments/workspace/look/app_survey_placement_settings_description: d81bcff7a866a2f83ff76936dbad4770
    environments/workspace/look/centered_modal_overlay_color: 1124ba61ee2ecb18a7175ff780dc3b60
@@ -1946,6 +1960,9 @@ checksums:
    environments/workspace/look/formbricks_branding_hidden: fda9ba81f8d7fdaacf8dc1642034e145
    environments/workspace/look/formbricks_branding_settings_description: 5bb39206c6412c703895593f465a01f9
    environments/workspace/look/formbricks_branding_shown: 6c9861cf8f95e8a68c5c64b2630d96cd
+    environments/workspace/look/generate_theme_btn: 0345bf322c191e70d01fd6607ec5c2f8
+    environments/workspace/look/generate_theme_confirmation: f119dbb85fb2bda1c0bcdc581724ef3b
+    environments/workspace/look/generate_theme_header: 4df5f30a20cf78e248465915f222fd1b
    environments/workspace/look/logo_removed_successfully: f3a7f9d226affa91121e90ff360553aa
    environments/workspace/look/logo_settings_description: da155953f55cb44d0e563d9e740241aa
    environments/workspace/look/logo_updated_successfully: 170250f18062b79be6ac0481ec9d4368
@@ -1960,6 +1977,7 @@ checksums:
    environments/workspace/look/show_formbricks_branding_in: 80fabfec9b34a13c0445d02b923216ed
    environments/workspace/look/show_powered_by_formbricks: 02b84acc3156de24e1aff8321d77603f
    environments/workspace/look/styling_updated_successfully: b8b74b50dde95abcd498633e9d0c891f
+    environments/workspace/look/suggest_colors: ddc4543b416ab774007b10a3434343cd
    environments/workspace/look/theme: 21fe00b7a518089576fb83c08631107a
    environments/workspace/look/theme_settings_description: 9fc45322818c3774ab4a44ea14d7836e
    environments/workspace/tags/add: 87c4a663507f2bcbbf79934af8164e13
--- a/apps/web/lib/styling/constants.ts
+++ b/apps/web/lib/styling/constants.ts
@@ -11,6 +11,43 @@ export const COLOR_DEFAULTS = {
  highlightBorderColor: "#64748b",
 } as const;

+export const ADVANCED_DEFAULTS = {
+  accentBgColor: "#e2e8f0",
+  accentBgColorSelected: "#f1f5f9",
+  buttonBgColor: "#0f172a",
+  buttonTextColor: "#f8fafc",
+  buttonBorderRadius: 10,
+  buttonHeight: 36,
+  buttonFontSize: 14,
+  buttonFontWeight: "500",
+  buttonPaddingX: 16,
+  buttonPaddingY: 8,
+  inputBgColor: "#f8fafc",
+  inputBorderColor: "#64748b",
+  inputTextColor: "#0f172a",
+  inputBorderRadius: 10,
+  inputHeight: 40,
+  inputFontSize: 14,
+  inputPaddingX: 16,
+  inputPaddingY: 16,
+  inputPlaceholderOpacity: 0.5,
+  inputShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  optionBgColor: "#f8fafc",
+  optionLabelColor: "#0f172a",
+  optionBorderRadius: 10,
+  optionPaddingX: 16,
+  optionPaddingY: 16,
+  optionFontSize: 14,
+  elementHeadlineFontSize: 16,
+  elementHeadlineFontWeight: "400",
+  elementHeadlineColor: "#0f172a",
+  elementDescriptionFontSize: 14,
+  elementDescriptionColor: "#0f172a",
+  progressTrackHeight: 8,
+  progressTrackBgColor: "#0f172a33",
+  progressIndicatorBgColor: "#0f172a",
+} as const;
+
 export const defaultStyling: TProjectStyling = {
  allowStyleOverwrite: true,
  brandColor: {
@@ -39,4 +76,58 @@ export const defaultStyling: TProjectStyling = {
    linkSurveys: "straight",
    appSurveys: "straight",
  },
+  accentBgColor: {
+    light: ADVANCED_DEFAULTS.accentBgColor,
+  },
+  accentBgColorSelected: {
+    light: ADVANCED_DEFAULTS.accentBgColorSelected,
+  },
+  buttonBgColor: {
+    light: ADVANCED_DEFAULTS.buttonBgColor,
+  },
+  buttonTextColor: {
+    light: ADVANCED_DEFAULTS.buttonTextColor,
+  },
+  buttonBorderRadius: ADVANCED_DEFAULTS.buttonBorderRadius,
+  buttonHeight: ADVANCED_DEFAULTS.buttonHeight,
+  buttonFontSize: ADVANCED_DEFAULTS.buttonFontSize,
+  buttonFontWeight: ADVANCED_DEFAULTS.buttonFontWeight,
+  buttonPaddingX: ADVANCED_DEFAULTS.buttonPaddingX,
+  buttonPaddingY: ADVANCED_DEFAULTS.buttonPaddingY,
+  inputTextColor: {
+    light: ADVANCED_DEFAULTS.inputTextColor,
+  },
+  inputBorderRadius: ADVANCED_DEFAULTS.inputBorderRadius,
+  inputHeight: ADVANCED_DEFAULTS.inputHeight,
+  inputFontSize: ADVANCED_DEFAULTS.inputFontSize,
+  inputPaddingX: ADVANCED_DEFAULTS.inputPaddingX,
+  inputPaddingY: ADVANCED_DEFAULTS.inputPaddingY,
+  inputPlaceholderOpacity: ADVANCED_DEFAULTS.inputPlaceholderOpacity,
+  inputShadow: ADVANCED_DEFAULTS.inputShadow,
+  optionBgColor: {
+    light: ADVANCED_DEFAULTS.optionBgColor,
+  },
+  optionLabelColor: {
+    light: ADVANCED_DEFAULTS.optionLabelColor,
+  },
+  optionBorderRadius: ADVANCED_DEFAULTS.optionBorderRadius,
+  optionPaddingX: ADVANCED_DEFAULTS.optionPaddingX,
+  optionPaddingY: ADVANCED_DEFAULTS.optionPaddingY,
+  optionFontSize: ADVANCED_DEFAULTS.optionFontSize,
+  elementHeadlineFontSize: ADVANCED_DEFAULTS.elementHeadlineFontSize,
+  elementHeadlineFontWeight: ADVANCED_DEFAULTS.elementHeadlineFontWeight,
+  elementHeadlineColor: {
+    light: ADVANCED_DEFAULTS.elementHeadlineColor,
+  },
+  elementDescriptionFontSize: ADVANCED_DEFAULTS.elementDescriptionFontSize,
+  elementDescriptionColor: {
+    light: ADVANCED_DEFAULTS.elementDescriptionColor,
+  },
+  progressTrackHeight: ADVANCED_DEFAULTS.progressTrackHeight,
+  progressTrackBgColor: {
+    light: ADVANCED_DEFAULTS.progressTrackBgColor,
+  },
+  progressIndicatorBgColor: {
+    light: ADVANCED_DEFAULTS.progressIndicatorBgColor,
+  },
 };
--- a/apps/web/locales/de-DE.json
+++ b/apps/web/locales/de-DE.json
@@ -1151,7 +1151,6 @@
        "add_fallback_placeholder": "Platzhalter hinzufügen, falls kein Wert zur Verfügung steht.",
        "add_hidden_field_id": "Verstecktes Feld ID hinzufügen",
        "add_highlight_border": "Rahmen hinzufügen",
-        "add_highlight_border_description": "Füge deiner Umfragekarte einen äußeren Rahmen hinzu.",
        "add_logic": "Logik hinzufügen",
        "add_none_of_the_above": "Füge \"Keine der oben genannten Optionen\" hinzu",
        "add_option": "Option hinzufügen",
@@ -1223,15 +1222,8 @@
        "change_background": "Hintergrund ändern",
        "change_question_type": "Fragetyp ändern",
        "change_survey_type": "Die Änderung des Umfragetypen kann vorhandenen Zugriff beeinträchtigen",
-        "change_the_background_color_of_the_card": "Hintergrundfarbe der Karte ändern.",
-        "change_the_background_color_of_the_input_fields": "Hintergrundfarbe der Eingabefelder ändern.",
        "change_the_background_to_a_color_image_or_animation": "Hintergrund zu einer Farbe, einem Bild oder einer Animation ändern.",
-        "change_the_border_color_of_the_card": "Randfarbe der Karte ändern.",
-        "change_the_border_color_of_the_input_fields": "Randfarbe der Eingabefelder ändern.",
-        "change_the_border_radius_of_the_card_and_the_inputs": "Radius der Ränder der Karte und der Eingabefelder ändern.",
-        "change_the_brand_color_of_the_survey": "Markenfarbe der Umfrage ändern.",
        "change_the_placement_of_this_survey": "Platzierung dieser Umfrage ändern.",
-        "change_the_question_color_of_the_survey": "Fragefarbe der Umfrage ändern.",
        "changes_saved": "Änderungen gespeichert.",
        "changing_survey_type_will_remove_existing_distribution_channels": "\"Das Ändern des Umfragetypen beeinflusst, wie er geteilt werden kann. Wenn Teilnehmer bereits Zugriffslinks für den aktuellen Typ haben, könnten sie das Zugriffsrecht nach dem Wechsel verlieren.\"",
        "checkbox_label": "Checkbox-Beschriftung",
@@ -1369,8 +1361,7 @@
        "hide_progress_bar": "Fortschrittsbalken ausblenden",
        "hide_question_settings": "Frageeinstellungen ausblenden",
        "hostname": "Hostname",
-        "how_funky_do_you_want_your_cards_in_survey_type_derived_surveys": "Wie funky sollen deine Karten in {surveyTypeDerived} Umfragen sein",
-        "if_you_need_more_please": "Wenn Sie mehr benötigen, bitte",
+        "if_you_need_more_please": "Wenn Du mehr brauchst, bitte",
        "if_you_really_want_that_answer_ask_until_you_get_it": "Weiterhin anzeigen, wenn ausgelöst, bis eine Antwort abgegeben wird.",
        "ignore_global_waiting_time": "Abkühlphase ignorieren",
        "ignore_global_waiting_time_description": "Diese Umfrage kann angezeigt werden, wenn ihre Bedingungen erfüllt sind, auch wenn kürzlich eine andere Umfrage angezeigt wurde.",
@@ -1463,7 +1454,6 @@
        "protect_survey_with_pin_description": "Nur Benutzer, die die PIN haben, können auf die Umfrage zugreifen.",
        "publish": "Veröffentlichen",
        "question": "Frage",
-        "question_color": "Fragefarbe",
        "question_deleted": "Frage gelöscht.",
        "question_duplicated": "Frage dupliziert.",
        "question_id_updated": "Frage-ID aktualisiert",
@@ -1566,7 +1556,6 @@
        "styling_set_to_theme_styles": "Styling auf Themenstile eingestellt",
        "subheading": "Zwischenüberschrift",
        "subtract": "Subtrahieren -",
-        "suggest_colors": "Farben vorschlagen",
        "survey_completed_heading": "Umfrage abgeschlossen",
        "survey_completed_subheading": "Diese kostenlose und quelloffene Umfrage wurde geschlossen",
        "survey_display_settings": "Einstellungen zur Anzeige der Umfrage",
@@ -2050,6 +2039,31 @@
      "look": {
        "add_background_color": "Hintergrundfarbe hinzufügen",
        "add_background_color_description": "Füge dem Logo-Container eine Hintergrundfarbe hinzu.",
+        "advanced_styling_field_border_radius": "Rahmenradius",
+        "advanced_styling_field_button_bg": "Button-Hintergrund",
+        "advanced_styling_field_button_text": "Button-Text",
+        "advanced_styling_field_description_color": "Beschreibungsfarbe",
+        "advanced_styling_field_description_size": "Schriftgröße der Beschreibung",
+        "advanced_styling_field_font_size": "Schriftgröße",
+        "advanced_styling_field_font_weight": "Schriftstärke",
+        "advanced_styling_field_headline_color": "Überschriftenfarbe",
+        "advanced_styling_field_headline_size": "Schriftgröße der Überschrift",
+        "advanced_styling_field_headline_weight": "Schriftstärke der Überschrift",
+        "advanced_styling_field_height": "Höhe",
+        "advanced_styling_field_indicator_bg": "Indikator-Hintergrund",
+        "advanced_styling_field_input_text": "Eingabefeld-Text",
+        "advanced_styling_field_option_bg": "Hintergrund",
+        "advanced_styling_field_option_label": "Beschriftungsfarbe",
+        "advanced_styling_field_padding_x": "Innenabstand X",
+        "advanced_styling_field_padding_y": "Innenabstand Y",
+        "advanced_styling_field_placeholder_opacity": "Platzhalter-Deckkraft",
+        "advanced_styling_field_shadow": "Schatten",
+        "advanced_styling_field_track_bg": "Track-Hintergrund",
+        "advanced_styling_field_track_height": "Track-Höhe",
+        "advanced_styling_section_buttons": "Buttons",
+        "advanced_styling_section_headlines": "Überschriften & Beschreibungen",
+        "advanced_styling_section_inputs": "Eingabefelder",
+        "advanced_styling_section_options": "Optionen (Radio/Checkbox)",
        "app_survey_placement": "Platzierung der App-Umfrage",
        "app_survey_placement_settings_description": "Ändere, wo Umfragen in deiner Web-App oder Website angezeigt werden.",
        "centered_modal_overlay_color": "Zentrierte modale Überlagerungsfarbe",
@@ -2063,6 +2077,9 @@
        "formbricks_branding_hidden": "Formbricks-Branding ist ausgeblendet.",
        "formbricks_branding_settings_description": "Wir freuen uns über deine Unterstützung, haben aber Verständnis, wenn du es ausschaltest.",
        "formbricks_branding_shown": "Formbricks-Branding wird angezeigt.",
+        "generate_theme_btn": "Generieren",
+        "generate_theme_confirmation": "Möchten Sie ein passendes Farbschema basierend auf Ihrer Markenfarbe generieren? Dies überschreibt Ihre aktuellen Farbeinstellungen.",
+        "generate_theme_header": "Farbschema generieren?",
        "logo_removed_successfully": "Logo erfolgreich entfernt",
        "logo_settings_description": "Lade dein Firmenlogo hoch, um Umfragen und Link-Vorschauen zu branden.",
        "logo_updated_successfully": "Logo erfolgreich aktualisiert",
@@ -2077,6 +2094,7 @@
        "show_formbricks_branding_in": "Formbricks-Branding in {type}-Umfragen anzeigen",
        "show_powered_by_formbricks": "\"Powered by Formbricks\"-Signatur anzeigen",
        "styling_updated_successfully": "Styling erfolgreich aktualisiert",
+        "suggest_colors": "Farben vorschlagen",
        "theme": "Theme",
        "theme_settings_description": "Erstelle ein Style-Theme für alle Umfragen. Du kannst für jede Umfrage individuelles Styling aktivieren."
      },
--- a/apps/web/locales/en-US.json
+++ b/apps/web/locales/en-US.json
@@ -1151,7 +1151,7 @@
        "add_fallback_placeholder": "Add a placeholder to show if there is no value to recall.",
        "add_hidden_field_id": "Add hidden field ID",
        "add_highlight_border": "Add highlight border",
-        "add_highlight_border_description": "Add an outer border to your survey card.",
+
        "add_logic": "Add logic",
        "add_none_of_the_above": "Add \"None of the Above\"",
        "add_option": "Add option",
@@ -1223,15 +1223,11 @@
        "change_background": "Change background",
        "change_question_type": "Change question type",
        "change_survey_type": "Switching survey type affects existing access",
-        "change_the_background_color_of_the_card": "Change the background color of the card.",
-        "change_the_background_color_of_the_input_fields": "Change the background color of the input fields.",
+
        "change_the_background_to_a_color_image_or_animation": "Change the background to a color, image or animation.",
-        "change_the_border_color_of_the_card": "Change the border color of the card.",
-        "change_the_border_color_of_the_input_fields": "Change the border color of the input fields.",
-        "change_the_border_radius_of_the_card_and_the_inputs": "Change the border radius of the card and the inputs.",
-        "change_the_brand_color_of_the_survey": "Change the brand color of the survey.",
+
        "change_the_placement_of_this_survey": "Change the placement of this survey.",
-        "change_the_question_color_of_the_survey": "Change the question color of the survey.",
+
        "changes_saved": "Changes saved.",
        "changing_survey_type_will_remove_existing_distribution_channels": "Changing the survey type will affect how it can be shared. If respondents already have access links for the current type, they may lose access after the switch.",
        "checkbox_label": "Checkbox Label",
@@ -1369,7 +1365,7 @@
        "hide_progress_bar": "Hide progress bar",
        "hide_question_settings": "Hide Question settings",
        "hostname": "Hostname",
-        "how_funky_do_you_want_your_cards_in_survey_type_derived_surveys": "How funky do you want your cards in {surveyTypeDerived} Surveys",
+
        "if_you_need_more_please": "If you need more, please",
        "if_you_really_want_that_answer_ask_until_you_get_it": "Keep showing whenever triggered until a response is submitted.",
        "ignore_global_waiting_time": "Ignore Cooldown Period",
@@ -1463,7 +1459,7 @@
        "protect_survey_with_pin_description": "Only users who have the PIN can access the survey.",
        "publish": "Publish",
        "question": "Question",
-        "question_color": "Question color",
+
        "question_deleted": "Question deleted.",
        "question_duplicated": "Question duplicated.",
        "question_id_updated": "Question ID updated",
@@ -1566,7 +1562,7 @@
        "styling_set_to_theme_styles": "Styling set to theme styles",
        "subheading": "Subheading",
        "subtract": "Subtract -",
-        "suggest_colors": "Suggest colors",
+
        "survey_completed_heading": "Survey Completed",
        "survey_completed_subheading": "This free & open-source survey has been closed",
        "survey_display_settings": "Survey Display Settings",
@@ -2050,6 +2046,37 @@
      "look": {
        "add_background_color": "Add background color",
        "add_background_color_description": "Add a background color to the logo container.",
+
+        "advanced_styling_field_border_radius": "Border Radius",
+
+        "advanced_styling_field_button_bg": "Button Background",
+        "advanced_styling_field_button_text": "Button Text",
+        "advanced_styling_field_description_color": "Description Color",
+        "advanced_styling_field_description_size": "Description Font Size",
+
+        "advanced_styling_field_font_size": "Font Size",
+        "advanced_styling_field_font_weight": "Font Weight",
+        "advanced_styling_field_headline_color": "Headline Color",
+        "advanced_styling_field_headline_size": "Headline Font Size",
+        "advanced_styling_field_headline_weight": "Headline Font Weight",
+        "advanced_styling_field_height": "Height",
+        "advanced_styling_field_indicator_bg": "Indicator Background",
+
+        "advanced_styling_field_input_text": "Input Text",
+        "advanced_styling_field_option_bg": "Background",
+        "advanced_styling_field_option_label": "Label Color",
+        "advanced_styling_field_padding_x": "Padding X",
+        "advanced_styling_field_padding_y": "Padding Y",
+        "advanced_styling_field_placeholder_opacity": "Placeholder Opacity",
+        "advanced_styling_field_shadow": "Shadow",
+        "advanced_styling_field_track_bg": "Track Background",
+        "advanced_styling_field_track_height": "Track Height",
+
+        "advanced_styling_section_buttons": "Buttons",
+        "advanced_styling_section_headlines": "Headlines & Descriptions",
+        "advanced_styling_section_inputs": "Inputs",
+        "advanced_styling_section_options": "Options (Radio/Checkbox)",
+
        "app_survey_placement": "App Survey Placement",
        "app_survey_placement_settings_description": "Change where surveys will be shown in your web app or website.",
        "centered_modal_overlay_color": "Centered modal overlay color",
@@ -2063,6 +2090,9 @@
        "formbricks_branding_hidden": "Formbricks branding is hidden.",
        "formbricks_branding_settings_description": "We love your support but understand if you toggle it off.",
        "formbricks_branding_shown": "Formbricks branding is shown.",
+        "generate_theme_btn": "Generate",
+        "generate_theme_confirmation": "Would you like to generate a matching color theme based on your brand color? This will overwrite your current color settings.",
+        "generate_theme_header": "Generate Color Theme?",
        "logo_removed_successfully": "Logo removed successfully",
        "logo_settings_description": "Upload your company logo to brand surveys and link previews.",
        "logo_updated_successfully": "Logo updated successfully",
@@ -2077,6 +2107,7 @@
        "show_formbricks_branding_in": "Show Formbricks Branding in {type} surveys",
        "show_powered_by_formbricks": "Show 'Powered by Formbricks' Signature",
        "styling_updated_successfully": "Styling updated successfully",
+        "suggest_colors": "Suggest colors",
        "theme": "Theme",
        "theme_settings_description": "Create a style theme for all surveys. You can enable custom styling for each survey."
      },
--- a/apps/web/locales/es-ES.json
+++ b/apps/web/locales/es-ES.json
@@ -1151,7 +1151,6 @@
        "add_fallback_placeholder": "Añadir un marcador de posición para mostrar si no hay valor que recuperar.",
        "add_hidden_field_id": "Añadir ID de campo oculto",
        "add_highlight_border": "Añadir borde destacado",
-        "add_highlight_border_description": "Añadir un borde exterior a tu tarjeta de encuesta.",
        "add_logic": "Añadir lógica",
        "add_none_of_the_above": "Añadir \"Ninguna de las anteriores\"",
        "add_option": "Añadir opción",
@@ -1223,15 +1222,8 @@
        "change_background": "Cambiar fondo",
        "change_question_type": "Cambiar tipo de pregunta",
        "change_survey_type": "Cambiar el tipo de encuesta afecta al acceso existente",
-        "change_the_background_color_of_the_card": "Cambiar el color de fondo de la tarjeta.",
-        "change_the_background_color_of_the_input_fields": "Cambiar el color de fondo de los campos de entrada.",
        "change_the_background_to_a_color_image_or_animation": "Cambiar el fondo a un color, imagen o animación.",
-        "change_the_border_color_of_the_card": "Cambiar el color del borde de la tarjeta.",
-        "change_the_border_color_of_the_input_fields": "Cambiar el color del borde de los campos de entrada.",
-        "change_the_border_radius_of_the_card_and_the_inputs": "Cambiar el radio del borde de la tarjeta y las entradas.",
-        "change_the_brand_color_of_the_survey": "Cambiar el color de marca de la encuesta.",
        "change_the_placement_of_this_survey": "Cambiar la ubicación de esta encuesta.",
-        "change_the_question_color_of_the_survey": "Cambiar el color de las preguntas de la encuesta.",
        "changes_saved": "Cambios guardados.",
        "changing_survey_type_will_remove_existing_distribution_channels": "Cambiar el tipo de encuesta afectará a cómo se puede compartir. Si los encuestados ya tienen enlaces de acceso para el tipo actual, podrían perder el acceso después del cambio.",
        "checkbox_label": "Etiqueta de casilla de verificación",
@@ -1369,7 +1361,6 @@
        "hide_progress_bar": "Ocultar barra de progreso",
        "hide_question_settings": "Ocultar ajustes de la pregunta",
        "hostname": "Nombre de host",
-        "how_funky_do_you_want_your_cards_in_survey_type_derived_surveys": "¿Cuánto estilo quieres darle a tus tarjetas en las encuestas de tipo {surveyTypeDerived}?",
        "if_you_need_more_please": "Si necesitas más, por favor",
        "if_you_really_want_that_answer_ask_until_you_get_it": "Seguir mostrando cuando se active hasta que se envíe una respuesta.",
        "ignore_global_waiting_time": "Ignorar periodo de espera",
@@ -1463,7 +1454,6 @@
        "protect_survey_with_pin_description": "Solo los usuarios que tengan el PIN pueden acceder a la encuesta.",
        "publish": "Publicar",
        "question": "Pregunta",
-        "question_color": "Color de la pregunta",
        "question_deleted": "Pregunta eliminada.",
        "question_duplicated": "Pregunta duplicada.",
        "question_id_updated": "ID de pregunta actualizado",
@@ -1566,7 +1556,6 @@
        "styling_set_to_theme_styles": "Estilo configurado según los estilos del tema",
        "subheading": "Subtítulo",
        "subtract": "Restar -",
-        "suggest_colors": "Sugerir colores",
        "survey_completed_heading": "Encuesta completada",
        "survey_completed_subheading": "Esta encuesta gratuita y de código abierto ha sido cerrada",
        "survey_display_settings": "Ajustes de visualización de la encuesta",
@@ -2050,6 +2039,31 @@
      "look": {
        "add_background_color": "Añadir color de fondo",
        "add_background_color_description": "Añade un color de fondo al contenedor del logotipo.",
+        "advanced_styling_field_border_radius": "Radio del borde",
+        "advanced_styling_field_button_bg": "Fondo del botón",
+        "advanced_styling_field_button_text": "Texto del botón",
+        "advanced_styling_field_description_color": "Color de la descripción",
+        "advanced_styling_field_description_size": "Tamaño de fuente de la descripción",
+        "advanced_styling_field_font_size": "Tamaño de fuente",
+        "advanced_styling_field_font_weight": "Grosor de fuente",
+        "advanced_styling_field_headline_color": "Color del titular",
+        "advanced_styling_field_headline_size": "Tamaño de fuente del titular",
+        "advanced_styling_field_headline_weight": "Grosor de fuente del titular",
+        "advanced_styling_field_height": "Altura",
+        "advanced_styling_field_indicator_bg": "Fondo del indicador",
+        "advanced_styling_field_input_text": "Texto de entrada",
+        "advanced_styling_field_option_bg": "Fondo",
+        "advanced_styling_field_option_label": "Color de la etiqueta",
+        "advanced_styling_field_padding_x": "Relleno X",
+        "advanced_styling_field_padding_y": "Relleno Y",
+        "advanced_styling_field_placeholder_opacity": "Opacidad del marcador de posición",
+        "advanced_styling_field_shadow": "Sombra",
+        "advanced_styling_field_track_bg": "Fondo de la pista",
+        "advanced_styling_field_track_height": "Altura de la pista",
+        "advanced_styling_section_buttons": "Botones",
+        "advanced_styling_section_headlines": "Títulos y descripciones",
+        "advanced_styling_section_inputs": "Campos de entrada",
+        "advanced_styling_section_options": "Opciones (radio/casilla de verificación)",
        "app_survey_placement": "Ubicación de encuesta de aplicación",
        "app_survey_placement_settings_description": "Cambia dónde se mostrarán las encuestas en tu aplicación web o sitio web.",
        "centered_modal_overlay_color": "Color de superposición del modal centrado",
@@ -2063,6 +2077,9 @@
        "formbricks_branding_hidden": "La marca de Formbricks está oculta.",
        "formbricks_branding_settings_description": "Nos encanta tu apoyo, pero lo entendemos si lo desactivas.",
        "formbricks_branding_shown": "La marca de Formbricks se muestra.",
+        "generate_theme_btn": "Generar",
+        "generate_theme_confirmation": "¿Te gustaría generar un tema de color a juego basado en el color de tu marca? Esto sobrescribirá tu configuración de color actual.",
+        "generate_theme_header": "¿Generar tema de color?",
        "logo_removed_successfully": "Logotipo eliminado correctamente",
        "logo_settings_description": "Sube el logotipo de tu empresa para personalizar las encuestas y las vistas previas de enlaces.",
        "logo_updated_successfully": "Logotipo actualizado correctamente",
@@ -2077,6 +2094,7 @@
        "show_formbricks_branding_in": "Mostrar marca de Formbricks en encuestas de {type}",
        "show_powered_by_formbricks": "Mostrar firma 'Powered by Formbricks'",
        "styling_updated_successfully": "Estilo actualizado correctamente",
+        "suggest_colors": "Sugerir colores",
        "theme": "Tema",
        "theme_settings_description": "Crea un tema de estilo para todas las encuestas. Puedes activar el estilo personalizado para cada encuesta."
      },
--- a/apps/web/locales/fr-FR.json
+++ b/apps/web/locales/fr-FR.json
@@ -1151,7 +1151,6 @@
        "add_fallback_placeholder": "Ajouter un espace réservé à afficher s'il n'y a pas de valeur à rappeler.",
        "add_hidden_field_id": "Ajouter un champ caché ID",
        "add_highlight_border": "Ajouter une bordure de surlignage",
-        "add_highlight_border_description": "Ajoutez une bordure extérieure à votre carte d'enquête.",
        "add_logic": "Ajouter de la logique",
        "add_none_of_the_above": "Ajouter \"Aucun des éléments ci-dessus\"",
        "add_option": "Ajouter une option",
@@ -1223,15 +1222,8 @@
        "change_background": "Changer l'arrière-plan",
        "change_question_type": "Changer le type de question",
        "change_survey_type": "Le changement de type de sondage affecte l'accès existant",
-        "change_the_background_color_of_the_card": "Changez la couleur de fond de la carte.",
-        "change_the_background_color_of_the_input_fields": "Vous pouvez modifier la couleur d'arrière-plan des champs de saisie.",
        "change_the_background_to_a_color_image_or_animation": "Changez l'arrière-plan en une couleur, une image ou une animation.",
-        "change_the_border_color_of_the_card": "Changez la couleur de la bordure de la carte.",
-        "change_the_border_color_of_the_input_fields": "Vous pouvez modifier la couleur de la bordure des champs de saisie.",
-        "change_the_border_radius_of_the_card_and_the_inputs": "Vous pouvez arrondir la bordure des encadrés et des champs de saisie.",
-        "change_the_brand_color_of_the_survey": "Vous pouvez modifier la couleur dominante d'une enquête.",
        "change_the_placement_of_this_survey": "Changez le placement de cette enquête.",
-        "change_the_question_color_of_the_survey": "Vous pouvez modifier la couleur des questions d'une enquête.",
        "changes_saved": "Modifications enregistrées.",
        "changing_survey_type_will_remove_existing_distribution_channels": "Le changement du type de sondage affectera la façon dont il peut être partagé. Si les répondants ont déjà des liens d'accès pour le type actuel, ils peuvent perdre l'accès après le changement.",
        "checkbox_label": "Étiquette de case à cocher",
@@ -1369,8 +1361,7 @@
        "hide_progress_bar": "Cacher la barre de progression",
        "hide_question_settings": "Masquer les paramètres de la question",
        "hostname": "Nom d'hôte",
-        "how_funky_do_you_want_your_cards_in_survey_type_derived_surveys": "À quel point voulez-vous que vos cartes soient funky dans les enquêtes {surveyTypeDerived}",
-        "if_you_need_more_please": "Si vous avez besoin de plus, veuillez",
+        "if_you_need_more_please": "Si vous en avez besoin de plus, s'il vous plaît",
        "if_you_really_want_that_answer_ask_until_you_get_it": "Continuer à afficher à chaque déclenchement jusqu'à ce qu'une réponse soit soumise.",
        "ignore_global_waiting_time": "Ignorer la période de refroidissement",
        "ignore_global_waiting_time_description": "Cette enquête peut s'afficher chaque fois que ses conditions sont remplies, même si une autre enquête a été affichée récemment.",
@@ -1463,7 +1454,6 @@
        "protect_survey_with_pin_description": "Seules les personnes ayant le code PIN peuvent accéder à l'enquête.",
        "publish": "Publier",
        "question": "Question",
-        "question_color": "Couleur des questions",
        "question_deleted": "Question supprimée.",
        "question_duplicated": "Question dupliquée.",
        "question_id_updated": "ID de la question mis à jour",
@@ -1566,7 +1556,6 @@
        "styling_set_to_theme_styles": "Style défini sur les styles du thème",
        "subheading": "Sous-titre",
        "subtract": "Soustraire -",
-        "suggest_colors": "Suggérer des couleurs",
        "survey_completed_heading": "Enquête terminée",
        "survey_completed_subheading": "Cette enquête gratuite et open-source a été fermée",
        "survey_display_settings": "Paramètres d'affichage de l'enquête",
@@ -2050,6 +2039,31 @@
      "look": {
        "add_background_color": "Ajouter une couleur d'arrière-plan",
        "add_background_color_description": "Ajoutez une couleur d'arrière-plan au conteneur du logo.",
+        "advanced_styling_field_border_radius": "Rayon de bordure",
+        "advanced_styling_field_button_bg": "Arrière-plan du bouton",
+        "advanced_styling_field_button_text": "Texte du bouton",
+        "advanced_styling_field_description_color": "Couleur de description",
+        "advanced_styling_field_description_size": "Taille de police de description",
+        "advanced_styling_field_font_size": "Taille de police",
+        "advanced_styling_field_font_weight": "Graisse de police",
+        "advanced_styling_field_headline_color": "Couleur du titre",
+        "advanced_styling_field_headline_size": "Taille de police du titre",
+        "advanced_styling_field_headline_weight": "Graisse de police du titre",
+        "advanced_styling_field_height": "Hauteur",
+        "advanced_styling_field_indicator_bg": "Arrière-plan de l'indicateur",
+        "advanced_styling_field_input_text": "Texte du champ de saisie",
+        "advanced_styling_field_option_bg": "Arrière-plan",
+        "advanced_styling_field_option_label": "Couleur du libellé",
+        "advanced_styling_field_padding_x": "Marge intérieure X",
+        "advanced_styling_field_padding_y": "Marge intérieure Y",
+        "advanced_styling_field_placeholder_opacity": "Opacité du texte indicatif",
+        "advanced_styling_field_shadow": "Ombre",
+        "advanced_styling_field_track_bg": "Arrière-plan de la piste",
+        "advanced_styling_field_track_height": "Hauteur de la piste",
+        "advanced_styling_section_buttons": "Boutons",
+        "advanced_styling_section_headlines": "Titres et descriptions",
+        "advanced_styling_section_inputs": "Champs de saisie",
+        "advanced_styling_section_options": "Options (bouton radio/case à cocher)",
        "app_survey_placement": "Placement du sondage d'application",
        "app_survey_placement_settings_description": "Modifiez l'emplacement où les sondages seront affichés dans votre application web ou site web.",
        "centered_modal_overlay_color": "Couleur de superposition modale centrée",
@@ -2063,6 +2077,9 @@
        "formbricks_branding_hidden": "Le logo Formbricks est masqué.",
        "formbricks_branding_settings_description": "Nous apprécions votre soutien mais comprenons si vous choisissez de le désactiver.",
        "formbricks_branding_shown": "Le logo Formbricks est affiché.",
+        "generate_theme_btn": "Générer",
+        "generate_theme_confirmation": "Souhaitez-vous générer un thème de couleurs correspondant basé sur la couleur de votre marque ? Cela écrasera vos paramètres de couleur actuels.",
+        "generate_theme_header": "Générer un thème de couleurs ?",
        "logo_removed_successfully": "Logo supprimé avec succès",
        "logo_settings_description": "Téléchargez le logo de votre entreprise pour personnaliser les enquêtes et les aperçus de liens.",
        "logo_updated_successfully": "Logo mis à jour avec succès",
@@ -2077,6 +2094,7 @@
        "show_formbricks_branding_in": "Afficher le logo Formbricks dans les enquêtes {type}",
        "show_powered_by_formbricks": "Afficher la signature « Propulsé par Formbricks »",
        "styling_updated_successfully": "Style mis à jour avec succès",
+        "suggest_colors": "Suggérer des couleurs",
        "theme": "Thème",
        "theme_settings_description": "Créez un thème de style pour toutes les enquêtes. Vous pouvez activer un style personnalisé pour chaque enquête."
      },
--- a/apps/web/locales/ja-JP.json
+++ b/apps/web/locales/ja-JP.json
@@ -1151,7 +1151,6 @@
        "add_fallback_placeholder": "質問がスキップされた場合に表示するプレースホルダーを追加:",
        "add_hidden_field_id": "非表示フィールドIDを追加",
        "add_highlight_border": "ハイライトボーダーを追加",
-        "add_highlight_border_description": "フォームカードに外側のボーダーを追加します。",
        "add_logic": "ロジックを追加",
        "add_none_of_the_above": "\"いずれも該当しません\" を追加",
        "add_option": "オプションを追加",
@@ -1223,15 +1222,8 @@
        "change_background": "背景を変更",
        "change_question_type": "質問の種類を変更",
        "change_survey_type": "フォームの種類を変更すると、既存のアクセスに影響します",
-        "change_the_background_color_of_the_card": "カードの背景色を変更します。",
-        "change_the_background_color_of_the_input_fields": "入力フィールドの背景色を変更します。",
        "change_the_background_to_a_color_image_or_animation": "背景を色、画像、またはアニメーションに変更します。",
-        "change_the_border_color_of_the_card": "カードの枠線の色を変更します。",
-        "change_the_border_color_of_the_input_fields": "入力フィールドの枠線の色を変更します。",
-        "change_the_border_radius_of_the_card_and_the_inputs": "カードと入力の角丸を変更します。",
-        "change_the_brand_color_of_the_survey": "フォームのブランドカラーを変更します。",
        "change_the_placement_of_this_survey": "このフォームの配置を変更します。",
-        "change_the_question_color_of_the_survey": "フォームの質問の色を変更します。",
        "changes_saved": "変更を保存しました。",
        "changing_survey_type_will_remove_existing_distribution_channels": "フォームの種類を変更すると、共有方法に影響します。回答者が現在のタイプのアクセスリンクをすでに持っている場合、切り替え後にアクセスを失う可能性があります。",
        "checkbox_label": "チェックボックスのラベル",
@@ -1369,7 +1361,6 @@
        "hide_progress_bar": "プログレスバーを非表示",
        "hide_question_settings": "質問設定を非表示",
        "hostname": "ホスト名",
-        "how_funky_do_you_want_your_cards_in_survey_type_derived_surveys": "{surveyTypeDerived} フォームのカードをどれくらいユニークにしますか",
        "if_you_need_more_please": "さらに必要な場合は、",
        "if_you_really_want_that_answer_ask_until_you_get_it": "回答が提出されるまで、トリガーされるたびに表示し続けます。",
        "ignore_global_waiting_time": "クールダウン期間を無視",
@@ -1463,7 +1454,6 @@
        "protect_survey_with_pin_description": "PINを持つユーザーのみがフォームにアクセスできます。",
        "publish": "公開",
        "question": "質問",
-        "question_color": "質問の色",
        "question_deleted": "質問を削除しました。",
        "question_duplicated": "質問を複製しました。",
        "question_id_updated": "質問IDを更新しました",
@@ -1566,7 +1556,6 @@
        "styling_set_to_theme_styles": "スタイルをテーマのスタイルに設定しました",
        "subheading": "サブ見出し",
        "subtract": "減算 -",
-        "suggest_colors": "色を提案",
        "survey_completed_heading": "フォームが完了しました",
        "survey_completed_subheading": "この無料のオープンソースフォームは閉鎖されました",
        "survey_display_settings": "フォーム表示設定",
@@ -2050,6 +2039,31 @@
      "look": {
        "add_background_color": "背景色を追加",
        "add_background_color_description": "ロゴコンテナに背景色を追加します。",
+        "advanced_styling_field_border_radius": "角の丸み",
+        "advanced_styling_field_button_bg": "ボタンの背景",
+        "advanced_styling_field_button_text": "ボタンのテキスト",
+        "advanced_styling_field_description_color": "説明の色",
+        "advanced_styling_field_description_size": "説明のフォントサイズ",
+        "advanced_styling_field_font_size": "フォントサイズ",
+        "advanced_styling_field_font_weight": "フォントの太さ",
+        "advanced_styling_field_headline_color": "見出しの色",
+        "advanced_styling_field_headline_size": "見出しのフォントサイズ",
+        "advanced_styling_field_headline_weight": "見出しのフォントの太さ",
+        "advanced_styling_field_height": "高さ",
+        "advanced_styling_field_indicator_bg": "インジケーターの背景",
+        "advanced_styling_field_input_text": "入力のテキスト",
+        "advanced_styling_field_option_bg": "背景",
+        "advanced_styling_field_option_label": "ラベルの色",
+        "advanced_styling_field_padding_x": "水平方向の余白",
+        "advanced_styling_field_padding_y": "垂直方向の余白",
+        "advanced_styling_field_placeholder_opacity": "プレースホルダーの不透明度",
+        "advanced_styling_field_shadow": "シャドウ",
+        "advanced_styling_field_track_bg": "トラック背景",
+        "advanced_styling_field_track_height": "トラック高さ",
+        "advanced_styling_section_buttons": "ボタン",
+        "advanced_styling_section_headlines": "見出し&説明",
+        "advanced_styling_section_inputs": "入力フィールド",
+        "advanced_styling_section_options": "選択肢(ラジオ/チェックボックス)",
        "app_survey_placement": "アプリ内フォームの配置",
        "app_survey_placement_settings_description": "Webアプリまたはウェブサイトでフォームを表示する場所を変更します。",
        "centered_modal_overlay_color": "中央モーダルのオーバーレイ色",
@@ -2063,6 +2077,9 @@
        "formbricks_branding_hidden": "Formbricksブランディングは非表示です。",
        "formbricks_branding_settings_description": "あなたのサポートに感謝していますが、オフにすることもご理解いただけます。",
        "formbricks_branding_shown": "Formbricksブランディングは表示されています。",
+        "generate_theme_btn": "生成",
+        "generate_theme_confirmation": "ブランドカラーに基づいて、マッチングカラーテーマを生成しますか？現在のカラー設定は上書きされます。",
+        "generate_theme_header": "カラーテーマを生成しますか？",
        "logo_removed_successfully": "ロゴを正常に削除しました",
        "logo_settings_description": "会社のロゴをアップロードして、アンケートとリンクプレビューにブランディングを適用します。",
        "logo_updated_successfully": "ロゴを正常に更新しました",
@@ -2077,6 +2094,7 @@
        "show_formbricks_branding_in": "{type}アンケートにFormbricksブランディングを表示",
        "show_powered_by_formbricks": "「Powered by Formbricks」署名を表示",
        "styling_updated_successfully": "スタイルを正常に更新しました",
+        "suggest_colors": "色を提案",
        "theme": "テーマ",
        "theme_settings_description": "すべてのアンケート用のスタイルテーマを作成します。各アンケートでカスタムスタイルを有効にできます。"
      },
--- a/apps/web/locales/nl-NL.json
+++ b/apps/web/locales/nl-NL.json
@@ -1151,7 +1151,6 @@
        "add_fallback_placeholder": "Voeg een tijdelijke aanduiding toe om aan te geven of er geen waarde is om te onthouden.",
        "add_hidden_field_id": "Voeg een verborgen veld-ID toe",
        "add_highlight_border": "Markeerrand toevoegen",
-        "add_highlight_border_description": "Voeg een buitenrand toe aan uw enquêtekaart.",
        "add_logic": "Voeg logica toe",
        "add_none_of_the_above": "Voeg 'Geen van bovenstaande' toe",
        "add_option": "Optie toevoegen",
@@ -1223,15 +1222,8 @@
        "change_background": "Achtergrond wijzigen",
        "change_question_type": "Vraagtype wijzigen",
        "change_survey_type": "Als u van enquêtetype verandert, heeft dit invloed op de bestaande toegang",
-        "change_the_background_color_of_the_card": "Verander de achtergrondkleur van de kaart.",
-        "change_the_background_color_of_the_input_fields": "Verander de achtergrondkleur van de invoervelden.",
        "change_the_background_to_a_color_image_or_animation": "Verander de achtergrond in een kleur, afbeelding of animatie.",
-        "change_the_border_color_of_the_card": "Verander de randkleur van de kaart.",
-        "change_the_border_color_of_the_input_fields": "Wijzig de randkleur van de invoervelden.",
-        "change_the_border_radius_of_the_card_and_the_inputs": "Wijzig de randradius van de kaart en de ingangen.",
-        "change_the_brand_color_of_the_survey": "Wijzig de merkkleur van de enquête.",
        "change_the_placement_of_this_survey": "Wijzig de plaatsing van deze enquête.",
-        "change_the_question_color_of_the_survey": "Verander de vraagkleur van de enquête.",
        "changes_saved": "Wijzigingen opgeslagen.",
        "changing_survey_type_will_remove_existing_distribution_channels": "Het wijzigen van het enquêtetype heeft invloed op de manier waarop deze kan worden gedeeld. Als respondenten al toegangslinks hebben voor het huidige type, verliezen ze mogelijk de toegang na de overstap.",
        "checkbox_label": "Selectievakje-label",
@@ -1369,8 +1361,7 @@
        "hide_progress_bar": "Voortgangsbalk verbergen",
        "hide_question_settings": "Vraaginstellingen verbergen",
        "hostname": "Hostnaam",
-        "how_funky_do_you_want_your_cards_in_survey_type_derived_surveys": "Hoe funky wil je je kaarten hebben in {surveyTypeDerived} Enquêtes",
-        "if_you_need_more_please": "Als je meer nodig hebt,",
+        "if_you_need_more_please": "Als u meer nodig heeft, alstublieft",
        "if_you_really_want_that_answer_ask_until_you_get_it": "Blijf tonen wanneer geactiveerd totdat een reactie is ingediend.",
        "ignore_global_waiting_time": "Afkoelperiode negeren",
        "ignore_global_waiting_time_description": "Deze enquête kan worden getoond wanneer aan de voorwaarden wordt voldaan, zelfs als er onlangs een andere enquête is getoond.",
@@ -1463,7 +1454,6 @@
        "protect_survey_with_pin_description": "Alleen gebruikers die de pincode hebben, hebben toegang tot de enquête.",
        "publish": "Publiceren",
        "question": "Vraag",
-        "question_color": "Vraag kleur",
        "question_deleted": "Vraag verwijderd.",
        "question_duplicated": "Vraag dubbel gesteld.",
        "question_id_updated": "Vraag-ID bijgewerkt",
@@ -1566,7 +1556,6 @@
        "styling_set_to_theme_styles": "Styling ingesteld op themastijlen",
        "subheading": "Ondertitel",
        "subtract": "Aftrekken -",
-        "suggest_colors": "Stel kleuren voor",
        "survey_completed_heading": "Enquête voltooid",
        "survey_completed_subheading": "Deze gratis en open source-enquête is gesloten",
        "survey_display_settings": "Enquêteweergave-instellingen",
@@ -2050,6 +2039,31 @@
      "look": {
        "add_background_color": "Achtergrondkleur toevoegen",
        "add_background_color_description": "Voeg een achtergrondkleur toe aan de logocontainer.",
+        "advanced_styling_field_border_radius": "Hoekradius",
+        "advanced_styling_field_button_bg": "Knop achtergrond",
+        "advanced_styling_field_button_text": "Knop tekst",
+        "advanced_styling_field_description_color": "Beschrijving kleur",
+        "advanced_styling_field_description_size": "Beschrijving lettergrootte",
+        "advanced_styling_field_font_size": "Lettergrootte",
+        "advanced_styling_field_font_weight": "Letterdikte",
+        "advanced_styling_field_headline_color": "Kop kleur",
+        "advanced_styling_field_headline_size": "Kop lettergrootte",
+        "advanced_styling_field_headline_weight": "Kop letterdikte",
+        "advanced_styling_field_height": "Hoogte",
+        "advanced_styling_field_indicator_bg": "Indicator achtergrond",
+        "advanced_styling_field_input_text": "Invoer tekst",
+        "advanced_styling_field_option_bg": "Achtergrond",
+        "advanced_styling_field_option_label": "Label kleur",
+        "advanced_styling_field_padding_x": "Padding X",
+        "advanced_styling_field_padding_y": "Padding Y",
+        "advanced_styling_field_placeholder_opacity": "Placeholder transparantie",
+        "advanced_styling_field_shadow": "Schaduw",
+        "advanced_styling_field_track_bg": "Achtergrond van balk",
+        "advanced_styling_field_track_height": "Hoogte van balk",
+        "advanced_styling_section_buttons": "Knoppen",
+        "advanced_styling_section_headlines": "Koppen & beschrijvingen",
+        "advanced_styling_section_inputs": "Invoervelden",
+        "advanced_styling_section_options": "Opties (radio/checkbox)",
        "app_survey_placement": "App-enquête plaatsing",
        "app_survey_placement_settings_description": "Wijzig waar enquêtes worden weergegeven in uw web-app of website.",
        "centered_modal_overlay_color": "Gecentreerde modale overlaykleur",
@@ -2063,6 +2077,9 @@
        "formbricks_branding_hidden": "Formbricks-branding is verborgen.",
        "formbricks_branding_settings_description": "We waarderen uw steun, maar begrijpen het als u dit uitschakelt.",
        "formbricks_branding_shown": "Formbricks-branding wordt weergegeven.",
+        "generate_theme_btn": "Genereren",
+        "generate_theme_confirmation": "Wil je een bijpassend kleurthema genereren op basis van je merkkleur? Dit overschrijft je huidige kleurinstellingen.",
+        "generate_theme_header": "Kleurthema genereren?",
        "logo_removed_successfully": "Logo succesvol verwijderd",
        "logo_settings_description": "Upload uw bedrijfslogo om enquêtes en linkvoorbeelden te voorzien van uw huisstijl.",
        "logo_updated_successfully": "Logo succesvol bijgewerkt",
@@ -2077,6 +2094,7 @@
        "show_formbricks_branding_in": "Toon Formbricks-branding in {type} enquêtes",
        "show_powered_by_formbricks": "Toon 'Powered by Formbricks' handtekening",
        "styling_updated_successfully": "Styling succesvol bijgewerkt",
+        "suggest_colors": "Stel kleuren voor",
        "theme": "Thema",
        "theme_settings_description": "Maak een stijlthema voor alle enquêtes. Je kunt aangepaste styling inschakelen voor elke enquête."
      },
--- a/apps/web/locales/pt-BR.json
+++ b/apps/web/locales/pt-BR.json
@@ -1151,7 +1151,6 @@
        "add_fallback_placeholder": "Adicionar um texto padrão para mostrar se a pergunta for ignorada:",
        "add_hidden_field_id": "Adicionar campo oculto ID",
        "add_highlight_border": "Adicionar borda de destaque",
-        "add_highlight_border_description": "Adicione uma borda externa ao seu cartão de pesquisa.",
        "add_logic": "Adicionar lógica",
        "add_none_of_the_above": "Adicionar \"Nenhuma das opções acima\"",
        "add_option": "Adicionar opção",
@@ -1223,15 +1222,8 @@
        "change_background": "Mudar fundo",
        "change_question_type": "Mudar tipo de pergunta",
        "change_survey_type": "Alterar o tipo de pesquisa afeta o acesso existente",
-        "change_the_background_color_of_the_card": "Muda a cor de fundo do cartão.",
-        "change_the_background_color_of_the_input_fields": "Mude a cor de fundo dos campos de entrada.",
        "change_the_background_to_a_color_image_or_animation": "Mude o fundo para uma cor, imagem ou animação.",
-        "change_the_border_color_of_the_card": "Muda a cor da borda do cartão.",
-        "change_the_border_color_of_the_input_fields": "Mude a cor da borda dos campos de entrada.",
-        "change_the_border_radius_of_the_card_and_the_inputs": "Muda o raio da borda do card e dos inputs.",
-        "change_the_brand_color_of_the_survey": "Muda a cor da marca da pesquisa.",
        "change_the_placement_of_this_survey": "Muda a posição dessa pesquisa.",
-        "change_the_question_color_of_the_survey": "Muda a cor da pergunta da pesquisa.",
        "changes_saved": "Mudanças salvas.",
        "changing_survey_type_will_remove_existing_distribution_channels": "Alterar o tipo de pesquisa afetará a forma como ela pode ser compartilhada. Se os respondentes já tiverem links de acesso para o tipo atual, podem perder o acesso após a mudança.",
        "checkbox_label": "Rótulo da Caixa de Seleção",
@@ -1369,7 +1361,6 @@
        "hide_progress_bar": "Esconder barra de progresso",
        "hide_question_settings": "Ocultar configurações da pergunta",
        "hostname": "nome do host",
-        "how_funky_do_you_want_your_cards_in_survey_type_derived_surveys": "Quão descoladas você quer suas cartas em Pesquisas {surveyTypeDerived}",
        "if_you_need_more_please": "Se você precisar de mais, por favor",
        "if_you_really_want_that_answer_ask_until_you_get_it": "Continuar mostrando sempre que acionada até que uma resposta seja enviada.",
        "ignore_global_waiting_time": "Ignorar período de espera",
@@ -1463,7 +1454,6 @@
        "protect_survey_with_pin_description": "Somente usuários que têm o PIN podem acessar a pesquisa.",
        "publish": "Publicar",
        "question": "Pergunta",
-        "question_color": "Cor da pergunta",
        "question_deleted": "Pergunta deletada.",
        "question_duplicated": "Pergunta duplicada.",
        "question_id_updated": "ID da pergunta atualizado",
@@ -1566,7 +1556,6 @@
        "styling_set_to_theme_styles": "Estilo definido para os estilos do tema",
        "subheading": "Subtítulo",
        "subtract": "Subtrair -",
-        "suggest_colors": "Sugerir cores",
        "survey_completed_heading": "Pesquisa Concluída",
        "survey_completed_subheading": "Essa pesquisa gratuita e de código aberto foi encerrada",
        "survey_display_settings": "Configurações de Exibição da Pesquisa",
@@ -2050,6 +2039,31 @@
      "look": {
        "add_background_color": "Adicionar cor de fundo",
        "add_background_color_description": "Adicione uma cor de fundo ao container do logo.",
+        "advanced_styling_field_border_radius": "Raio da borda",
+        "advanced_styling_field_button_bg": "Fundo do botão",
+        "advanced_styling_field_button_text": "Texto do botão",
+        "advanced_styling_field_description_color": "Cor da descrição",
+        "advanced_styling_field_description_size": "Tamanho da fonte da descrição",
+        "advanced_styling_field_font_size": "Tamanho da fonte",
+        "advanced_styling_field_font_weight": "Peso da fonte",
+        "advanced_styling_field_headline_color": "Cor do título",
+        "advanced_styling_field_headline_size": "Tamanho da fonte do título",
+        "advanced_styling_field_headline_weight": "Peso da fonte do título",
+        "advanced_styling_field_height": "Altura",
+        "advanced_styling_field_indicator_bg": "Fundo do indicador",
+        "advanced_styling_field_input_text": "Texto da entrada",
+        "advanced_styling_field_option_bg": "Fundo",
+        "advanced_styling_field_option_label": "Cor do rótulo",
+        "advanced_styling_field_padding_x": "Espaçamento X",
+        "advanced_styling_field_padding_y": "Espaçamento Y",
+        "advanced_styling_field_placeholder_opacity": "Opacidade do placeholder",
+        "advanced_styling_field_shadow": "Sombra",
+        "advanced_styling_field_track_bg": "Fundo da trilha",
+        "advanced_styling_field_track_height": "Altura da trilha",
+        "advanced_styling_section_buttons": "Botões",
+        "advanced_styling_section_headlines": "Títulos e descrições",
+        "advanced_styling_section_inputs": "Campos de entrada",
+        "advanced_styling_section_options": "Opções (radio/checkbox)",
        "app_survey_placement": "Posicionamento da pesquisa de app",
        "app_survey_placement_settings_description": "Altere onde as pesquisas serão exibidas em seu aplicativo web ou site.",
        "centered_modal_overlay_color": "Cor de sobreposição modal centralizada",
@@ -2063,6 +2077,9 @@
        "formbricks_branding_hidden": "A marca Formbricks está oculta.",
        "formbricks_branding_settings_description": "Adoramos seu apoio, mas entendemos se você desativar.",
        "formbricks_branding_shown": "A marca Formbricks está visível.",
+        "generate_theme_btn": "Gerar",
+        "generate_theme_confirmation": "Você gostaria de gerar um tema de cores correspondente baseado na cor da sua marca? Isso substituirá suas configurações de cores atuais.",
+        "generate_theme_header": "Gerar tema de cores?",
        "logo_removed_successfully": "Logo removido com sucesso",
        "logo_settings_description": "Faça upload do logo da sua empresa para personalizar pesquisas e pré-visualizações de links.",
        "logo_updated_successfully": "Logo atualizado com sucesso",
@@ -2077,6 +2094,7 @@
        "show_formbricks_branding_in": "Mostrar marca Formbricks em pesquisas {type}",
        "show_powered_by_formbricks": "Mostrar assinatura 'Powered by Formbricks'",
        "styling_updated_successfully": "Estilo atualizado com sucesso",
+        "suggest_colors": "Sugerir cores",
        "theme": "Tema",
        "theme_settings_description": "Crie um tema de estilo para todas as pesquisas. Você pode ativar estilo personalizado para cada pesquisa."
      },
--- a/apps/web/locales/pt-PT.json
+++ b/apps/web/locales/pt-PT.json
@@ -1151,7 +1151,6 @@
        "add_fallback_placeholder": "Adicionar um espaço reservado para mostrar se não houver valor para recordar.",
        "add_hidden_field_id": "Adicionar ID do campo oculto",
        "add_highlight_border": "Adicionar borda de destaque",
-        "add_highlight_border_description": "Adicione uma borda externa ao seu cartão de inquérito.",
        "add_logic": "Adicionar lógica",
        "add_none_of_the_above": "Adicionar \"Nenhuma das Opções Acima\"",
        "add_option": "Adicionar opção",
@@ -1223,15 +1222,8 @@
        "change_background": "Alterar fundo",
        "change_question_type": "Alterar tipo de pergunta",
        "change_survey_type": "Alterar o tipo de inquérito afeta o acesso existente",
-        "change_the_background_color_of_the_card": "Alterar a cor de fundo do cartão",
-        "change_the_background_color_of_the_input_fields": "Alterar a cor de fundo dos campos de entrada",
        "change_the_background_to_a_color_image_or_animation": "Altere o fundo para uma cor, imagem ou animação",
-        "change_the_border_color_of_the_card": "Alterar a cor da borda do cartão.",
-        "change_the_border_color_of_the_input_fields": "Alterar a cor da borda dos campos de entrada",
-        "change_the_border_radius_of_the_card_and_the_inputs": "Alterar o raio da borda do cartão e dos campos de entrada",
-        "change_the_brand_color_of_the_survey": "Alterar a cor da marca do inquérito",
        "change_the_placement_of_this_survey": "Alterar a colocação deste inquérito.",
-        "change_the_question_color_of_the_survey": "Alterar a cor da pergunta do inquérito",
        "changes_saved": "Alterações guardadas.",
        "changing_survey_type_will_remove_existing_distribution_channels": "Alterar o tipo de inquérito afetará como ele pode ser partilhado. Se os respondentes já tiverem links de acesso para o tipo atual, podem perder o acesso após a mudança.",
        "checkbox_label": "Rótulo da Caixa de Seleção",
@@ -1369,7 +1361,6 @@
        "hide_progress_bar": "Ocultar barra de progresso",
        "hide_question_settings": "Ocultar definições da pergunta",
        "hostname": "Nome do host",
-        "how_funky_do_you_want_your_cards_in_survey_type_derived_surveys": "Quão extravagantes quer os seus cartões em Inquéritos {surveyTypeDerived}",
        "if_you_need_more_please": "Se precisar de mais, por favor",
        "if_you_really_want_that_answer_ask_until_you_get_it": "Continuar a mostrar sempre que acionado até que uma resposta seja submetida.",
        "ignore_global_waiting_time": "Ignorar período de espera",
@@ -1463,7 +1454,6 @@
        "protect_survey_with_pin_description": "Apenas utilizadores com o PIN podem aceder ao inquérito.",
        "publish": "Publicar",
        "question": "Pergunta",
-        "question_color": "Cor da pergunta",
        "question_deleted": "Pergunta eliminada.",
        "question_duplicated": "Pergunta duplicada.",
        "question_id_updated": "ID da pergunta atualizado",
@@ -1566,7 +1556,6 @@
        "styling_set_to_theme_styles": "Estilo definido para estilos do tema",
        "subheading": "Subtítulo",
        "subtract": "Subtrair -",
-        "suggest_colors": "Sugerir cores",
        "survey_completed_heading": "Inquérito Concluído",
        "survey_completed_subheading": "Este inquérito gratuito e de código aberto foi encerrado",
        "survey_display_settings": "Configurações de Exibição do Inquérito",
@@ -2050,6 +2039,31 @@
      "look": {
        "add_background_color": "Adicionar cor de fundo",
        "add_background_color_description": "Adicione uma cor de fundo ao contentor do logótipo.",
+        "advanced_styling_field_border_radius": "Raio da borda",
+        "advanced_styling_field_button_bg": "Fundo do botão",
+        "advanced_styling_field_button_text": "Texto do botão",
+        "advanced_styling_field_description_color": "Cor da descrição",
+        "advanced_styling_field_description_size": "Tamanho da fonte da descrição",
+        "advanced_styling_field_font_size": "Tamanho da fonte",
+        "advanced_styling_field_font_weight": "Espessura da fonte",
+        "advanced_styling_field_headline_color": "Cor do título",
+        "advanced_styling_field_headline_size": "Tamanho da fonte do título",
+        "advanced_styling_field_headline_weight": "Espessura da fonte do título",
+        "advanced_styling_field_height": "Altura",
+        "advanced_styling_field_indicator_bg": "Fundo do indicador",
+        "advanced_styling_field_input_text": "Texto do campo de entrada",
+        "advanced_styling_field_option_bg": "Fundo",
+        "advanced_styling_field_option_label": "Cor da etiqueta",
+        "advanced_styling_field_padding_x": "Espaçamento X",
+        "advanced_styling_field_padding_y": "Espaçamento Y",
+        "advanced_styling_field_placeholder_opacity": "Opacidade do marcador de posição",
+        "advanced_styling_field_shadow": "Sombra",
+        "advanced_styling_field_track_bg": "Fundo da barra",
+        "advanced_styling_field_track_height": "Altura da barra",
+        "advanced_styling_section_buttons": "Botões",
+        "advanced_styling_section_headlines": "Títulos e descrições",
+        "advanced_styling_section_inputs": "Campos de entrada",
+        "advanced_styling_section_options": "Opções (botões de opção/caixas de verificação)",
        "app_survey_placement": "Colocação do inquérito (app)",
        "app_survey_placement_settings_description": "Altere onde os inquéritos serão apresentados na sua aplicação web ou website.",
        "centered_modal_overlay_color": "Cor da sobreposição modal centralizada",
@@ -2063,6 +2077,9 @@
        "formbricks_branding_hidden": "A marca Formbricks está oculta.",
        "formbricks_branding_settings_description": "Adoramos o seu apoio, mas compreendemos se preferir desativar.",
        "formbricks_branding_shown": "A marca Formbricks está visível.",
+        "generate_theme_btn": "Gerar",
+        "generate_theme_confirmation": "Deseja gerar um tema de cores correspondente com base na cor da sua marca? Isto irá substituir as suas definições de cor atuais.",
+        "generate_theme_header": "Gerar tema de cores?",
        "logo_removed_successfully": "Logótipo removido com sucesso",
        "logo_settings_description": "Carregue o logótipo da sua empresa para personalizar inquéritos e pré-visualizações de links.",
        "logo_updated_successfully": "Logótipo atualizado com sucesso",
@@ -2077,6 +2094,7 @@
        "show_formbricks_branding_in": "Mostrar marca Formbricks em inquéritos {type}",
        "show_powered_by_formbricks": "Mostrar assinatura 'Powered by Formbricks'",
        "styling_updated_successfully": "Estilo atualizado com sucesso",
+        "suggest_colors": "Sugerir cores",
        "theme": "Tema",
        "theme_settings_description": "Crie um tema de estilo para todos os inquéritos. Pode ativar estilos personalizados para cada inquérito."
      },
--- a/apps/web/locales/ro-RO.json
+++ b/apps/web/locales/ro-RO.json
@@ -1151,7 +1151,6 @@
        "add_fallback_placeholder": "Adaugă un placeholder pentru a afișa dacă nu există valoare de reamintit",
        "add_hidden_field_id": "Adăugați ID câmp ascuns",
        "add_highlight_border": "Adaugă bordură evidențiată",
-        "add_highlight_border_description": "Adaugă o margine exterioară cardului tău de sondaj.",
        "add_logic": "Adaugă logică",
        "add_none_of_the_above": "Adăugați \"Niciuna dintre cele de mai sus\"",
        "add_option": "Adăugați opțiune",
@@ -1223,15 +1222,8 @@
        "change_background": "Schimbați fundalul",
        "change_question_type": "Schimbă tipul întrebării",
        "change_survey_type": "Schimbarea tipului chestionarului afectează accesul existent",
-        "change_the_background_color_of_the_card": "Schimbați culoarea de fundal a cardului.",
-        "change_the_background_color_of_the_input_fields": "Schimbați culoarea de fundal a câmpurilor de introducere.",
        "change_the_background_to_a_color_image_or_animation": "Schimbați fundalul cu o culoare, imagine sau animație.",
-        "change_the_border_color_of_the_card": "Schimbați culoarea bordurii cardului.",
-        "change_the_border_color_of_the_input_fields": "Schimbați culoarea bordurii câmpurilor de introducere.",
-        "change_the_border_radius_of_the_card_and_the_inputs": "Schimbați raza de rotunjire a cardului și a câmpurilor de introducere.",
-        "change_the_brand_color_of_the_survey": "Schimbați culoarea brandului chestionarului",
        "change_the_placement_of_this_survey": "Schimbă amplasarea acestui sondaj.",
-        "change_the_question_color_of_the_survey": "Schimbați culoarea întrebării chestionarului.",
        "changes_saved": "Modificările au fost salvate",
        "changing_survey_type_will_remove_existing_distribution_channels": "Schimbarea tipului chestionarului va afecta modul în care acesta poate fi distribuit. Dacă respondenții au deja linkuri de acces pentru tipul curent, aceștia ar putea pierde accesul după schimbare.",
        "checkbox_label": "Etichetă casetă de selectare",
@@ -1369,8 +1361,7 @@
        "hide_progress_bar": "Ascunde bara de progres",
        "hide_question_settings": "Ascunde setările întrebării",
        "hostname": "Nume gazdă",
-        "how_funky_do_you_want_your_cards_in_survey_type_derived_surveys": "Cât de funky doriți să fie cardurile dumneavoastră în sondajele de tip {surveyTypeDerived}",
-        "if_you_need_more_please": "Dacă aveți nevoie de mai mult, vă rugăm",
+        "if_you_need_more_please": "Dacă aveți nevoie de mai multe, vă rugăm să",
        "if_you_really_want_that_answer_ask_until_you_get_it": "Continuă afișarea ori de câte ori este declanșat până când se trimite un răspuns.",
        "ignore_global_waiting_time": "Ignoră perioada de răcire",
        "ignore_global_waiting_time_description": "Acest sondaj poate fi afișat ori de câte ori condițiile sale sunt îndeplinite, chiar dacă un alt sondaj a fost afișat recent.",
@@ -1463,7 +1454,6 @@
        "protect_survey_with_pin_description": "Doar utilizatorii care cunosc PIN-ul pot accesa sondajul.",
        "publish": "Publică",
        "question": "Întrebare",
-        "question_color": "Culoarea întrebării",
        "question_deleted": "Întrebare ștearsă.",
        "question_duplicated": "Întrebare duplicată.",
        "question_id_updated": "ID întrebare actualizat",
@@ -1566,7 +1556,6 @@
        "styling_set_to_theme_styles": "Stilizare setată la stilurile temei",
        "subheading": "Subtitlu",
        "subtract": "Scade -",
-        "suggest_colors": "Sugerați culori",
        "survey_completed_heading": "Sondaj Completat",
        "survey_completed_subheading": "Acest sondaj gratuit și open-source a fost închis",
        "survey_display_settings": "Setări de afișare a sondajului",
@@ -2050,6 +2039,31 @@
      "look": {
        "add_background_color": "Adăugați culoare de fundal",
        "add_background_color_description": "Adăugați o culoare de fundal la containerul siglei.",
+        "advanced_styling_field_border_radius": "Raza colțurilor",
+        "advanced_styling_field_button_bg": "Fundal buton",
+        "advanced_styling_field_button_text": "Text buton",
+        "advanced_styling_field_description_color": "Culoare descriere",
+        "advanced_styling_field_description_size": "Dimensiune font descriere",
+        "advanced_styling_field_font_size": "Dimensiune font",
+        "advanced_styling_field_font_weight": "Grosime font",
+        "advanced_styling_field_headline_color": "Culoare titlu",
+        "advanced_styling_field_headline_size": "Dimensiune font titlu",
+        "advanced_styling_field_headline_weight": "Grosime font titlu",
+        "advanced_styling_field_height": "Înălțime",
+        "advanced_styling_field_indicator_bg": "Fundal indicator",
+        "advanced_styling_field_input_text": "Text câmp introducere",
+        "advanced_styling_field_option_bg": "Fundal",
+        "advanced_styling_field_option_label": "Culoare etichetă",
+        "advanced_styling_field_padding_x": "Spațiere X",
+        "advanced_styling_field_padding_y": "Spațiere Y",
+        "advanced_styling_field_placeholder_opacity": "Opacitate placeholder",
+        "advanced_styling_field_shadow": "Umbră",
+        "advanced_styling_field_track_bg": "Fundal pistă",
+        "advanced_styling_field_track_height": "Înălțime pistă",
+        "advanced_styling_section_buttons": "Butoane",
+        "advanced_styling_section_headlines": "Titluri și descrieri",
+        "advanced_styling_section_inputs": "Câmpuri de introducere",
+        "advanced_styling_section_options": "Opțiuni (Radio/Checkbox)",
        "app_survey_placement": "Amplasarea sondajului în aplicație",
        "app_survey_placement_settings_description": "Schimbați unde vor fi afișate sondajele în aplicația sau site-ul dvs. web.",
        "centered_modal_overlay_color": "Culoare suprapunere modală centralizată",
@@ -2063,6 +2077,9 @@
        "formbricks_branding_hidden": "Brandingul Formbricks este ascuns.",
        "formbricks_branding_settings_description": "Ne bucurăm de susținerea ta, dar înțelegem dacă vrei să dezactivezi această opțiune.",
        "formbricks_branding_shown": "Brandingul Formbricks este afișat.",
+        "generate_theme_btn": "Generează",
+        "generate_theme_confirmation": "Doriți să generați o temă de culori asortată pe baza culorii brandului dumneavoastră? Aceasta va suprascrie setările actuale de culoare.",
+        "generate_theme_header": "Generați temă de culori?",
        "logo_removed_successfully": "Sigla a fost eliminată cu succes",
        "logo_settings_description": "Încarcă sigla companiei pentru a personaliza sondajele și previzualizările de linkuri.",
        "logo_updated_successfully": "Sigla a fost actualizată cu succes",
@@ -2077,6 +2094,7 @@
        "show_formbricks_branding_in": "Afișează brandingul Formbricks în sondajele de tip {type}",
        "show_powered_by_formbricks": "Afișează semnătura „Powered by Formbricks”",
        "styling_updated_successfully": "Stilizarea a fost actualizată cu succes",
+        "suggest_colors": "Sugerați culori",
        "theme": "Temă",
        "theme_settings_description": "Creează o temă de stil pentru toate sondajele. Poți activa stilizare personalizată pentru fiecare sondaj."
      },
--- a/apps/web/locales/ru-RU.json
+++ b/apps/web/locales/ru-RU.json
@@ -1151,7 +1151,6 @@
        "add_fallback_placeholder": "Добавить плейсхолдер, который будет показан, если нет значения для отображения.",
        "add_hidden_field_id": "Добавить скрытый ID поля",
        "add_highlight_border": "Добавить выделяющую рамку",
-        "add_highlight_border_description": "Добавьте внешнюю рамку к карточке опроса.",
        "add_logic": "Добавить логику",
        "add_none_of_the_above": "Добавить вариант «Ничего из вышеперечисленного»",
        "add_option": "Добавить вариант",
@@ -1223,15 +1222,8 @@
        "change_background": "Изменить фон",
        "change_question_type": "Изменить тип вопроса",
        "change_survey_type": "Смена типа опроса влияет на существующий доступ",
-        "change_the_background_color_of_the_card": "Изменить цвет фона карточки.",
-        "change_the_background_color_of_the_input_fields": "Изменить цвет фона полей ввода.",
        "change_the_background_to_a_color_image_or_animation": "Изменить фон на цвет, изображение или анимацию.",
-        "change_the_border_color_of_the_card": "Изменить цвет рамки карточки.",
-        "change_the_border_color_of_the_input_fields": "Изменить цвет рамки полей ввода.",
-        "change_the_border_radius_of_the_card_and_the_inputs": "Изменить скругление углов карточки и полей ввода.",
-        "change_the_brand_color_of_the_survey": "Изменить фирменный цвет опроса.",
        "change_the_placement_of_this_survey": "Изменить размещение этого опроса.",
-        "change_the_question_color_of_the_survey": "Изменить цвет вопросов в опросе.",
        "changes_saved": "Изменения сохранены.",
        "changing_survey_type_will_remove_existing_distribution_channels": "Изменение типа опроса повлияет на способы его распространения. Если у респондентов уже есть ссылки для доступа к текущему типу, после смены они могут потерять доступ.",
        "checkbox_label": "Метка флажка",
@@ -1369,8 +1361,7 @@
        "hide_progress_bar": "Скрыть индикатор прогресса",
        "hide_question_settings": "Скрыть настройки вопроса",
        "hostname": "Имя хоста",
-        "how_funky_do_you_want_your_cards_in_survey_type_derived_surveys": "Насколько необычными вы хотите сделать карточки в опросах типа {surveyTypeDerived}",
-        "if_you_need_more_please": "Если вам нужно больше, пожалуйста",
+        "if_you_need_more_please": "Если нужно больше, пожалуйста",
        "if_you_really_want_that_answer_ask_until_you_get_it": "Показывать каждый раз при срабатывании, пока не будет получен ответ.",
        "ignore_global_waiting_time": "Игнорировать период ожидания",
        "ignore_global_waiting_time_description": "Этот опрос может отображаться при выполнении условий, даже если недавно уже был показан другой опрос.",
@@ -1463,7 +1454,6 @@
        "protect_survey_with_pin_description": "Только пользователи, у которых есть PIN-код, могут получить доступ к опросу.",
        "publish": "Опубликовать",
        "question": "Вопрос",
-        "question_color": "Цвет вопроса",
        "question_deleted": "Вопрос удалён.",
        "question_duplicated": "Вопрос дублирован.",
        "question_id_updated": "ID вопроса обновлён",
@@ -1566,7 +1556,6 @@
        "styling_set_to_theme_styles": "Оформление установлено в соответствии с темой",
        "subheading": "Подзаголовок",
        "subtract": "Вычесть -",
-        "suggest_colors": "Предложить цвета",
        "survey_completed_heading": "Опрос завершён",
        "survey_completed_subheading": "Этот бесплатный и открытый опрос был закрыт",
        "survey_display_settings": "Настройки отображения опроса",
@@ -2050,6 +2039,31 @@
      "look": {
        "add_background_color": "Добавить цвет фона",
        "add_background_color_description": "Добавьте цвет фона для контейнера с логотипом.",
+        "advanced_styling_field_border_radius": "Радиус скругления",
+        "advanced_styling_field_button_bg": "Фон кнопки",
+        "advanced_styling_field_button_text": "Текст кнопки",
+        "advanced_styling_field_description_color": "Цвет описания",
+        "advanced_styling_field_description_size": "Размер шрифта описания",
+        "advanced_styling_field_font_size": "Размер шрифта",
+        "advanced_styling_field_font_weight": "Толщина шрифта",
+        "advanced_styling_field_headline_color": "Цвет заголовка",
+        "advanced_styling_field_headline_size": "Размер шрифта заголовка",
+        "advanced_styling_field_headline_weight": "Толщина шрифта заголовка",
+        "advanced_styling_field_height": "Высота",
+        "advanced_styling_field_indicator_bg": "Фон индикатора",
+        "advanced_styling_field_input_text": "Текст поля ввода",
+        "advanced_styling_field_option_bg": "Фон",
+        "advanced_styling_field_option_label": "Цвет метки",
+        "advanced_styling_field_padding_x": "Внутренний отступ по X",
+        "advanced_styling_field_padding_y": "Внутренний отступ по Y",
+        "advanced_styling_field_placeholder_opacity": "Прозрачность плейсхолдера",
+        "advanced_styling_field_shadow": "Тень",
+        "advanced_styling_field_track_bg": "Фон трека",
+        "advanced_styling_field_track_height": "Высота трека",
+        "advanced_styling_section_buttons": "Кнопки",
+        "advanced_styling_section_headlines": "Заголовки и описания",
+        "advanced_styling_section_inputs": "Поля ввода",
+        "advanced_styling_section_options": "Опции (радиокнопки/чекбоксы)",
        "app_survey_placement": "Размещение опроса в приложении",
        "app_survey_placement_settings_description": "Измените, где будут отображаться опросы в вашем веб-приложении или на сайте.",
        "centered_modal_overlay_color": "Цвет оверлея центрированного модального окна",
@@ -2063,6 +2077,9 @@
        "formbricks_branding_hidden": "Брендинг Formbricks скрыт.",
        "formbricks_branding_settings_description": "Мы ценим вашу поддержку, но понимаем, если вы захотите отключить это.",
        "formbricks_branding_shown": "Брендинг Formbricks отображается.",
+        "generate_theme_btn": "Сгенерировать",
+        "generate_theme_confirmation": "Хотите сгенерировать подходящую цветовую тему на основе цвета вашего бренда? Это действие перезапишет ваши текущие цветовые настройки.",
+        "generate_theme_header": "Сгенерировать цветовую тему?",
        "logo_removed_successfully": "Логотип успешно удалён",
        "logo_settings_description": "Загрузите логотип вашей компании для брендирования опросов и предпросмотра ссылок.",
        "logo_updated_successfully": "Логотип успешно обновлён",
@@ -2077,6 +2094,7 @@
        "show_formbricks_branding_in": "Показывать брендинг Formbricks в опросах типа {type}",
        "show_powered_by_formbricks": "Показывать подпись «Работает на Formbricks»",
        "styling_updated_successfully": "Стили успешно обновлены",
+        "suggest_colors": "Предложить цвета",
        "theme": "Тема",
        "theme_settings_description": "Создайте стиль для всех опросов. Вы можете включить индивидуальное оформление для каждого опроса."
      },
--- a/apps/web/locales/sv-SE.json
+++ b/apps/web/locales/sv-SE.json
@@ -1151,7 +1151,6 @@
        "add_fallback_placeholder": "Lägg till en platshållare att visa om det inte finns något värde att återkalla.",
        "add_hidden_field_id": "Lägg till dolt fält-ID",
        "add_highlight_border": "Lägg till markerad kant",
-        "add_highlight_border_description": "Lägg till en yttre kant till ditt enkätkort.",
        "add_logic": "Lägg till logik",
        "add_none_of_the_above": "Lägg till \"Inget av ovanstående\"",
        "add_option": "Lägg till alternativ",
@@ -1223,15 +1222,8 @@
        "change_background": "Ändra bakgrund",
        "change_question_type": "Ändra frågetyp",
        "change_survey_type": "Byte av enkättyp påverkar befintlig åtkomst",
-        "change_the_background_color_of_the_card": "Ändra kortets bakgrundsfärg.",
-        "change_the_background_color_of_the_input_fields": "Ändra inmatningsfältens bakgrundsfärg.",
        "change_the_background_to_a_color_image_or_animation": "Ändra bakgrunden till en färg, bild eller animering.",
-        "change_the_border_color_of_the_card": "Ändra kortets kantfärg.",
-        "change_the_border_color_of_the_input_fields": "Ändra inmatningsfältens kantfärg.",
-        "change_the_border_radius_of_the_card_and_the_inputs": "Ändra kantradie för kortet och inmatningsfälten.",
-        "change_the_brand_color_of_the_survey": "Ändra enkätens varumärkesfärg.",
        "change_the_placement_of_this_survey": "Ändra placeringen av denna enkät.",
-        "change_the_question_color_of_the_survey": "Ändra enkätens frågefärg.",
        "changes_saved": "Ändringar sparade.",
        "changing_survey_type_will_remove_existing_distribution_channels": "Att ändra enkättypen påverkar hur den kan delas. Om respondenter redan har åtkomstlänkar för den nuvarande typen kan de förlora åtkomst efter bytet.",
        "checkbox_label": "Kryssruteetikett",
@@ -1369,8 +1361,7 @@
        "hide_progress_bar": "Dölj framstegsindikator",
        "hide_question_settings": "Dölj frågeinställningar",
        "hostname": "Värdnamn",
-        "how_funky_do_you_want_your_cards_in_survey_type_derived_surveys": "Hur coola vill du att dina kort ska vara i {surveyTypeDerived}-enkäter",
-        "if_you_need_more_please": "Om du behöver mer, vänligen",
+        "if_you_need_more_please": "Om du behöver fler, vänligen",
        "if_you_really_want_that_answer_ask_until_you_get_it": "Fortsätt visa när villkoren är uppfyllda tills ett svar skickas in.",
        "ignore_global_waiting_time": "Ignorera väntetid",
        "ignore_global_waiting_time_description": "Denna enkät kan visas när dess villkor är uppfyllda, även om en annan enkät nyligen visats.",
@@ -1463,7 +1454,6 @@
        "protect_survey_with_pin_description": "Endast användare som har PIN-koden kan komma åt enkäten.",
        "publish": "Publicera",
        "question": "Fråga",
-        "question_color": "Frågefärg",
        "question_deleted": "Fråga borttagen.",
        "question_duplicated": "Fråga duplicerad.",
        "question_id_updated": "Fråge-ID uppdaterat",
@@ -1566,7 +1556,6 @@
        "styling_set_to_theme_styles": "Styling inställd på temastil",
        "subheading": "Underrubrik",
        "subtract": "Subtrahera -",
-        "suggest_colors": "Föreslå färger",
        "survey_completed_heading": "Enkät slutförd",
        "survey_completed_subheading": "Denna gratis och öppenkällkodsenkät har stängts",
        "survey_display_settings": "Visningsinställningar för enkät",
@@ -2050,6 +2039,31 @@
      "look": {
        "add_background_color": "Lägg till bakgrundsfärg",
        "add_background_color_description": "Lägg till en bakgrundsfärg i logobehållaren.",
+        "advanced_styling_field_border_radius": "Hörnradie",
+        "advanced_styling_field_button_bg": "Knappbakgrund",
+        "advanced_styling_field_button_text": "Knapptext",
+        "advanced_styling_field_description_color": "Beskrivningsfärg",
+        "advanced_styling_field_description_size": "Beskrivningens teckenstorlek",
+        "advanced_styling_field_font_size": "Teckenstorlek",
+        "advanced_styling_field_font_weight": "Teckentjocklek",
+        "advanced_styling_field_headline_color": "Rubrikfärg",
+        "advanced_styling_field_headline_size": "Rubrikens teckenstorlek",
+        "advanced_styling_field_headline_weight": "Rubrikens teckentjocklek",
+        "advanced_styling_field_height": "Höjd",
+        "advanced_styling_field_indicator_bg": "Indikatorbakgrund",
+        "advanced_styling_field_input_text": "Inmatningstext",
+        "advanced_styling_field_option_bg": "Bakgrund",
+        "advanced_styling_field_option_label": "Etikettfärg",
+        "advanced_styling_field_padding_x": "Horisontell utfyllnad",
+        "advanced_styling_field_padding_y": "Vertikal utfyllnad",
+        "advanced_styling_field_placeholder_opacity": "Platshållarens opacitet",
+        "advanced_styling_field_shadow": "Skugga",
+        "advanced_styling_field_track_bg": "Spårbakgrund",
+        "advanced_styling_field_track_height": "Spårhöjd",
+        "advanced_styling_section_buttons": "Knappar",
+        "advanced_styling_section_headlines": "Rubriker och beskrivningar",
+        "advanced_styling_section_inputs": "Inmatningsfält",
+        "advanced_styling_section_options": "Alternativ (radio/checkbox)",
        "app_survey_placement": "App-enkätplacering",
        "app_survey_placement_settings_description": "Ändra var enkäter visas i din webbapp eller på din webbplats.",
        "centered_modal_overlay_color": "Centrerad modal överläggsfärg",
@@ -2063,6 +2077,9 @@
        "formbricks_branding_hidden": "Formbricks-varumärket är dolt.",
        "formbricks_branding_settings_description": "Vi uppskattar ditt stöd men förstår om du vill stänga av det.",
        "formbricks_branding_shown": "Formbricks-varumärket visas.",
+        "generate_theme_btn": "Generera",
+        "generate_theme_confirmation": "Vill du skapa ett matchande färgtema baserat på din varumärkesfärg? Detta kommer att skriva över dina nuvarande färginställningar.",
+        "generate_theme_header": "Generera färgtema?",
        "logo_removed_successfully": "Logotyp borttagen",
        "logo_settings_description": "Ladda upp företagets logotyp för att profilera enkäter och länkförhandsvisningar.",
        "logo_updated_successfully": "Logotyp uppdaterad",
@@ -2077,6 +2094,7 @@
        "show_formbricks_branding_in": "Visa Formbricks-varumärket i {type}-enkäter",
        "show_powered_by_formbricks": "Visa 'Powered by Formbricks'-signatur",
        "styling_updated_successfully": "Stiluppdatering lyckades",
+        "suggest_colors": "Föreslå färger",
        "theme": "Tema",
        "theme_settings_description": "Skapa ett stilmall för alla undersökningar. Du kan aktivera anpassad stil för varje undersökning."
      },
--- a/apps/web/locales/zh-Hans-CN.json
+++ b/apps/web/locales/zh-Hans-CN.json
@@ -1151,7 +1151,6 @@
        "add_fallback_placeholder": "添加 占位符 显示 如果 没有 值以 回忆",
        "add_hidden_field_id": "添加 隐藏 字段 ID",
        "add_highlight_border": "添加 高亮 边框",
-        "add_highlight_border_description": "在 你的 调查 卡片 添加 外 边框。",
        "add_logic": "添加逻辑",
        "add_none_of_the_above": "添加 “以上 都 不 是”",
        "add_option": "添加 选项",
@@ -1223,15 +1222,8 @@
        "change_background": "更改 背景",
        "change_question_type": "更改 问题类型",
        "change_survey_type": "更改 调查 类型 会影 响 现有 访问",
-        "change_the_background_color_of_the_card": "更改 卡片 的 背景 颜色",
-        "change_the_background_color_of_the_input_fields": "更改 输入字段 的 背景颜色",
        "change_the_background_to_a_color_image_or_animation": "将 背景 更改为 颜色 、 图像 或 动画。",
-        "change_the_border_color_of_the_card": "更改 卡片 的 边框 颜色",
-        "change_the_border_color_of_the_input_fields": "更改 输入字段 的边框颜色。",
-        "change_the_border_radius_of_the_card_and_the_inputs": "更改 卡片 和 输入 的 边框 半径",
-        "change_the_brand_color_of_the_survey": "更改调查的品牌颜色",
        "change_the_placement_of_this_survey": "更改 此 调查 的 放置。",
-        "change_the_question_color_of_the_survey": "更改调查的 问题颜色",
        "changes_saved": "更改 已 保存",
        "changing_survey_type_will_remove_existing_distribution_channels": "更改 调查 类型 会影 响 分享 方式 。 如果 受访者 已经 拥有 当前 类型 的 访问 链接 ， 在 更改 之后 ，他们 可能 会 失去 访问 权限 。",
        "checkbox_label": "复选框 标签",
@@ -1369,8 +1361,7 @@
        "hide_progress_bar": "隐藏 进度 条",
        "hide_question_settings": "隐藏问题设置",
        "hostname": "主 机 名",
-        "how_funky_do_you_want_your_cards_in_survey_type_derived_surveys": "在 {surveyTypeDerived} 调查 中，您 想要 卡片 多么 有趣",
-        "if_you_need_more_please": "如果您需要更多，请",
+        "if_you_need_more_please": "如果你需要更多，请",
        "if_you_really_want_that_answer_ask_until_you_get_it": "每次触发时都会显示，直到提交回应为止。",
        "ignore_global_waiting_time": "忽略冷却期",
        "ignore_global_waiting_time_description": "只要满足条件，此调查即可显示，即使最近刚显示过其他调查。",
@@ -1463,7 +1454,6 @@
        "protect_survey_with_pin_description": "只有 拥有 PIN 的 用户 可以 访问 调查。",
        "publish": "发布",
        "question": "问题",
-        "question_color": "问题颜色",
        "question_deleted": "问题 已删除",
        "question_duplicated": "问题重复。",
        "question_id_updated": "问题 ID 更新",
@@ -1566,7 +1556,6 @@
        "styling_set_to_theme_styles": "样式 设置 为 主题 风格",
        "subheading": "子标题",
        "subtract": "减 -",
-        "suggest_colors": "建议颜色",
        "survey_completed_heading": "调查 完成",
        "survey_completed_subheading": "此 免费 & 开源 调查 已 关闭",
        "survey_display_settings": "调查显示设置",
@@ -2050,6 +2039,31 @@
      "look": {
        "add_background_color": "添加背景色",
        "add_background_color_description": "为 logo 容器添加背景色。",
+        "advanced_styling_field_border_radius": "边框圆角",
+        "advanced_styling_field_button_bg": "按钮背景色",
+        "advanced_styling_field_button_text": "按钮文字",
+        "advanced_styling_field_description_color": "描述颜色",
+        "advanced_styling_field_description_size": "描述字体大小",
+        "advanced_styling_field_font_size": "字体大小",
+        "advanced_styling_field_font_weight": "字体粗细",
+        "advanced_styling_field_headline_color": "标题颜色",
+        "advanced_styling_field_headline_size": "标题字体大小",
+        "advanced_styling_field_headline_weight": "标题字体粗细",
+        "advanced_styling_field_height": "高度",
+        "advanced_styling_field_indicator_bg": "指示器背景色",
+        "advanced_styling_field_input_text": "输入框文字",
+        "advanced_styling_field_option_bg": "选项背景色",
+        "advanced_styling_field_option_label": "选项标签颜色",
+        "advanced_styling_field_padding_x": "横向内边距",
+        "advanced_styling_field_padding_y": "纵向内边距",
+        "advanced_styling_field_placeholder_opacity": "占位符透明度",
+        "advanced_styling_field_shadow": "阴影",
+        "advanced_styling_field_track_bg": "轨道背景",
+        "advanced_styling_field_track_height": "轨道高度",
+        "advanced_styling_section_buttons": "按钮",
+        "advanced_styling_section_headlines": "标题与描述",
+        "advanced_styling_section_inputs": "输入框",
+        "advanced_styling_section_options": "选项（单选/多选）",
        "app_survey_placement": "应用调查放置位置",
        "app_survey_placement_settings_description": "更改调查在您的 Web 应用或网站中显示的位置。",
        "centered_modal_overlay_color": "居中模态遮罩层颜色",
@@ -2063,6 +2077,9 @@
        "formbricks_branding_hidden": "Formbricks 品牌标识已隐藏。",
        "formbricks_branding_settings_description": "我们很感谢您的支持，但如果您关闭它，我们也能理解。",
        "formbricks_branding_shown": "Formbricks 品牌标识已显示。",
+        "generate_theme_btn": "生成",
+        "generate_theme_confirmation": "是否要根据您的品牌色生成匹配的配色方案？这将覆盖您当前的颜色设置。",
+        "generate_theme_header": "生成配色方案？",
        "logo_removed_successfully": "logo 移除成功",
        "logo_settings_description": "上传您的公司 logo，用于品牌调查和链接预览。",
        "logo_updated_successfully": "logo 更新成功",
@@ -2077,6 +2094,7 @@
        "show_formbricks_branding_in": "在 {type} 调查中显示 Formbricks 品牌标识",
        "show_powered_by_formbricks": "显示“Powered by Formbricks”标识",
        "styling_updated_successfully": "样式更新成功",
+        "suggest_colors": "建议颜色",
        "theme": "主题",
        "theme_settings_description": "为所有问卷创建一个样式主题。你可以为每个问卷启用自定义样式。"
      },
--- a/apps/web/locales/zh-Hant-TW.json
+++ b/apps/web/locales/zh-Hant-TW.json
@@ -1151,7 +1151,6 @@
        "add_fallback_placeholder": "新增 預設 以顯示是否沒 有 值 可 回憶 。",
        "add_hidden_field_id": "新增隱藏欄位 ID",
        "add_highlight_border": "新增醒目提示邊框",
-        "add_highlight_border_description": "在您的問卷卡片新增外邊框。",
        "add_logic": "新增邏輯",
        "add_none_of_the_above": "新增 \"以上皆非\"",
        "add_option": "新增選項",
@@ -1223,15 +1222,8 @@
        "change_background": "變更背景",
        "change_question_type": "變更問題類型",
        "change_survey_type": "切換問卷類型會影響現有訪問",
-        "change_the_background_color_of_the_card": "變更卡片的背景顏色。",
-        "change_the_background_color_of_the_input_fields": "變更輸入欄位的背景顏色。",
        "change_the_background_to_a_color_image_or_animation": "將背景變更為顏色、圖片或動畫。",
-        "change_the_border_color_of_the_card": "變更卡片的邊框顏色。",
-        "change_the_border_color_of_the_input_fields": "變更輸入欄位的邊框顏色。",
-        "change_the_border_radius_of_the_card_and_the_inputs": "變更卡片和輸入的邊框半徑。",
-        "change_the_brand_color_of_the_survey": "變更問卷的品牌顏色。",
        "change_the_placement_of_this_survey": "變更此問卷的位置。",
-        "change_the_question_color_of_the_survey": "變更問卷的問題顏色。",
        "changes_saved": "已儲存變更。",
        "changing_survey_type_will_remove_existing_distribution_channels": "更改問卷類型會影響其共享方式。如果受訪者已擁有當前類型的存取連結，則在切換後可能會失去存取權限。",
        "checkbox_label": "核取方塊標籤",
@@ -1369,7 +1361,6 @@
        "hide_progress_bar": "隱藏進度列",
        "hide_question_settings": "隱藏問題設定",
        "hostname": "主機名稱",
-        "how_funky_do_you_want_your_cards_in_survey_type_derived_surveys": "您希望 '{'surveyTypeDerived'}' 問卷中的卡片有多酷炫",
        "if_you_need_more_please": "如果您需要更多，請",
        "if_you_really_want_that_answer_ask_until_you_get_it": "每次觸發時都顯示，直到提交回應為止。",
        "ignore_global_waiting_time": "忽略冷卻期",
@@ -1463,7 +1454,6 @@
        "protect_survey_with_pin_description": "只有擁有 PIN 碼的使用者才能存取問卷。",
        "publish": "發布",
        "question": "問題",
-        "question_color": "問題顏色",
        "question_deleted": "問題已刪除。",
        "question_duplicated": "問題已複製。",
        "question_id_updated": "問題 ID 已更新",
@@ -1566,7 +1556,6 @@
        "styling_set_to_theme_styles": "樣式設定為主題樣式",
        "subheading": "副標題",
        "subtract": "減 -",
-        "suggest_colors": "建議顏色",
        "survey_completed_heading": "問卷已完成",
        "survey_completed_subheading": "此免費且開源的問卷已關閉",
        "survey_display_settings": "問卷顯示設定",
@@ -2050,6 +2039,31 @@
      "look": {
        "add_background_color": "新增背景顏色",
        "add_background_color_description": "為標誌容器新增背景顏色。",
+        "advanced_styling_field_border_radius": "邊框圓角",
+        "advanced_styling_field_button_bg": "按鈕背景",
+        "advanced_styling_field_button_text": "按鈕文字",
+        "advanced_styling_field_description_color": "說明文字顏色",
+        "advanced_styling_field_description_size": "說明字體大小",
+        "advanced_styling_field_font_size": "字體大小",
+        "advanced_styling_field_font_weight": "字體粗細",
+        "advanced_styling_field_headline_color": "標題顏色",
+        "advanced_styling_field_headline_size": "標題字體大小",
+        "advanced_styling_field_headline_weight": "標題字體粗細",
+        "advanced_styling_field_height": "高度",
+        "advanced_styling_field_indicator_bg": "指示器背景",
+        "advanced_styling_field_input_text": "輸入文字",
+        "advanced_styling_field_option_bg": "選項背景",
+        "advanced_styling_field_option_label": "選項標籤顏色",
+        "advanced_styling_field_padding_x": "水平內距",
+        "advanced_styling_field_padding_y": "垂直內距",
+        "advanced_styling_field_placeholder_opacity": "預設提示透明度",
+        "advanced_styling_field_shadow": "陰影",
+        "advanced_styling_field_track_bg": "軌道背景",
+        "advanced_styling_field_track_height": "軌道高度",
+        "advanced_styling_section_buttons": "按鈕",
+        "advanced_styling_section_headlines": "標題與說明",
+        "advanced_styling_section_inputs": "輸入欄位",
+        "advanced_styling_section_options": "選項（單選／複選）",
        "app_survey_placement": "應用程式問卷位置",
        "app_survey_placement_settings_description": "變更問卷在您的網頁應用程式或網站中顯示的位置。",
        "centered_modal_overlay_color": "置中彈窗覆蓋顏色",
@@ -2063,6 +2077,9 @@
        "formbricks_branding_hidden": "Formbricks 品牌標示已隱藏。",
        "formbricks_branding_settings_description": "我們很感謝您的支持，但若您選擇關閉我們也能理解。",
        "formbricks_branding_shown": "Formbricks 品牌標示已顯示。",
+        "generate_theme_btn": "產生",
+        "generate_theme_confirmation": "您要根據您的品牌色產生一組相符的色彩主題嗎？這將會覆蓋您目前的色彩設定。",
+        "generate_theme_header": "要產生色彩主題嗎？",
        "logo_removed_successfully": "標誌已成功移除",
        "logo_settings_description": "上傳您的公司標誌，以用於問卷和連結預覽的品牌展示。",
        "logo_updated_successfully": "標誌已成功更新",
@@ -2077,6 +2094,7 @@
        "show_formbricks_branding_in": "在 {type} 問卷中顯示 Formbricks 品牌標示",
        "show_powered_by_formbricks": "顯示「Powered by Formbricks」標記",
        "styling_updated_successfully": "樣式已成功更新",
+        "suggest_colors": "建議顏色",
        "theme": "主題",
        "theme_settings_description": "為所有調查建立樣式主題。您可以為每個調查啟用自訂樣式。"
      },
--- a/apps/web/modules/ee/whitelabel/remove-branding/components/branding-settings-card.tsx
+++ b/apps/web/modules/ee/whitelabel/remove-branding/components/branding-settings-card.tsx
@@ -1,5 +1,6 @@
 import { Project } from "@prisma/client";
 import { SettingsCard } from "@/app/(app)/environments/[environmentId]/settings/components/SettingsCard";
+import { cn } from "@/lib/cn";
 import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
 import { getTranslate } from "@/lingodotdev/server";
 import { EditBranding } from "@/modules/ee/whitelabel/remove-branding/components/edit-branding";
@@ -39,6 +40,7 @@ export const BrandingSettingsCard = async ({
  return (
    <SettingsCard
      title={t("environments.workspace.look.formbricks_branding")}
+      className={cn(!isReadOnly && "max-w-7xl")}
      description={t("environments.workspace.look.formbricks_branding_settings_description")}>
      {canRemoveBranding ? (
        <div className="space-y-4">
--- a/apps/web/modules/projects/settings/look/components/theme-styling.tsx
+++ b/apps/web/modules/projects/settings/look/components/theme-styling.tsx
@@ -2,7 +2,7 @@

 import { zodResolver } from "@hookform/resolvers/zod";
 import { Project } from "@prisma/client";
-import { RotateCcwIcon } from "lucide-react";
+import { RotateCcwIcon, SparklesIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useCallback, useState } from "react";
 import { SubmitHandler, UseFormReturn, useForm } from "react-hook-form";
@@ -12,6 +12,7 @@ import { TProjectStyling, ZProjectStyling } from "@formbricks/types/project";
 import { TSurveyStyling, TSurveyType } from "@formbricks/types/surveys/types";
 import { previewSurvey } from "@/app/lib/templates";
 import { defaultStyling } from "@/lib/styling/constants";
+import { isLight, mixColor } from "@/lib/utils/colors";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { updateProjectAction } from "@/modules/projects/settings/actions";
 import { FormStylingSettings } from "@/modules/survey/editor/components/form-styling-settings";
@@ -20,6 +21,7 @@ import { AlertDialog } from "@/modules/ui/components/alert-dialog";
 import { BackgroundStylingCard } from "@/modules/ui/components/background-styling-card";
 import { Button } from "@/modules/ui/components/button";
 import { CardStylingSettings } from "@/modules/ui/components/card-styling-settings";
+import { ColorPicker } from "@/modules/ui/components/color-picker";
 import {
  FormControl,
  FormDescription,
@@ -60,11 +62,11 @@ export const ThemeStyling = ({

  const [previewSurveyType, setPreviewSurveyType] = useState<TSurveyType>("link");
  const [confirmResetStylingModalOpen, setConfirmResetStylingModalOpen] = useState(false);
+  const [confirmSuggestColorsOpen, setConfirmSuggestColorsOpen] = useState(false);

  const [formStylingOpen, setFormStylingOpen] = useState(false);
  const [cardStylingOpen, setCardStylingOpen] = useState(false);
  const [backgroundStylingOpen, setBackgroundStylingOpen] = useState(false);
-
  const onReset = useCallback(async () => {
    const updatedProjectResponse = await updateProjectAction({
      projectId: project.id,
@@ -81,7 +83,81 @@ export const ThemeStyling = ({
      const errorMessage = getFormattedErrorMessage(updatedProjectResponse);
      toast.error(errorMessage);
    }
-  }, [form, project.id, router]);
+  }, [form, project.id, router, t]);
+
+  const handleSuggestColors = () => {
+    const brandColor = form.getValues().brandColor?.light ?? "#64748b";
+
+    // Derive everything from Brand Color
+    const derivedInputBg = "#ffffff";
+    const derivedQuestionColor = "#2b2524";
+    const derivedCardBg = "#ffffff";
+    const derivedCardBorder = mixColor(brandColor, "#ffffff", 0.9) ?? "#f8fafc";
+    const derivedPageBg = mixColor(brandColor, "#ffffff", 0.95) ?? "#f8fafc";
+
+    const isBrandLight = isLight(brandColor);
+
+    // Accent derived from Brand (Monochromatic)
+    const accentColor = brandColor;
+    const derivedAccentSelected =
+      mixColor(accentColor, isBrandLight ? "#000000" : "#ffffff", 0.1) ?? accentColor;
+    // Accent for text (darkened if light)
+    const derivedAccentText = isBrandLight ? mixColor(accentColor, "#000000", 0.6) : accentColor;
+
+    // 1. General
+    form.setValue("brandColor.light", brandColor, { shouldDirty: true });
+    form.setValue("questionColor.light", derivedQuestionColor, { shouldDirty: true });
+    form.setValue("isLogoHidden", false, { shouldDirty: true });
+
+    // Accents (Synced with Brand)
+    form.setValue("accentBgColor.light", accentColor, { shouldDirty: true });
+    form.setValue("accentBgColorSelected.light", derivedAccentSelected, { shouldDirty: true });
+
+    // Headlines & Descriptions (Using Brand/Accent)
+    form.setValue("elementHeadlineColor.light", derivedAccentText, { shouldDirty: true });
+    form.setValue("elementDescriptionColor.light", derivedAccentText, { shouldDirty: true });
+
+    // 2. Buttons
+    form.setValue("buttonBgColor.light", brandColor, { shouldDirty: true });
+    form.setValue("buttonTextColor.light", isBrandLight ? "#0f172a" : "#ffffff", { shouldDirty: true });
+    form.setValue("buttonBorderRadius", 4, { shouldDirty: true });
+
+    // 3. Inputs (Card-like style)
+    form.setValue("inputColor.light", derivedInputBg, { shouldDirty: true });
+    form.setValue("inputBorderColor.light", derivedCardBorder, { shouldDirty: true }); // Match card border
+    form.setValue("inputTextColor.light", "#0f172a", { shouldDirty: true });
+    form.setValue("inputBorderRadius", 8, { shouldDirty: true }); // Match roundness
+    form.setValue("inputShadow", "0 1px 2px 0 rgb(0 0 0 / 0.05)", { shouldDirty: true }); // Add shadow
+    form.setValue("inputPaddingY", 16, { shouldDirty: true }); // More padding
+
+    // 4. Options (Checkboxes/Radio)
+    form.setValue("optionBgColor.light", derivedInputBg, { shouldDirty: true });
+    form.setValue("optionLabelColor.light", "#0f172a", { shouldDirty: true });
+    form.setValue("optionBorderRadius", 8, { shouldDirty: true }); // Match roundness
+    form.setValue("optionPaddingY", 16, { shouldDirty: true });
+
+    // 5. Card Styling
+    form.setValue("cardBackgroundColor.light", derivedCardBg, { shouldDirty: true });
+    form.setValue("cardBorderColor.light", derivedCardBorder, { shouldDirty: true });
+    form.setValue("roundness", 8, { shouldDirty: true });
+
+    // 6. Highlight / Accent (Focus states)
+    form.setValue("highlightBorderColor.light", accentColor, { shouldDirty: true });
+
+    // 7. Progress Bar
+    form.setValue("progressIndicatorBgColor.light", brandColor, { shouldDirty: true });
+    form.setValue("progressTrackBgColor.light", mixColor(brandColor, "#ffffff", 0.8), { shouldDirty: true });
+
+    // 8. Background Styling (Page Background)
+    form.setValue(
+      "background",
+      { bg: derivedPageBg, bgType: "color", brightness: 100 },
+      { shouldDirty: true }
+    );
+
+    toast.success(t("environments.workspace.look.styling_updated_successfully"));
+    setConfirmSuggestColorsOpen(false);
+  };

  const onSubmit: SubmitHandler<TProjectStyling> = async (data) => {
    const updatedProjectResponse = await updateProjectAction({
@@ -144,7 +220,37 @@ export const ThemeStyling = ({
                </div>
              </div>

-              <div className="flex flex-col gap-3 rounded-lg bg-slate-50 p-4">
+              <div className="flex flex-col gap-4 rounded-lg bg-slate-50 p-4">
+                <div className="grid grid-cols-2 items-end gap-4">
+                  <FormField
+                    control={form.control}
+                    name="brandColor.light"
+                    render={({ field }) => (
+                      <FormItem className="space-y-1">
+                        <FormLabel className="text-xs">
+                          {t("environments.surveys.edit.brand_color")}
+                        </FormLabel>
+                        <FormControl>
+                          <ColorPicker
+                            color={field.value ?? "#64748b"}
+                            onChange={(color) => field.onChange(color)}
+                            containerClass="w-full"
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                  <div className="flex flex-col gap-1">
+                    <Button
+                      type="button"
+                      variant="secondary"
+                      className="h-10 w-full justify-center gap-2 border border-slate-300 bg-white text-slate-700 shadow-sm hover:bg-slate-50"
+                      onClick={() => setConfirmSuggestColorsOpen(true)}>
+                      <SparklesIcon className="mr-2 h-4 w-4" />
+                      {t("environments.workspace.look.suggest_colors")}
+                    </Button>
+                  </div>
+                </div>
                <FormStylingSettings
                  open={formStylingOpen}
                  setOpen={setFormStylingOpen}
@@ -192,7 +298,7 @@ export const ThemeStyling = ({
          {/* Survey Preview */}

          <div className="relative w-1/2 rounded-lg bg-slate-100 pt-4">
-            <div className="sticky top-4 mb-4 h-[600px]">
+            <div className="sticky top-4 mb-4 max-h-[calc(100vh-2rem)]">
              <ThemeStylingPreviewSurvey
                survey={previewSurvey(project.name, t)}
                project={{
@@ -206,6 +312,18 @@ export const ThemeStyling = ({
            </div>
          </div>

+          {/* Confirm reset styling modal */}
+          <AlertDialog
+            open={confirmSuggestColorsOpen}
+            setOpen={setConfirmSuggestColorsOpen}
+            headerText={t("environments.workspace.look.generate_theme_header")}
+            mainText={t("environments.workspace.look.generate_theme_confirmation")}
+            confirmBtnLabel={t("environments.workspace.look.generate_theme_btn")}
+            declineBtnLabel={t("common.cancel")}
+            onConfirm={handleSuggestColors}
+            onDecline={() => setConfirmSuggestColorsOpen(false)}
+          />
+
          {/* Confirm reset styling modal */}
          <AlertDialog
            open={confirmResetStylingModalOpen}
--- a/apps/web/modules/projects/settings/look/page.tsx
+++ b/apps/web/modules/projects/settings/look/page.tsx
@@ -56,6 +56,7 @@ export const ProjectLookSettingsPage = async (props: { params: Promise<{ environ
      </SettingsCard>
      <SettingsCard
        title={t("common.logo")}
+        className={cn(!isReadOnly && "max-w-7xl")}
        description={t("environments.workspace.look.logo_settings_description")}>
        <EditLogo
          project={project}
@@ -66,6 +67,7 @@ export const ProjectLookSettingsPage = async (props: { params: Promise<{ environ
      </SettingsCard>
      <SettingsCard
        title={t("environments.workspace.look.app_survey_placement")}
+        className={cn(!isReadOnly && "max-w-7xl")}
        description={t("environments.workspace.look.app_survey_placement_settings_description")}>
        <EditPlacementForm project={project} environmentId={params.environmentId} isReadOnly={isReadOnly} />
      </SettingsCard>
--- a/apps/web/modules/survey/editor/components/form-styling-settings.tsx
+++ b/apps/web/modules/survey/editor/components/form-styling-settings.tsx
@@ -2,18 +2,20 @@

 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import * as Collapsible from "@radix-ui/react-collapsible";
-import { CheckIcon, SparklesIcon } from "lucide-react";
-import React from "react";
+import { CheckIcon } from "lucide-react";
+import React, { useState } from "react";
 import { UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { TProjectStyling } from "@formbricks/types/project";
 import { TSurveyStyling } from "@formbricks/types/surveys/types";
 import { cn } from "@/lib/cn";
-import { COLOR_DEFAULTS } from "@/lib/styling/constants";
-import { mixColor } from "@/lib/utils/colors";
-import { Button } from "@/modules/ui/components/button";
-import { ColorPicker } from "@/modules/ui/components/color-picker";
-import { FormControl, FormDescription, FormField, FormItem, FormLabel } from "@/modules/ui/components/form";
+import {
+  ColorField,
+  DimensionInput,
+  NumberField,
+  StylingSection,
+  TextField,
+} from "@/modules/ui/components/styling-fields";

 type FormStylingSettingsProps = {
  open: boolean;
@@ -31,45 +33,12 @@ export const FormStylingSettings = ({
  form,
 }: FormStylingSettingsProps) => {
  const { t } = useTranslation();
-  const brandColor = form.watch("brandColor.light") || COLOR_DEFAULTS.brandColor;
-  const background = form.watch("background");
-  const highlightBorderColor = form.watch("highlightBorderColor");
-
-  const setQuestionColor = (color: string) => form.setValue("questionColor.light", color);
-  const setInputColor = (color: string) => form.setValue("inputColor.light", color);
-  const setInputBorderColor = (color: string) => form.setValue("inputBorderColor.light", color);
-  const setCardBackgroundColor = (color: string) => form.setValue("cardBackgroundColor.light", color);
-  const setCardBorderColor = (color: string) => form.setValue("cardBorderColor.light", color);
-
-  const setBackgroundColor = (color: string) => {
-    form.setValue("background", {
-      bg: color,
-      bgType: "color",
-    });
-  };
-  const setHighlightBorderColor = (color: string) => {
-    form.setValue("highlightBorderColor", { light: mixColor(color, "#ffffff", 0.25) });
-  };
-
-  const suggestColors = () => {
-    // mix the brand color with different weights of white and set the result as the other colors
-    setQuestionColor(mixColor(brandColor, "#000000", 0.35));
-    setInputColor(mixColor(brandColor, "#ffffff", 0.92));
-    setInputBorderColor(mixColor(brandColor, "#ffffff", 0.6));
-
-    setCardBackgroundColor(mixColor(brandColor, "#ffffff", 0.97));
-    setCardBorderColor(mixColor(brandColor, "#ffffff", 0.8));
-
-    if (!background || background?.bgType === "color") {
-      setBackgroundColor(mixColor(brandColor, "#ffffff", 0.855));
-    }
-
-    if (highlightBorderColor) {
-      setHighlightBorderColor(brandColor);
-    }
-  };

  const [parent] = useAutoAnimate();
+  const [headlinesOpen, setHeadlinesOpen] = useState(false);
+  const [inputsOpen, setInputsOpen] = useState(false);
+  const [buttonsOpen, setButtonsOpen] = useState(false);
+  const [optionsOpen, setOptionsOpen] = useState(false);

  return (
    <Collapsible.Root
@@ -88,7 +57,7 @@ export const FormStylingSettings = ({
        )}>
        <div className="inline-flex px-4 py-4">
          {!isSettingsPage && (
-            <div className="flex items-center pl-2 pr-5">
+            <div className="flex items-center pr-5 pl-2">
              <CheckIcon
                strokeWidth={3}
                className="h-7 w-7 rounded-full border border-green-300 bg-green-100 p-1.5 text-green-600"
@@ -110,110 +79,190 @@ export const FormStylingSettings = ({
      <Collapsible.CollapsibleContent className="flex flex-col" ref={parent}>
        <hr className="py-1 text-slate-600" />

-        <div className="flex flex-col gap-6 p-6 pt-2">
-          <div className="flex flex-col gap-2">
-            <FormField
-              control={form.control}
-              name="brandColor.light"
-              render={({ field }) => (
-                <FormItem className="space-y-4">
-                  <div>
-                    <FormLabel>{t("environments.surveys.edit.brand_color")}</FormLabel>
-                    <FormDescription>
-                      {t("environments.surveys.edit.change_the_brand_color_of_the_survey")}
-                    </FormDescription>
-                  </div>
+        <div className="flex flex-col gap-6 p-6">
+          {/* Headlines & Descriptions */}
+          <StylingSection
+            title={t("environments.workspace.look.advanced_styling_section_headlines")}
+            open={headlinesOpen}
+            setOpen={setHeadlinesOpen}>
+            <div className="grid grid-cols-2 gap-4">
+              <ColorField
+                form={form}
+                name="elementHeadlineColor.light"
+                label={t("environments.workspace.look.advanced_styling_field_headline_color")}
+              />
+              <ColorField
+                form={form}
+                name="elementDescriptionColor.light"
+                label={t("environments.workspace.look.advanced_styling_field_description_color")}
+              />
+              <DimensionInput
+                form={form}
+                name="elementHeadlineFontSize"
+                label={t("environments.workspace.look.advanced_styling_field_headline_size")}
+              />
+              <DimensionInput
+                form={form}
+                name="elementDescriptionFontSize"
+                label={t("environments.workspace.look.advanced_styling_field_description_size")}
+              />
+              <NumberField
+                form={form}
+                name="elementHeadlineFontWeight"
+                label={t("environments.workspace.look.advanced_styling_field_headline_weight")}
+              />
+            </div>
+          </StylingSection>

-                  <FormControl>
-                    <ColorPicker
-                      color={field.value || COLOR_DEFAULTS.brandColor}
-                      onChange={(color) => field.onChange(color)}
-                      containerClass="max-w-xs"
-                    />
-                  </FormControl>
-                </FormItem>
-              )}
-            />
+          {/* Inputs */}
+          <StylingSection
+            title={t("environments.workspace.look.advanced_styling_section_inputs")}
+            open={inputsOpen}
+            setOpen={setInputsOpen}>
+            <div className="grid grid-cols-2 gap-4">
+              <ColorField
+                form={form}
+                name="inputColor.light"
+                label={t("environments.surveys.edit.input_color")}
+              />
+              <ColorField
+                form={form}
+                name="inputBorderColor.light"
+                label={t("environments.surveys.edit.input_border_color")}
+              />
+              <ColorField
+                form={form}
+                name="inputTextColor.light"
+                label={t("environments.workspace.look.advanced_styling_field_input_text")}
+              />
+              <div className="hidden" /> {/* Spacer if needed, or remove for auto flow */}
+              <DimensionInput
+                form={form}
+                name="inputBorderRadius"
+                label={t("environments.workspace.look.advanced_styling_field_border_radius")}
+              />
+              <DimensionInput
+                form={form}
+                name="inputHeight"
+                label={t("environments.workspace.look.advanced_styling_field_height")}
+              />
+              <DimensionInput
+                form={form}
+                name="inputFontSize"
+                label={t("environments.workspace.look.advanced_styling_field_font_size")}
+              />
+              <DimensionInput
+                form={form}
+                name="inputPaddingX"
+                label={t("environments.workspace.look.advanced_styling_field_padding_x")}
+              />
+              <DimensionInput
+                form={form}
+                name="inputPaddingY"
+                label={t("environments.workspace.look.advanced_styling_field_padding_y")}
+              />
+              <NumberField
+                form={form}
+                name="inputPlaceholderOpacity"
+                label={t("environments.workspace.look.advanced_styling_field_placeholder_opacity")}
+                step={0.1}
+                max={1}
+              />
+              <TextField
+                form={form}
+                name="inputShadow"
+                label={t("environments.workspace.look.advanced_styling_field_shadow")}
+              />
+            </div>
+          </StylingSection>

-            <Button
-              type="button"
-              variant="secondary"
-              size="sm"
-              className="w-fit"
-              onClick={() => suggestColors()}>
-              {t("environments.surveys.edit.suggest_colors")}
-              <SparklesIcon />
-            </Button>
-          </div>
+          {/* Buttons */}
+          <StylingSection
+            title={t("environments.workspace.look.advanced_styling_section_buttons")}
+            open={buttonsOpen}
+            setOpen={setButtonsOpen}>
+            <div className="grid grid-cols-2 gap-4">
+              <ColorField
+                form={form}
+                name="buttonBgColor.light"
+                label={t("environments.workspace.look.advanced_styling_field_button_bg")}
+              />
+              <ColorField
+                form={form}
+                name="buttonTextColor.light"
+                label={t("environments.workspace.look.advanced_styling_field_button_text")}
+              />
+              <DimensionInput
+                form={form}
+                name="buttonBorderRadius"
+                label={t("environments.workspace.look.advanced_styling_field_border_radius")}
+              />
+              <DimensionInput
+                form={form}
+                name="buttonHeight"
+                label={t("environments.workspace.look.advanced_styling_field_height")}
+              />
+              <DimensionInput
+                form={form}
+                name="buttonFontSize"
+                label={t("environments.workspace.look.advanced_styling_field_font_size")}
+              />
+              <NumberField
+                form={form}
+                name="buttonFontWeight"
+                label={t("environments.workspace.look.advanced_styling_field_font_weight")}
+              />
+              <DimensionInput
+                form={form}
+                name="buttonPaddingX"
+                label={t("environments.workspace.look.advanced_styling_field_padding_x")}
+              />
+              <DimensionInput
+                form={form}
+                name="buttonPaddingY"
+                label={t("environments.workspace.look.advanced_styling_field_padding_y")}
+              />
+            </div>
+          </StylingSection>

-          <FormField
-            control={form.control}
-            name="questionColor.light"
-            render={({ field }) => (
-              <FormItem className="space-y-4">
-                <div>
-                  <FormLabel>{t("environments.surveys.edit.question_color")}</FormLabel>
-                  <FormDescription>
-                    {t("environments.surveys.edit.change_the_question_color_of_the_survey")}
-                  </FormDescription>
-                </div>
-
-                <FormControl>
-                  <ColorPicker
-                    color={field.value || COLOR_DEFAULTS.questionColor}
-                    onChange={(color) => field.onChange(color)}
-                    containerClass="max-w-xs"
-                  />
-                </FormControl>
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="inputColor.light"
-            render={({ field }) => (
-              <FormItem className="space-y-4">
-                <div>
-                  <FormLabel>{t("environments.surveys.edit.input_color")}</FormLabel>
-                  <FormDescription>
-                    {t("environments.surveys.edit.change_the_background_color_of_the_input_fields")}
-                  </FormDescription>
-                </div>
-
-                <FormControl>
-                  <ColorPicker
-                    color={field.value || COLOR_DEFAULTS.inputColor}
-                    onChange={(color: string) => field.onChange(color)}
-                    containerClass="max-w-xs"
-                  />
-                </FormControl>
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="inputBorderColor.light"
-            render={({ field }) => (
-              <FormItem className="space-y-4">
-                <div>
-                  <FormLabel>{t("environments.surveys.edit.input_border_color")}</FormLabel>
-                  <FormDescription>
-                    {t("environments.surveys.edit.change_the_border_color_of_the_input_fields")}
-                  </FormDescription>
-                </div>
-
-                <FormControl>
-                  <ColorPicker
-                    color={field.value || COLOR_DEFAULTS.inputBorderColor}
-                    onChange={(color: string) => field.onChange(color)}
-                    containerClass="max-w-xs"
-                  />
-                </FormControl>
-              </FormItem>
-            )}
-          />
+          {/* Options */}
+          <StylingSection
+            title={t("environments.workspace.look.advanced_styling_section_options")}
+            open={optionsOpen}
+            setOpen={setOptionsOpen}>
+            <div className="grid grid-cols-2 gap-4">
+              <ColorField
+                form={form}
+                name="optionBgColor.light"
+                label={t("environments.workspace.look.advanced_styling_field_option_bg")}
+              />
+              <ColorField
+                form={form}
+                name="optionLabelColor.light"
+                label={t("environments.workspace.look.advanced_styling_field_option_label")}
+              />
+              <DimensionInput
+                form={form}
+                name="optionBorderRadius"
+                label={t("environments.workspace.look.advanced_styling_field_border_radius")}
+              />
+              <DimensionInput
+                form={form}
+                name="optionPaddingX"
+                label={t("environments.workspace.look.advanced_styling_field_padding_x")}
+              />
+              <DimensionInput
+                form={form}
+                name="optionPaddingY"
+                label={t("environments.workspace.look.advanced_styling_field_padding_y")}
+              />
+              <DimensionInput
+                form={form}
+                name="optionFontSize"
+                label={t("environments.workspace.look.advanced_styling_field_font_size")}
+              />
+            </div>
+          </StylingSection>
        </div>
      </Collapsible.CollapsibleContent>
    </Collapsible.Root>
--- a/apps/web/modules/ui/components/card-styling-settings/index.tsx
+++ b/apps/web/modules/ui/components/card-styling-settings/index.tsx
@@ -13,7 +13,7 @@ import { COLOR_DEFAULTS } from "@/lib/styling/constants";
 import { CardArrangementTabs } from "@/modules/ui/components/card-arrangement-tabs";
 import { ColorPicker } from "@/modules/ui/components/color-picker";
 import { FormControl, FormDescription, FormField, FormItem, FormLabel } from "@/modules/ui/components/form";
-import { Slider } from "@/modules/ui/components/slider";
+import { ColorField, DimensionInput } from "@/modules/ui/components/styling-fields";
 import { Switch } from "@/modules/ui/components/switch";

 type CardStylingSettingsProps = {
@@ -39,9 +39,10 @@ export const CardStylingSettings = ({

  const linkCardArrangement = form.watch("cardArrangement.linkSurveys") ?? "straight";
  const appCardArrangement = form.watch("cardArrangement.appSurveys") ?? "straight";
-  const roundness = form.watch("roundness") ?? 8;
+  const hideProgressBar = form.watch("hideProgressBar");

  const [parent] = useAutoAnimate();
+
  return (
    <Collapsible.Root
      open={open}
@@ -59,7 +60,7 @@ export const CardStylingSettings = ({
        )}>
        <div className="inline-flex px-4 py-4">
          {!isSettingsPage && (
-            <div className="flex items-center pl-2 pr-5">
+            <div className="flex items-center pr-5 pl-2">
              <CheckIcon
                strokeWidth={3}
                className="h-7 w-7 rounded-full border border-green-300 bg-green-100 p-1.5 text-green-600"
@@ -81,47 +82,18 @@ export const CardStylingSettings = ({
      <Collapsible.CollapsibleContent className="flex flex-col" ref={parent}>
        <hr className="py-1 text-slate-600" />

-        <div className="flex flex-col gap-6 p-6 pt-2">
-          <div className="flex flex-col justify-center">
-            <FormField
-              control={form.control}
-              name="roundness"
-              render={() => (
-                <FormItem>
-                  <div>
-                    <FormLabel>{t("environments.surveys.edit.roundness")}</FormLabel>
-                    <FormDescription>
-                      {t("environments.surveys.edit.change_the_border_radius_of_the_card_and_the_inputs")}
-                    </FormDescription>
-                  </div>
-
-                  <FormControl>
-                    <div className="rounded-lg border bg-slate-50 p-6">
-                      <Slider
-                        value={[roundness]}
-                        max={22}
-                        onValueChange={(value) => {
-                          form.setValue("roundness", value[0]);
-                        }}
-                      />
-                    </div>
-                  </FormControl>
-                </FormItem>
-              )}
-            />
-          </div>
+        <div className="grid grid-cols-2 gap-4 p-6 pt-2">
+          {/* Roundness */}
+          <DimensionInput form={form} name="roundness" label={t("environments.surveys.edit.roundness")} />

          <FormField
            control={form.control}
            name="cardBackgroundColor.light"
            render={({ field }) => (
-              <FormItem className="space-y-4">
-                <div>
-                  <FormLabel>{t("environments.surveys.edit.card_background_color")}</FormLabel>
-                  <FormDescription>
-                    {t("environments.surveys.edit.change_the_background_color_of_the_card")}
-                  </FormDescription>
-                </div>
+              <FormItem className="space-y-1">
+                <FormLabel className="text-xs">
+                  {t("environments.surveys.edit.card_background_color")}
+                </FormLabel>

                <FormControl>
                  <ColorPicker
@@ -138,13 +110,8 @@ export const CardStylingSettings = ({
            control={form.control}
            name="cardBorderColor.light"
            render={({ field }) => (
-              <FormItem className="space-y-4">
-                <div>
-                  <FormLabel>{t("environments.surveys.edit.card_border_color")}</FormLabel>
-                  <FormDescription>
-                    {t("environments.surveys.edit.change_the_border_color_of_the_card")}
-                  </FormDescription>
-                </div>
+              <FormItem className="space-y-1">
+                <FormLabel className="text-xs">{t("environments.surveys.edit.card_border_color")}</FormLabel>

                <FormControl>
                  <ColorPicker
@@ -157,66 +124,6 @@ export const CardStylingSettings = ({
            )}
          />

-          <FormField
-            control={form.control}
-            name={"cardArrangement"}
-            render={() => (
-              <FormItem>
-                <div>
-                  <FormLabel>
-                    {t("environments.surveys.edit.card_arrangement_for_survey_type_derived", {
-                      surveyTypeDerived: surveyTypeDerived,
-                    })}
-                  </FormLabel>
-                  <FormDescription>
-                    {t(
-                      "environments.surveys.edit.how_funky_do_you_want_your_cards_in_survey_type_derived_surveys",
-                      {
-                        surveyTypeDerived: surveyTypeDerived,
-                      }
-                    )}
-                  </FormDescription>
-                </div>
-                <FormControl>
-                  <CardArrangementTabs
-                    key={isAppSurvey ? "app" : "link"}
-                    surveyType={isAppSurvey ? "app" : "link"}
-                    activeCardArrangement={isAppSurvey ? appCardArrangement : linkCardArrangement}
-                    setActiveCardArrangement={(value, type) => {
-                      type === "app"
-                        ? form.setValue("cardArrangement.appSurveys", value)
-                        : form.setValue("cardArrangement.linkSurveys", value);
-                    }}
-                  />
-                </FormControl>
-              </FormItem>
-            )}
-          />
-          <div className="flex items-center space-x-1">
-            <FormField
-              control={form.control}
-              name="hideProgressBar"
-              render={({ field }) => (
-                <FormItem className="flex w-full items-center gap-2 space-y-0">
-                  <FormControl>
-                    <Switch
-                      id="hideProgressBar"
-                      checked={!!field.value}
-                      onCheckedChange={(checked) => field.onChange(checked)}
-                    />
-                  </FormControl>
-
-                  <div>
-                    <FormLabel>{t("environments.surveys.edit.hide_progress_bar")}</FormLabel>
-                    <FormDescription>
-                      {t("environments.surveys.edit.disable_the_visibility_of_survey_progress")}
-                    </FormDescription>
-                  </div>
-                </FormItem>
-              )}
-            />
-          </div>
-
          {(!surveyType || isAppSurvey) && (
            <div className="flex max-w-xs flex-col gap-4">
              <div className="flex items-center space-x-1">
@@ -245,9 +152,6 @@ export const CardStylingSettings = ({

                        <div>
                          <FormLabel>{t("environments.surveys.edit.add_highlight_border")}</FormLabel>
-                          <FormDescription className="text-xs font-normal text-slate-500">
-                            {t("environments.surveys.edit.add_highlight_border_description")}
-                          </FormDescription>
                        </div>
                      </div>

@@ -271,6 +175,86 @@ export const CardStylingSettings = ({
              </div>
            </div>
          )}
+
+          <FormField
+            control={form.control}
+            name={"cardArrangement"}
+            render={() => (
+              <FormItem className="col-span-2">
+                <div>
+                  <FormLabel>
+                    {t("environments.surveys.edit.card_arrangement_for_survey_type_derived", {
+                      surveyTypeDerived: surveyTypeDerived,
+                    })}
+                  </FormLabel>
+                </div>
+                <FormControl>
+                  <CardArrangementTabs
+                    key={isAppSurvey ? "app" : "link"}
+                    surveyType={isAppSurvey ? "app" : "link"}
+                    activeCardArrangement={isAppSurvey ? appCardArrangement : linkCardArrangement}
+                    setActiveCardArrangement={(value, type) => {
+                      type === "app"
+                        ? form.setValue("cardArrangement.appSurveys", value)
+                        : form.setValue("cardArrangement.linkSurveys", value);
+                    }}
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+        </div>
+
+        {/* Progress Bar Section (Moved from Advanced) */}
+        <div className="flex flex-col gap-6 p-6 pt-0">
+          <hr className="text-slate-600" />
+          <div className="flex flex-col gap-4">
+            <div className="my-2">
+              <FormField
+                control={form.control}
+                name="hideProgressBar"
+                render={({ field }) => (
+                  <FormItem className="flex w-full items-center gap-2 space-y-0">
+                    <FormControl>
+                      <Switch
+                        id="hideProgressBar"
+                        checked={!!field.value}
+                        onCheckedChange={(checked) => field.onChange(checked)}
+                      />
+                    </FormControl>
+
+                    <div>
+                      <FormLabel className="text-sm font-normal">
+                        {t("environments.surveys.edit.hide_progress_bar")}
+                      </FormLabel>
+                      <FormDescription className="text-xs">
+                        {t("environments.surveys.edit.disable_the_visibility_of_survey_progress")}
+                      </FormDescription>
+                    </div>
+                  </FormItem>
+                )}
+              />
+            </div>
+            {!hideProgressBar && (
+              <div className="grid grid-cols-2 gap-4">
+                <ColorField
+                  form={form}
+                  name="progressTrackBgColor.light"
+                  label={t("environments.workspace.look.advanced_styling_field_track_bg")}
+                />
+                <ColorField
+                  form={form}
+                  name="progressIndicatorBgColor.light"
+                  label={t("environments.workspace.look.advanced_styling_field_indicator_bg")}
+                />
+                <DimensionInput
+                  form={form}
+                  name="progressTrackHeight"
+                  label={t("environments.workspace.look.advanced_styling_field_track_height")}
+                />
+              </div>
+            )}
+          </div>
        </div>
      </Collapsible.CollapsibleContent>
    </Collapsible.Root>
--- a/apps/web/modules/ui/components/color-picker/index.tsx
+++ b/apps/web/modules/ui/components/color-picker/index.tsx
@@ -12,12 +12,12 @@ interface ColorPickerProps {
 }
 export const ColorPicker = ({ color, onChange, containerClass, disabled = false }: ColorPickerProps) => {
  return (
-    <div className={cn("my-2", containerClass)}>
-      <div className="flex w-full items-center justify-between space-x-1 rounded-md border border-slate-300 bg-white px-2 text-sm text-slate-400">
+    <div className={cn(containerClass)}>
+      <div className="flex h-10 w-full items-center justify-between space-x-1 rounded-md border border-slate-300 bg-white px-2 text-sm text-slate-400">
        <div className="flex w-full items-center">
          #
          <HexColorInput
-            className="ml-2 mr-2 h-10 w-32 flex-1 border-0 bg-transparent text-slate-500 outline-none focus:border-none"
+            className="ml-2 mr-2 w-32 flex-1 border-0 bg-transparent text-slate-500 outline-none focus:border-none"
            color={color}
            onChange={onChange}
            id="color"
--- a/apps/web/modules/ui/components/media-background/index.tsx
+++ b/apps/web/modules/ui/components/media-background/index.tsx
@@ -115,7 +115,7 @@ export const MediaBackground: React.FC<MediaBackgroundProps> = ({
                onLoadingComplete={() => setBackgroundLoaded(true)}
              />
              {authorDetailsForUnsplash.authorName && (
-                <div className="absolute bottom-4 right-6 z-10 ml-auto hidden w-max text-xs text-slate-400 md:block">
+                <div className="absolute right-6 bottom-4 z-10 ml-auto hidden w-max text-xs text-slate-400 md:block">
                  <span>{t("common.photo_by")}</span>
                  <Link
                    href={authorDetailsForUnsplash.authorURL + "?utm_source=formbricks&utm_medium=referral"}
@@ -169,17 +169,17 @@ export const MediaBackground: React.FC<MediaBackgroundProps> = ({
        data-testid="mobile-preview-container"
        className={`relative h-[90%] w-full overflow-hidden rounded-[3rem] border-[6px] border-slate-400 lg:w-[75%] ${getFilterStyle()}`}>
        {/* below element is use to create notch for the mobile device mockup   */}
-        <div className="absolute left-1/2 right-1/2 top-2 z-20 h-4 w-1/3 -translate-x-1/2 transform rounded-full bg-slate-400"></div>
+        <div className="absolute top-2 right-1/2 left-1/2 z-20 h-4 w-1/3 -translate-x-1/2 transform rounded-full bg-slate-400"></div>
        {surveyType === "link" && renderBackground()}
        {renderContent()}
      </div>
    );
  } else if (isEditorView) {
    return (
-      <div ref={ContentRef} className="overflow-hiddem flex flex-grow flex-col rounded-b-lg">
-        <div className="relative flex w-full flex-grow flex-col items-center justify-center p-4 py-6">
+      <div ref={ContentRef} className="flex flex-col rounded-b-lg">
+        <div className="relative flex w-full flex-col items-center justify-center p-4 py-6">
          {renderBackground()}
-          <div className="flex h-full w-full items-center justify-center">{children}</div>
+          <div className="flex w-full items-center justify-center">{children}</div>
        </div>
      </div>
    );
--- a/apps/web/modules/ui/components/preview-survey/components/modal.tsx
+++ b/apps/web/modules/ui/components/preview-survey/components/modal.tsx
@@ -12,7 +12,7 @@ interface ModalProps {
  previewMode: string;
  clickOutsideClose: boolean;
  darkOverlay: boolean;
-  borderRadius?: number;
+  borderRadius?: number | string;
  background?: string;
 }

@@ -142,8 +142,8 @@ export const Modal = ({
        ref={modalRef}
        style={{
          ...scalingClasses,
-          ...(borderRadius && {
-            borderRadius: `${borderRadius}px`,
+          ...(borderRadius !== undefined && {
+            borderRadius: typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
          }),
          ...(background && {
            background,
--- a/apps/web/modules/ui/components/styling-fields/index.tsx
+++ b/apps/web/modules/ui/components/styling-fields/index.tsx
@@ -0,0 +1,191 @@
+"use client";
+
+import { useAutoAnimate } from "@formkit/auto-animate/react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import React from "react";
+import { ColorPicker } from "@/modules/ui/components/color-picker";
+import { FormControl, FormField, FormItem, FormLabel } from "@/modules/ui/components/form";
+import { Input } from "@/modules/ui/components/input";
+
+export const StylingSection = ({
+  title,
+  open,
+  setOpen,
+  children,
+}: {
+  title: string;
+  open: boolean;
+  setOpen: (o: boolean) => void;
+  children: React.ReactNode;
+}) => {
+  const [parent] = useAutoAnimate();
+
+  return (
+    <div ref={parent} className="rounded-md border">
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="flex w-full items-center justify-between rounded-t-md bg-slate-50 p-3 text-sm font-medium text-slate-700 hover:bg-slate-100">
+        {title}
+        {open ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+      </button>
+      {open && <div className="rounded-b-md border-t bg-white p-4">{children}</div>}
+    </div>
+  );
+};
+
+export const ColorField = ({
+  form,
+  name,
+  label,
+  containerClass,
+}: {
+  form: any;
+  name: string;
+  label: string;
+  containerClass?: string;
+}) => (
+  <FormField
+    control={form.control}
+    name={name}
+    render={({ field }) => (
+      <FormItem className="space-y-1">
+        <FormLabel className="text-xs">{label}</FormLabel>
+        <FormControl>
+          <ColorPicker
+            color={field.value}
+            onChange={(color) => field.onChange(color)}
+            containerClass={containerClass || "w-full"}
+          />
+        </FormControl>
+      </FormItem>
+    )}
+  />
+);
+
+export const NumberField = ({
+  form,
+  name,
+  label,
+  step = 1,
+  max,
+  placeholder,
+}: {
+  form: any;
+  name: string;
+  label: string;
+  step?: number;
+  max?: number;
+  placeholder?: string;
+}) => (
+  <FormField
+    control={form.control}
+    name={name}
+    render={({ field }) => (
+      <FormItem className="space-y-1">
+        <FormLabel className="text-xs">{label}</FormLabel>
+        <FormControl>
+          <Input
+            type="number"
+            {...field}
+            onChange={(e) => {
+              const val = e.target.valueAsNumber;
+              field.onChange(Number.isNaN(val) ? null : val);
+            }}
+            step={step}
+            max={max}
+            className="text-xs"
+            placeholder={placeholder}
+          />
+        </FormControl>
+      </FormItem>
+    )}
+  />
+);
+
+export const DimensionInput = ({
+  form,
+  name,
+  label,
+  placeholder,
+}: {
+  form: any;
+  name: string;
+  label: string;
+  placeholder?: string;
+}) => (
+  <FormField
+    control={form.control}
+    name={name}
+    render={({ field }) => {
+      const value = field.value;
+      let unit = "px";
+      if (typeof value === "string") {
+        if (value.endsWith("%")) unit = "%";
+        else if (value.endsWith("rem")) unit = "rem";
+        else if (value.endsWith("em")) unit = "em";
+      }
+      const numericValue = typeof value === "string" ? Number.parseFloat(value) : value;
+
+      return (
+        <FormItem className="space-y-1">
+          <FormLabel className="text-xs">{label}</FormLabel>
+          <FormControl>
+            <div className="flex rounded-md shadow-xs">
+              <Input
+                type="number"
+                value={numericValue ?? ""}
+                onChange={(e) => {
+                  const valStr = e.target.value;
+                  if (valStr === "") {
+                    field.onChange(null);
+                    return;
+                  }
+                  const newVal = Number.parseFloat(valStr);
+                  if (Number.isNaN(newVal)) {
+                    return;
+                  }
+                  field.onChange(unit === "px" ? newVal : `${newVal}${unit}`);
+                }}
+                className="flex-1 rounded-r-none border-r-0 text-xs focus-visible:ring-0"
+                placeholder={placeholder}
+              />
+              <select
+                value={unit}
+                onChange={(e) => {
+                  const newUnit = e.target.value;
+                  const currentVal = numericValue ?? 0;
+                  if (newUnit === "px") {
+                    field.onChange(currentVal);
+                  } else {
+                    field.onChange(`${currentVal}${newUnit}`);
+                  }
+                }}
+                className="ring-offset-background placeholder:text-muted-foreground focus:border-brand-dark h-10 items-center justify-between rounded-r-md border border-slate-300 bg-white pr-8 pl-3 text-xs font-medium focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50">
+                <option value="px">px</option>
+                <option value="%">%</option>
+                <option value="rem">rem</option>
+                <option value="em">em</option>
+              </select>
+            </div>
+          </FormControl>
+        </FormItem>
+      );
+    }}
+  />
+);
+
+export const TextField = ({ form, name, label }: { form: any; name: string; label: string }) => (
+  <FormField
+    control={form.control}
+    name={name}
+    render={({ field }) => (
+      <FormItem className="space-y-1">
+        <FormLabel className="text-xs">{label}</FormLabel>
+        <FormControl>
+          <Input type="text" {...field} className="text-xs" />
+        </FormControl>
+      </FormItem>
+    )}
+  />
+);
--- a/apps/web/modules/ui/components/theme-styling-preview-survey/index.tsx
+++ b/apps/web/modules/ui/components/theme-styling-preview-survey/index.tsx
@@ -91,7 +91,7 @@ export const ThemeStylingPreviewSurvey = ({
    shrink: {
      display: "relative",
      width: ["83.33%"],
-      height: ["95%"],
+      height: "auto",
    },
  };

@@ -140,9 +140,9 @@ export const ThemeStylingPreviewSurvey = ({
              : "expanded_with_fixed_positioning"
            : "shrink"
        }
-        className="relative flex h-[95%] max-h-[95%] w-5/6 items-center justify-center rounded-lg border border-slate-300 bg-slate-200">
-        <div className="flex h-full w-5/6 flex-1 flex-col">
-          <div className="flex h-8 w-full items-center rounded-t-lg bg-slate-100">
+        className="relative z-10 flex h-auto max-h-[85%] w-5/6 flex-col overflow-y-auto rounded-lg border border-slate-300 bg-white shadow-xl">
+        <div className="flex w-full flex-col rounded-lg">
+          <div className="flex h-auto w-full items-center rounded-t-lg bg-slate-100 py-2">
            <div className="ml-6 flex space-x-2">
              <div className="h-3 w-3 rounded-full bg-red-500"></div>
              <div className="h-3 w-3 rounded-full bg-amber-500"></div>
@@ -193,7 +193,7 @@ export const ThemeStylingPreviewSurvey = ({
              )}
              <div
                key={surveyKey}
-                className={`${project.logo?.url && !project.styling.isLogoHidden && !isFullScreenPreview ? "mt-12" : ""} z-0 w-full max-w-md rounded-lg p-4`}>
+                className={`${!project.styling.isLogoHidden && !isFullScreenPreview ? "mt-12" : ""} z-0 w-full max-w-md overflow-hidden rounded-lg p-4`}>
                <SurveyInline
                  appUrl={publicDomain}
                  isPreviewMode={true}
--- a/packages/survey-ui/src/components/general/element-header.tsx
+++ b/packages/survey-ui/src/components/general/element-header.tsx
@@ -77,7 +77,7 @@ function ElementHeader({
      <div>
        <div>
          {required ? (
-            <span className="label-headline mb-[3px] text-xs opacity-60">{requiredLabel}</span>
+            <span className="abel-headline mb-[3px] text-xs opacity-60">{requiredLabel}</span>
          ) : null}
        </div>
        <div className="flex">
--- a/packages/survey-ui/src/components/general/input.tsx
+++ b/packages/survey-ui/src/components/general/input.tsx
@@ -24,7 +24,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(
          // Layout and behavior
          "flex min-w-0 border transition-[color,box-shadow] outline-none",
          // Customizable styles via CSS variables (using Tailwind theme extensions)
-          "w-input h-input",
+          "w-input min-h-[var(--fb-input-height)]",
          "bg-input-bg border-input-border rounded-input",
          "font-input font-input-weight",
          "text-input-text",
--- a/packages/survey-ui/src/styles/globals.css
+++ b/packages/survey-ui/src/styles/globals.css
@@ -51,7 +51,7 @@
  --slate-50: rgb(248, 250, 252);
  --slate-100: rgb(241 245 249);
  --slate-200: rgb(226 232 240);
-
+  
  /* ---------------------------------------------------------------------------
     Survey general Colors
     The primary accent color used throughout the survey. Override this to 
@@ -65,12 +65,12 @@

  /* ---------------------------------------------------------------------------
     Element Headline Tokens
-     Used for question headlines and main element titles.
+     Used for headline text in elements.
     --------------------------------------------------------------------------- */
  --fb-element-headline-font-family: inherit;
  --fb-element-headline-font-weight: 400;
  --fb-element-headline-font-size: 1rem;
-  --fb-element-headline-color: (--input);
+  --fb-element-headline-color: var(--input);
  --fb-element-headline-opacity: 1;

  /* ---------------------------------------------------------------------------
@@ -113,10 +113,10 @@
     Used for text inputs, textareas, and other form controls.
     --------------------------------------------------------------------------- */
  --fb-input-bg-color: var(--slate-50);
-  --fb-input-border-color: var(--fb-survey-brand-color);
+  --fb-input-border-color: var(--border);
  --fb-input-border-radius: var(--radius);
  --fb-input-font-family: inherit;
-  --fb-input-font-size: 0.875rem !important;
+  --fb-input-font-size: 0.875rem;
  --fb-input-font-weight: 400;
  --fb-input-color: var(--foreground);
  --fb-input-placeholder-color: var(--fb-input-color);
@@ -152,7 +152,7 @@
  --fb-option-font-weight: var(--fb-input-font-weight);
 }

-.button-custom {
+#fbjs .button-custom {
  width: var(--fb-button-width);
  height: var(--fb-button-height);
  background-color: var(--fb-button-bg-color);
@@ -167,7 +167,7 @@
  font-size: var(--fb-button-font-size);
 }

-.label-headline {
+#fbjs .label-headline {
  font-family: var(--fb-element-headline-font-family);
  font-weight: var(--fb-element-headline-font-weight);
  font-size: var(--fb-element-headline-font-size) !important;
@@ -175,15 +175,16 @@
  opacity: var(--fb-element-headline-opacity);
 }

-.label-description {
+#fbjs .label-description,
+#fbjs .text-subheading {
  font-family: var(--fb-element-description-font-family);
  font-weight: var(--fb-element-description-font-weight);
  font-size: var(--fb-element-description-font-size) !important;
-  color: var(--fb-element-description-color);
+  color: var(--fb-element-description-color) !important;
  opacity: var(--fb-element-description-opacity);
 }

-.label-default {
+#fbjs .label-default {
  font-family: var(--fb-label-font-family);
  font-weight: var(--fb-label-font-weight);
  font-size: var(--fb-label-font-size) !important;
@@ -191,13 +192,13 @@
  opacity: var(--fb-label-opacity);
 }

-.progress-track {
+#fbjs .progress-track {
  height: var(--fb-progress-track-height);
  background-color: var(--fb-progress-track-bg-color);
  border-radius: var(--fb-progress-track-border-radius);
 }

-.progress-indicator {
+#fbjs .progress-indicator {
  background-color: var(--fb-progress-indicator-bg-color);
  border-radius: var(--fb-progress-indicator-border-radius);
 }
--- a/packages/surveys/src/components/buttons/submit-button.tsx
+++ b/packages/surveys/src/components/buttons/submit-button.tsx
@@ -1,6 +1,7 @@
 import { ButtonHTMLAttributes, useRef } from "preact/compat";
 import { useCallback, useEffect, useState } from "preact/hooks";
 import { useTranslation } from "react-i18next";
+import { cn } from "@/lib/utils";

 interface SubmitButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  buttonLabel?: string;
@@ -72,7 +73,11 @@ export function SubmitButton({
      type={type}
      tabIndex={tabIndex}
      autoFocus={focus}
-      className="bg-brand border-submit-button-border text-on-brand focus:ring-focus rounded-custom mb-1 flex items-center border px-3 py-3 text-base leading-4 font-medium shadow-xs hover:opacity-90 focus:ring-2 focus:ring-offset-2 focus:outline-hidden"
+      className={cn(
+        "bg-brand border-submit-button-border text-on-brand focus:ring-focus rounded-custom mb-1 flex items-center border px-3 py-3 text-base leading-4 font-medium shadow-xs hover:opacity-90 focus:ring-2 focus:ring-offset-2 focus:outline-hidden",
+        "justify-center shadow-xs hover:opacity-90 focus:ring-2 focus:ring-offset-2 focus:outline-hidden",
+        "button-custom"
+      )}
      onClick={onClick}
      disabled={disabled}>
      {buttonLabel || (isLastQuestion ? t("common.finish") : t("common.next"))}
--- a/packages/surveys/src/components/general/block-conditional.tsx
+++ b/packages/surveys/src/components/general/block-conditional.tsx
@@ -308,37 +308,36 @@ export function BlockConditional({
      {/* Scrollable container for the entire block */}
      <ScrollableContainer fullSizeCards={fullSizeCards}>
        <div className="space-y-6">
-          <div className="space-y-6">
+          <div className="space-y-4">
            {block.elements.map((element, index) => {
              const isFirstElement = index === 0;

              return (
-                <div key={element.id}>
-                  <ElementConditional
-                    surveyLanguages={surveyLanguages}
-                    element={element}
-                    value={value[element.id]}
-                    onChange={(responseData) => handleElementChange(element.id, responseData)}
-                    onFileUpload={onFileUpload}
-                    languageCode={languageCode}
-                    ttc={ttc}
-                    setTtc={setTtc}
-                    surveyId={surveyId}
-                    autoFocusEnabled={autoFocusEnabled && isFirstElement}
-                    currentElementId={currentElementId}
-                    onOpenExternalURL={onOpenExternalURL}
-                    dir={dir}
-                    formRef={(ref) => {
-                      if (ref) {
-                        elementFormRefs.current.set(element.id, ref);
-                      } else {
-                        elementFormRefs.current.delete(element.id);
-                      }
-                    }}
-                    onTtcCollect={handleTtcCollect}
-                    errorMessage={getFirstErrorMessage(elementErrors, element.id)}
-                  />
-                </div>
+                <ElementConditional
+                  key={element.id}
+                  surveyLanguages={surveyLanguages}
+                  element={element}
+                  value={value[element.id]}
+                  onChange={(responseData) => handleElementChange(element.id, responseData)}
+                  onFileUpload={onFileUpload}
+                  languageCode={languageCode}
+                  ttc={ttc}
+                  setTtc={setTtc}
+                  surveyId={surveyId}
+                  autoFocusEnabled={autoFocusEnabled && isFirstElement}
+                  currentElementId={currentElementId}
+                  onOpenExternalURL={onOpenExternalURL}
+                  dir={dir}
+                  formRef={(ref) => {
+                    if (ref) {
+                      elementFormRefs.current.set(element.id, ref);
+                    } else {
+                      elementFormRefs.current.delete(element.id);
+                    }
+                  }}
+                  onTtcCollect={handleTtcCollect}
+                  errorMessage={getFirstErrorMessage(elementErrors, element.id)}
+                />
              );
            })}
          </div>
--- a/packages/surveys/src/components/general/headline.tsx
+++ b/packages/surveys/src/components/general/headline.tsx
@@ -33,7 +33,7 @@ export function Headline({
    <label htmlFor={elementId} className="text-heading mb-[3px] flex flex-col">
      {hasRequiredRule && isQuestionCard && (
        <span
-          className="mb-[3px] text-xs leading-6 font-normal opacity-60"
+          className="mb-[3px] leading-6 font-normal opacity-60"
          tabIndex={-1}
          data-testid="fb__surveys__headline-optional-text-test">
          {t("common.required")}
--- a/packages/surveys/src/components/general/language-switch.tsx
+++ b/packages/surveys/src/components/general/language-switch.tsx
@@ -16,7 +16,7 @@ interface LanguageSwitchProps {
  setSelectedLanguageCode: (languageCode: string) => void;
  setFirstRender?: (firstRender: boolean) => void;
  hoverColor?: string;
-  borderRadius?: number;
+  borderRadius?: number | string;
  dir?: "ltr" | "rtl" | "auto";
  setDir?: (dir: "ltr" | "rtl" | "auto") => void;
 }
@@ -85,7 +85,7 @@ export function LanguageSwitch({
        style={{
          backgroundColor: isHovered ? hoverColorWithOpacity : "transparent",
          transition: "background-color 0.2s ease",
-          borderRadius: `${borderRadius}px`,
+          borderRadius: typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
        }}
        onClick={toggleDropdown}
        tabIndex={-1}
--- a/packages/surveys/src/components/general/progress.tsx
+++ b/packages/surveys/src/components/general/progress.tsx
@@ -1,8 +1,8 @@
 export function Progress({ progress }: { progress: number }) {
  return (
-    <div className="bg-accent-bg h-2 w-full rounded-none">
+    <div className="progress-track h-2 w-full rounded-none">
      <div
-        className="transition-width bg-brand z-20 h-2 duration-500"
+        className="transition-width progress-indicator z-20 h-2 duration-500"
        style={{ width: `${Math.floor(progress * 100).toString()}%` }}
      />
    </div>
--- a/packages/surveys/src/components/general/survey-close-button.tsx
+++ b/packages/surveys/src/components/general/survey-close-button.tsx
@@ -7,7 +7,7 @@ import { cn } from "@/lib/utils";
 interface SurveyCloseButtonProps {
  onClose?: () => void;
  hoverColor?: string;
-  borderRadius?: number;
+  borderRadius?: number | string;
 }

 export function SurveyCloseButton({ onClose, hoverColor, borderRadius }: Readonly<SurveyCloseButtonProps>) {
@@ -23,7 +23,7 @@ export function SurveyCloseButton({ onClose, hoverColor, borderRadius }: Readonl
        style={{
          backgroundColor: isHovered ? hoverColorWithOpacity : "transparent",
          transition: "background-color 0.2s ease",
-          borderRadius: `${borderRadius}px`,
+          borderRadius: typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
        }}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
--- a/packages/surveys/src/components/general/survey.tsx
+++ b/packages/surveys/src/components/general/survey.tsx
@@ -846,7 +846,7 @@ export function Survey({
        setHasInteracted={setHasInteracted}>
        <div
          className={cn(
-            "no-scrollbar bg-survey-bg flex h-full w-full flex-col justify-between overflow-hidden transition-all duration-1000 ease-in-out",
+            "no-scrollbar bg-survey-bg flex h-full w-full flex-col justify-between overflow-hidden transition-opacity duration-1000 ease-in-out",
            offset === 0 || cardArrangement === "simple" ? "opacity-100" : "opacity-0"
          )}>
          <div className={cn("relative")}>
--- a/packages/surveys/src/components/wrappers/stacked-card.tsx
+++ b/packages/surveys/src/components/wrappers/stacked-card.tsx
@@ -116,7 +116,7 @@ export const StackedCard = ({
        transform: calculateCardTransform(offset),
        opacity: isHidden ? 0 : (100 - 20 * offset) / 100,
        height: fullSizeCards ? "100%" : currentCardHeight,
-        transition: "all 600ms ease-in-out",
+        transition: "transform 600ms ease-in-out, opacity 600ms ease-in-out, width 600ms ease-in-out",
        pointerEvents: offset === 0 ? "auto" : "none",
        ...borderStyles,
        ...straightCardArrangementStyles,
--- a/packages/surveys/src/lib/styles.test.ts
+++ b/packages/surveys/src/lib/styles.test.ts
@@ -327,12 +327,122 @@ describe("addCustomThemeToDom", () => {
    expect(variables["--fb-signature-text-color"]).toBeDefined(); // Relies on mixColor & isLight
    expect(variables["--fb-branding-text-color"]).toBeDefined(); // Relies on mixColor & isLight
    expect(variables["--fb-input-background-color-selected"]).toBeDefined(); // Relies on mixColor
-    expect(variables["--fb-accent-background-color"]).toBeDefined(); // Relies on mixColor
-    expect(variables["--fb-accent-background-color-selected"]).toBeDefined(); // Relies on mixColor
+
+    // Check accent colors derived from brandColor when not explicitly set
+    expect(variables["--fb-accent-background-color"]).toBeDefined();
+    expect(variables["--fb-accent-background-color-selected"]).toBeDefined();
+
    // calendar-tile-color depends on isLight(brandColor)
    expect(variables["--fb-calendar-tile-color"]).toBeUndefined(); // isLight('#112233') is false, so this should be undefined
  });

+  test("should generate calendar-tile-color for light brandColor", () => {
+    const styling = getBaseProjectStyling({ brandColor: { light: "#ffffff" } });
+    addCustomThemeToDom({ styling });
+    const styleElement = document.getElementById("formbricks__css__custom") as HTMLStyleElement;
+    const variables = getCssVariables(styleElement);
+
+    expect(variables["--fb-calendar-tile-color"]).toBeDefined();
+  });
+
+  test("should apply advanced styling properties", () => {
+    const styling: TSurveyStyling = {
+      ...getBaseProjectStyling(),
+      // Buttons
+      buttonBgColor: { light: "#btn-bg" },
+      buttonTextColor: { light: "#btn-text" },
+      buttonBorderRadius: 4,
+      buttonHeight: "40",
+      buttonFontSize: 16,
+      buttonFontWeight: "bold",
+      buttonPaddingX: 20,
+      buttonPaddingY: 10,
+      // Inputs
+      inputTextColor: { light: "#input-text" },
+      inputBorderRadius: 4,
+      inputHeight: 40,
+      inputFontSize: 14,
+      inputPaddingX: 12,
+      inputPaddingY: 8,
+      inputPlaceholderOpacity: 0.5,
+      inputShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+      // Options
+      optionBgColor: { light: "#option-bg" },
+      optionLabelColor: { light: "#option-label" },
+      optionBorderRadius: 4,
+      optionPaddingX: 12,
+      optionPaddingY: 8,
+      optionFontSize: 14,
+      // Element Headline & Description
+      elementHeadlineFontSize: 24,
+      elementHeadlineFontWeight: "bold",
+      elementHeadlineColor: { light: "#headline-color" },
+      elementDescriptionFontSize: 16,
+      elementDescriptionColor: { light: "#desc-color" },
+      // Progress Bar
+      progressTrackHeight: 4,
+      progressTrackBgColor: { light: "#track-bg" },
+      progressIndicatorBgColor: { light: "#indicator-bg" },
+    };
+
+    addCustomThemeToDom({ styling });
+    const styleElement = document.getElementById("formbricks__css__custom") as HTMLStyleElement;
+    const variables = getCssVariables(styleElement);
+
+    // Buttons
+    expect(variables["--fb-button-bg-color"]).toBe("#btn-bg");
+    expect(variables["--fb-button-text-color"]).toBe("#btn-text");
+    expect(variables["--fb-button-border-radius"]).toBe("4px");
+    expect(variables["--fb-button-height"]).toBe("40px");
+    expect(variables["--fb-button-font-size"]).toBe("16px");
+    expect(variables["--fb-button-font-weight"]).toBe("bold");
+    expect(variables["--fb-button-padding-x"]).toBe("20px");
+    expect(variables["--fb-button-padding-y"]).toBe("10px");
+    // Inputs
+    expect(variables["--fb-input-color"]).toBe("#input-text");
+    expect(variables["--fb-input-border-radius"]).toBe("4px");
+    expect(variables["--fb-input-height"]).toBe("40px");
+    expect(variables["--fb-input-font-size"]).toBe("14px");
+    expect(variables["--fb-input-padding-x"]).toBe("12px");
+    expect(variables["--fb-input-padding-y"]).toBe("8px");
+    expect(variables["--fb-input-placeholder-opacity"]).toBe("0.5");
+    expect(variables["--fb-input-shadow"]).toBe("0 1px 2px 0 rgba(0, 0, 0, 0.05)");
+    // Options
+    expect(variables["--fb-option-bg-color"]).toBe("#option-bg");
+    expect(variables["--fb-option-label-color"]).toBe("#option-label");
+    expect(variables["--fb-option-border-radius"]).toBe("4px");
+    expect(variables["--fb-option-padding-x"]).toBe("12px");
+    expect(variables["--fb-option-padding-y"]).toBe("8px");
+    expect(variables["--fb-option-font-size"]).toBe("14px");
+    // Element Headline & Description
+    expect(variables["--fb-element-headline-font-size"]).toBe("24px");
+    expect(variables["--fb-element-headline-font-weight"]).toBe("bold");
+    expect(variables["--fb-element-headline-color"]).toBe("#headline-color");
+    expect(variables["--fb-element-description-font-size"]).toBe("16px");
+    expect(variables["--fb-element-description-color"]).toBe("#desc-color");
+    // Progress Bar
+    expect(variables["--fb-progress-track-height"]).toBe("4px");
+    expect(variables["--fb-progress-track-bg-color"]).toBe("#track-bg");
+    expect(variables["--fb-progress-indicator-bg-color"]).toBe("#indicator-bg");
+  });
+
+  test("should format dimensions correctly", () => {
+    const styling: TSurveyStyling = {
+      ...getBaseProjectStyling(),
+      buttonBorderRadius: 10, // number -> px
+      buttonHeight: "20", // numeric string -> px
+      buttonFontSize: "1.5rem", // string -> string
+    };
+
+    addCustomThemeToDom({ styling });
+    const styleElement = document.getElementById("formbricks__css__custom") as HTMLStyleElement;
+    const variables = getCssVariables(styleElement);
+
+    expect(variables["--fb-button-border-radius"]).toBe("10px");
+    expect(variables["--fb-button-height"]).toBe("20px");
+    expect(variables["--fb-button-font-size"]).toBe("1.5rem");
+  });
+
  test("should set signature and branding text colors for dark questionColor", () => {
    const styling = getBaseProjectStyling({
      questionColor: { light: "#202020" }, // A dark color
--- a/packages/surveys/src/lib/styles.ts
+++ b/packages/surveys/src/lib/styles.ts
@@ -82,8 +82,8 @@ export const addCustomThemeToDom = ({ styling }: { styling: TProjectStyling | TS
  let cssVariables = "#fbjs {\n";

  // Helper function to append the variable if it's not undefined
-  const appendCssVariable = (variableName: string, value?: string) => {
-    if (value !== undefined) {
+  const appendCssVariable = (variableName: string, value?: string | null) => {
+    if (value !== undefined && value !== null) {
      cssVariables += `--fb-${variableName}: ${value};\n`;
    }
  };
@@ -122,12 +122,24 @@ export const addCustomThemeToDom = ({ styling }: { styling: TProjectStyling | TS
    appendCssVariable("input-border-color", styling.inputBorderColor?.light);
  }

+  // helper function to format dimensions
+  const formatDimension = (value: string | number | null | undefined) => {
+    if (value === null || value === undefined) return undefined;
+    if (typeof value === "number") {
+      return `${value}px`;
+    }
+    if (typeof value === "string" && !Number.isNaN(Number(value))) {
+      return `${value}px`;
+    }
+    return value;
+  };
+
  appendCssVariable("survey-background-color", styling.cardBackgroundColor?.light);
  appendCssVariable("survey-border-color", styling.cardBorderColor?.light);
-  appendCssVariable("border-radius", `${Number(roundness).toString()}px`);
-  appendCssVariable("input-border-radius", `${Number(roundness).toString()}px`);
-  appendCssVariable("option-border-radius", `${Number(roundness).toString()}px`);
-  appendCssVariable("button-border-radius", `${Number(roundness).toString()}px`);
+  appendCssVariable("border-radius", formatDimension(roundness));
+  appendCssVariable("input-border-radius", formatDimension(roundness));
+  appendCssVariable("option-border-radius", formatDimension(roundness));
+  appendCssVariable("button-border-radius", formatDimension(roundness));
  appendCssVariable("input-background-color", styling.inputColor?.light);
  appendCssVariable("input-bg-color", styling.inputColor?.light);
  appendCssVariable("option-bg-color", styling.inputColor?.light);
@@ -179,6 +191,73 @@ export const addCustomThemeToDom = ({ styling }: { styling: TProjectStyling | TS
    }
  }

+  // Buttons (Advanced)
+  appendCssVariable("button-bg-color", styling.buttonBgColor?.light);
+  appendCssVariable("button-text-color", styling.buttonTextColor?.light);
+  if (styling.buttonBorderRadius !== undefined)
+    appendCssVariable("button-border-radius", formatDimension(styling.buttonBorderRadius));
+  if (styling.buttonHeight !== undefined)
+    appendCssVariable("button-height", formatDimension(styling.buttonHeight));
+  if (styling.buttonFontSize !== undefined)
+    appendCssVariable("button-font-size", formatDimension(styling.buttonFontSize));
+  if (styling.buttonFontWeight !== undefined)
+    appendCssVariable("button-font-weight", `${styling.buttonFontWeight}`);
+  if (styling.buttonPaddingX !== undefined)
+    appendCssVariable("button-padding-x", formatDimension(styling.buttonPaddingX));
+  if (styling.buttonPaddingY !== undefined)
+    appendCssVariable("button-padding-y", formatDimension(styling.buttonPaddingY));
+
+  // Inputs (Advanced)
+  appendCssVariable("input-color", styling.inputTextColor?.light);
+  if (styling.inputBorderRadius !== undefined)
+    appendCssVariable("input-border-radius", formatDimension(styling.inputBorderRadius));
+  if (styling.inputHeight !== undefined)
+    appendCssVariable("input-height", formatDimension(styling.inputHeight));
+  if (styling.inputFontSize !== undefined)
+    appendCssVariable("input-font-size", formatDimension(styling.inputFontSize));
+  if (styling.inputPaddingX !== undefined)
+    appendCssVariable("input-padding-x", formatDimension(styling.inputPaddingX));
+  if (styling.inputPaddingY !== undefined)
+    appendCssVariable("input-padding-y", formatDimension(styling.inputPaddingY));
+  if (styling.inputPlaceholderOpacity !== undefined)
+    appendCssVariable("input-placeholder-opacity", `${styling.inputPlaceholderOpacity}`);
+  appendCssVariable("input-shadow", styling.inputShadow);
+
+  // Options (Advanced)
+  appendCssVariable("option-bg-color", styling.optionBgColor?.light);
+  appendCssVariable("option-label-color", styling.optionLabelColor?.light);
+  if (styling.optionBorderRadius !== undefined)
+    appendCssVariable("option-border-radius", formatDimension(styling.optionBorderRadius));
+  if (styling.optionPaddingX !== undefined)
+    appendCssVariable("option-padding-x", formatDimension(styling.optionPaddingX));
+  if (styling.optionPaddingY !== undefined)
+    appendCssVariable("option-padding-y", formatDimension(styling.optionPaddingY));
+  if (styling.optionFontSize !== undefined)
+    appendCssVariable("option-font-size", formatDimension(styling.optionFontSize));
+
+  // Element Headline & Description (Advanced)
+  if (styling.elementHeadlineFontSize !== undefined)
+    appendCssVariable("element-headline-font-size", formatDimension(styling.elementHeadlineFontSize));
+  if (styling.elementHeadlineFontWeight !== undefined)
+    appendCssVariable("element-headline-font-weight", `${styling.elementHeadlineFontWeight}`);
+  appendCssVariable(
+    "element-headline-color",
+    styling.elementHeadlineColor?.light ?? styling.questionColor?.light
+  );
+
+  if (styling.elementDescriptionFontSize !== undefined)
+    appendCssVariable("element-description-font-size", formatDimension(styling.elementDescriptionFontSize));
+  appendCssVariable(
+    "element-description-color",
+    styling.elementDescriptionColor?.light ?? styling.questionColor?.light
+  );
+
+  // Progress Bar (Advanced)
+  if (styling.progressTrackHeight !== undefined)
+    appendCssVariable("progress-track-height", formatDimension(styling.progressTrackHeight));
+  appendCssVariable("progress-track-bg-color", styling.progressTrackBgColor?.light);
+  appendCssVariable("progress-indicator-bg-color", styling.progressIndicatorBgColor?.light);
+
  // Close the #fbjs block
  cssVariables += "}";

--- a/packages/surveys/tailwind.config.cjs
+++ b/packages/surveys/tailwind.config.cjs
@@ -33,6 +33,38 @@ module.exports = {
        "close-button-focus": "var(--fb-close-btn-hover-color)",
        "calendar-tile": "var(--fb-calendar-tile-color)",
      },
+      width: {
+        input: "var(--fb-input-width)",
+        button: "var(--fb-button-width)",
+      },
+      height: {
+        input: "var(--fb-input-height)",
+        button: "var(--fb-button-height)",
+      },
+      fontSize: {
+        input: "var(--fb-input-font-size)",
+        option: "var(--fb-option-font-size)",
+        button: "var(--fb-button-font-size)",
+      },
+      fontWeight: {
+        "input-weight": "var(--fb-input-font-weight)",
+        "option-weight": "var(--fb-option-font-weight)",
+        "button-weight": "var(--fb-button-font-weight)",
+      },
+      padding: {
+        "input-x": "var(--fb-input-padding-x)",
+        "input-y": "var(--fb-input-padding-y)",
+        "option-x": "var(--fb-option-padding-x)",
+        "option-y": "var(--fb-option-padding-y)",
+        "button-x": "var(--fb-button-padding-x)",
+        "button-y": "var(--fb-button-padding-y)",
+      },
+      boxShadow: {
+        input: "var(--fb-input-shadow)",
+      },
+      opacity: {
+        "input-placeholder": "var(--fb-input-placeholder-opacity)",
+      },
      borderRadius: {
        custom: "var(--fb-border-radius)",
      },
--- a/packages/types/common.ts
+++ b/packages/types/common.ts
@@ -14,7 +14,7 @@ export const ZOptionalString = z.string().optional();

 export const ZNullableString = z.string().nullable();

-export const ZColor = z.string().regex(/^#(?:[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/);
+export const ZColor = z.string().regex(/^#(?:[A-Fa-f0-9]{3}|[A-Fa-f0-9]{4}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/);

 export const ZPlacement = z.enum(["bottomLeft", "bottomRight", "topLeft", "topRight", "center"]);

--- a/packages/types/project.ts
+++ b/packages/types/project.ts
@@ -19,8 +19,8 @@ export const ZProjectMode = z.enum(["surveys", "cx"]);
 export type TProjectMode = z.infer<typeof ZProjectMode>;

 export const ZProjectConfig = z.object({
-  channel: ZProjectConfigChannel,
-  industry: ZProjectConfigIndustry,
+  channel: ZProjectConfigChannel.optional(),
+  industry: ZProjectConfigIndustry.optional(),
 });

 export type TProjectConfig = z.infer<typeof ZProjectConfig>;
--- a/packages/types/styling.ts
+++ b/packages/types/styling.ts
@@ -42,14 +42,61 @@ export type TSurveyStylingBackground = z.infer<typeof ZSurveyStylingBackground>;

 export const ZBaseStyling = z.object({
  brandColor: ZStylingColor.nullish(),
-  questionColor: ZStylingColor.nullish(),
-  inputColor: ZStylingColor.nullish(),
+  accentBgColor: ZStylingColor.nullish(),
+  accentBgColorSelected: ZStylingColor.nullish(),
+  fontFamily: z.string().nullish(),
+
+  // Buttons
+  // Buttons
+  buttonBgColor: ZStylingColor.nullish(),
+  buttonTextColor: ZStylingColor.nullish(),
+  buttonBorderRadius: z.union([z.number(), z.string()]).nullish(),
+  buttonHeight: z.union([z.number(), z.string()]).nullish(),
+  buttonFontSize: z.union([z.number(), z.string()]).nullish(),
+  buttonFontWeight: z.string().nullish(), // Font weight is typically string in CSS (e.g. "500", "bold") but provided number in previous schema. Let's allow string.
+  buttonPaddingX: z.union([z.number(), z.string()]).nullish(),
+  buttonPaddingY: z.union([z.number(), z.string()]).nullish(),
+
+  // Inputs
+  inputBgColor: ZStylingColor.nullish(),
  inputBorderColor: ZStylingColor.nullish(),
+  inputBorderRadius: z.union([z.number(), z.string()]).nullish(),
+  inputHeight: z.union([z.number(), z.string()]).nullish(),
+  inputTextColor: ZStylingColor.nullish(),
+  inputFontSize: z.union([z.number(), z.string()]).nullish(),
+  inputPlaceholderOpacity: z.number().max(1).min(0).nullish(),
+  inputPaddingX: z.union([z.number(), z.string()]).nullish(),
+  inputPaddingY: z.union([z.number(), z.string()]).nullish(),
+  inputShadow: z.string().nullish(),
+
+  // Options
+  optionBgColor: ZStylingColor.nullish(),
+  optionLabelColor: ZStylingColor.nullish(),
+  optionBorderRadius: z.union([z.number(), z.string()]).nullish(),
+  optionPaddingX: z.union([z.number(), z.string()]).nullish(),
+  optionPaddingY: z.union([z.number(), z.string()]).nullish(),
+  optionFontSize: z.union([z.number(), z.string()]).nullish(),
+
+  // Headlines & Descriptions
+  elementHeadlineFontSize: z.union([z.number(), z.string()]).nullish(),
+  elementHeadlineFontWeight: z.string().nullish(),
+  elementHeadlineColor: ZStylingColor.nullish(),
+  elementDescriptionFontSize: z.union([z.number(), z.string()]).nullish(),
+  elementDescriptionColor: ZStylingColor.nullish(),
+
+  // Progress Bar
+  progressTrackHeight: z.union([z.number(), z.string()]).nullish(),
+  progressTrackBgColor: ZStylingColor.nullish(),
+  progressIndicatorBgColor: ZStylingColor.nullish(),
+
+  questionColor: ZStylingColor.nullish(),
+  inputColor: ZStylingColor.nullish(), // legacy? keep for compat?
+  // inputBorderColor: ZStylingColor.nullish(), // defined above
  cardBackgroundColor: ZStylingColor.nullish(),
  cardBorderColor: ZStylingColor.nullish(),
  highlightBorderColor: ZStylingColor.nullish(),
  isDarkModeEnabled: z.boolean().nullish(),
-  roundness: z.number().nullish(),
+  roundness: z.union([z.number(), z.string()]).nullish(),
  cardArrangement: ZCardArrangement.nullish(),
  background: ZSurveyStylingBackground.nullish(),
  hideProgressBar: z.boolean().nullish(),
Author	SHA1	Message	Date
TheodorTomas	45fc508f5b	chore: fixing rabbitai issues	2026-02-02 21:25:55 +08:00
TheodorTomas	726d4b67f9	chore: adding test coverage to styles.ts	2026-02-02 21:25:55 +08:00
TheodorTomas	2fc7827f8e	chore: adding more styles.test.ts unit tests	2026-02-02 21:25:55 +08:00
TheodorTomas	a1364995d1	chore: fix unit test	2026-02-02 21:25:55 +08:00
TheodorTomas	684e0c54c7	chore: cleanup after self review	2026-02-02 21:25:55 +08:00
TheodorTomas	39851de1b9	chore: cleanup after self review	2026-02-02 21:25:55 +08:00
TheodorTomas	e5134d5824	chore: cleanup after self review	2026-02-02 21:25:51 +08:00
TheodorTomas	57555d1688	feat: advance css vars	2026-02-02 21:21:45 +08:00