Merge branch 'main' into feat/css-variables

Remove custom color/border overrides on the Suggest colors button and
rely on the built-in secondary Button variant instead.

AGENTS.md

@@ -15,6 +15,19 @@ Formbricks runs as a pnpm/turbo monorepo. `apps/web` is the Next.js product surf
 - `pnpm test:e2e` — launch the Playwright browser regression suite.
 - `pnpm db:migrate:dev` — apply Prisma migrations against the dev database.
 
+### Survey Packages Build & Cache
+
+The `@formbricks/surveys` package is pre-compiled (Vite → UMD + ESM) and the built bundle is copied to `apps/web/public/js/`. The Next.js app imports from `dist/`, **not** the source files. This means:
+
+- After any change to `packages/surveys` or its dependencies (`packages/survey-ui`, `packages/types`, etc.), you **must rebuild** for changes to take effect in the running app.
+- Turborepo caches build outputs aggressively. Always use `--force` to bypass the cache when iterating on survey packages:
+  ```
+  rm -rf packages/surveys/dist apps/web/public/js/surveys.* node_modules/.cache/turbo
+  pnpm build --filter=@formbricks/surveys... --force
+  ```
+- The browser also caches the UMD bundle (`surveys.umd.cjs`) served from `public/js/`. After rebuilding, do a **hard refresh** (Cmd+Shift+R / Ctrl+Shift+R) or disable the browser cache via DevTools to pick up the new bundle.
+- If changes still don't appear, restart the Next.js dev server (`pnpm dev`).
+
 ## Coding Style & Naming Conventions
 
 TypeScript, React, and Prisma are the primary languages. Use the shared ESLint presets (`@formbricks/eslint-config`) and Prettier preset (110-char width, semicolons, double quotes, sorted import groups). Two-space indentation is standard; prefer `PascalCase` for React components and folders under `modules/`, `camelCase` for functions/variables, and `SCREAMING_SNAKE_CASE` only for constants. When adding mocks, place them inside `__mocks__` so import ordering stays stable.

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/workspaces/new/settings/components/ProjectSettings.tsx

@@ -3,7 +3,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
@@ -17,6 +17,7 @@ import {
 import { createProjectAction } from "@/app/(app)/environments/[environmentId]/actions";
 import { previewSurvey } from "@/app/lib/templates";
 import { FORMBRICKS_SURVEYS_FILTERS_KEY_LS } from "@/lib/localStorage";
+import { buildStylingFromBrandColor } from "@/lib/styling/constants";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { TOrganizationTeam } from "@/modules/ee/teams/project-teams/types/team";
 import { CreateTeamModal } from "@/modules/ee/teams/team-list/components/create-team-modal";
@@ -64,10 +65,17 @@ export const ProjectSettings = ({
   const { t } = useTranslation();
   const addProject = async (data: TProjectUpdateInput) => {
     try {
+      // Build the full styling from the chosen brand color so all derived
+      // colours (question, button, input, option, progress, etc.) are persisted.
+      // Without this, only brandColor is saved and the look-and-feel page falls
+      // back to STYLE_DEFAULTS computed from the default brand (#64748b).
+      const fullStyling = buildStylingFromBrandColor(data.styling?.brandColor?.light);
+
       const createProjectResponse = await createProjectAction({
         organizationId,
         data: {
           ...data,
+          styling: fullStyling,
           config: { channel, industry },
           teamIds: data.teamIds,
         },
@@ -112,6 +120,7 @@ export const ProjectSettings = ({
   const projectName = form.watch("name");
   const logoUrl = form.watch("logo.url");
   const brandColor = form.watch("styling.brandColor.light") ?? defaultBrandColor;
+  const previewStyling = useMemo(() => buildStylingFromBrandColor(brandColor), [brandColor]);
   const { isSubmitting } = form.formState;
 
   const organizationTeamsOptions = organizationTeams.map((team) => ({
@@ -226,7 +235,7 @@ export const ProjectSettings = ({
             alt="Logo"
             width={256}
             height={56}
-            className="absolute top-2 left-2 -mb-6 h-20 w-auto max-w-64 rounded-lg border object-contain p-1"
+            className="absolute left-2 top-2 -mb-6 h-20 w-auto max-w-64 rounded-lg border object-contain p-1"
           />
         )}
         <p className="text-sm text-slate-400">{t("common.preview")}</p>
@@ -235,7 +244,7 @@ export const ProjectSettings = ({
             appUrl={publicDomain}
             isPreviewMode={true}
             survey={previewSurvey(projectName || "my Product", t)}
-            styling={{ brandColor: { light: brandColor } }}
+            styling={previewStyling}
             isBrandingEnabled={false}
             languageCode="default"
             onFileUpload={async (file) => file.name}

apps/web/app/lib/templates.ts

@@ -4848,12 +4848,26 @@ export const previewSurvey = (projectName: string, t: TFunction): TSurvey => {
                 t("templates.preview_survey_question_2_choice_2_label"),
               ],
               headline: t("templates.preview_survey_question_2_headline"),
+              subheader: t("templates.preview_survey_question_2_subheader"),
               required: true,
               shuffleOption: "none",
             }),
             isDraft: true,
           },
+          {
+            ...buildOpenTextElement({
+              id: "preview_input_field_element",
+              headline: t("templates.preview_survey_input_headline"),
+              subheader: "",
+              placeholder: t("templates.preview_survey_input_placeholder"),
+              required: false,
+              inputType: "text",
+              longAnswer: false,
+            }),
+            isDraft: true,
+          },
         ],
+        buttonLabel: createI18nString(t("templates.next"), []),
         backButtonLabel: createI18nString(t("templates.preview_survey_question_2_back_button_label"), []),
       },
       {

apps/web/i18n.lock

@@ -1085,7 +1085,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: dbe1ada4512d6c3f80c54c8fac107ec6
     environments/surveys/edit/add_option: 143c54f0b201067fe5159284d6daeca2
@@ -1124,6 +1123,7 @@ checksums:
     environments/surveys/edit/block_duplicated: dc9e9fab2b1cd91f6c265324b34c6376
     environments/surveys/edit/bold: 4d7306bc355ed2befd6a9237c5452ee6
     environments/surveys/edit/brand_color: 84ddb5736deb9f5c081ffe4962a6c63e
+    environments/surveys/edit/brand_color_description: 1cd10092621d375a37e297cc6353bce7
     environments/surveys/edit/brightness: 45425b6db1872225bfff71cf619d0e64
     environments/surveys/edit/bulk_edit: 59bd1a55587c8cbad716afbf2509e5bb
     environments/surveys/edit/bulk_edit_description: 9b5b2c6183c6c51689e16d7ba02ec9bb
@@ -1141,7 +1141,9 @@ checksums:
     environments/surveys/edit/capture_new_action: 0aa2a3c399b62b1a52307deedf4922e8
     environments/surveys/edit/card_arrangement_for_survey_type_derived: c06b9aaebcc11bc16e57a445b62361fc
     environments/surveys/edit/card_background_color: acd5d023e1d1a4471b053dce504c7a83
+    environments/surveys/edit/card_background_color_description: c96baa7fab5f2dfc41ff2e6a4e0242b0
     environments/surveys/edit/card_border_color: 8d7c7f4cbd99f154ce892dfa258eb504
+    environments/surveys/edit/card_border_color_description: 57828ef76f8d055c530c1e0b0c0ddc09
     environments/surveys/edit/card_styling: 47137a7e809b060ca94418202a8fd3c5
     environments/surveys/edit/casual: 6534fe68718fade470a9031f7390409e
     environments/surveys/edit/caution_edit_duplicate: ee93bccb34fcd707e1ef4735f1c2fc31
@@ -1156,15 +1158,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
@@ -1304,7 +1299,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
@@ -1315,7 +1309,9 @@ checksums:
     environments/surveys/edit/initial_value: 809ee46fd787f4dc0146b3a80af5c2de
     environments/surveys/edit/inner_text: d1c7c98cfdb2fae3be91b7ee44288847
     environments/surveys/edit/input_border_color: d8a68d6b573189c291db6d83496210f6
+    environments/surveys/edit/input_border_color_description: d338a4a6556db30ae7d5f8c7027bdcd4
     environments/surveys/edit/input_color: 55a0a092d16a1a6899c07b1b00d08604
+    environments/surveys/edit/input_color_description: fa9f72ea65480c6b6e9e14b89109af03
     environments/surveys/edit/insert_link: c42ce4cb6ed35d5bd1389523585cc57e
     environments/surveys/edit/invalid_targeting: db9d1143c82a085c5dddf09492ea753c
     environments/surveys/edit/invalid_video_url_warning: 2e6a8eb121b46d7c3cc79d541b6a3cd5
@@ -1399,7 +1395,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
@@ -1459,6 +1454,7 @@ checksums:
     environments/surveys/edit/response_limits_redirections_and_more: e4f1cf94e56ad0e1b08701158d688802
     environments/surveys/edit/response_options: 2988136d5248d7726583108992dcbaee
     environments/surveys/edit/roundness: 5a161c8f5f258defb57ed1d551737cc4
+    environments/surveys/edit/roundness_description: bde131aa5674836416dcdf2ff517d899
     environments/surveys/edit/row_used_in_logic_error: f89453ff1b6db77ad84af840fedd9813
     environments/surveys/edit/rows: 8f41f34e6ca28221cf1ebd948af4c151
     environments/surveys/edit/save_and_close: 6ede705b3f82f30269ff3054a5049e34
@@ -1500,7 +1496,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
@@ -1940,6 +1935,69 @@ 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_bg_description: 9f14ec79ed40c0d3eb168cc46a9e0a14
+    environments/workspace/look/advanced_styling_field_button_border_radius_description: 5677ee84511896ab9c369c0aced4c352
+    environments/workspace/look/advanced_styling_field_button_font_size_description: 59508854b0101a89fab8250f79c0f3ba
+    environments/workspace/look/advanced_styling_field_button_font_weight_description: d3dab571b0f1bc09d645be66c6686a06
+    environments/workspace/look/advanced_styling_field_button_height_description: 1ab13a11281d2c303146e0483f12d948
+    environments/workspace/look/advanced_styling_field_button_padding_x_description: 10e14296468321c13fda77fd1ba58dfd
+    environments/workspace/look/advanced_styling_field_button_padding_y_description: 98b4aeff2940516d05ea61bdc1211d0d
+    environments/workspace/look/advanced_styling_field_button_text: 3304e88bcc3869f3a306634b541e1e07
+    environments/workspace/look/advanced_styling_field_button_text_description: 088f12906c8d2c06d3506f51d8ef8a89
+    environments/workspace/look/advanced_styling_field_description_color: e2f4cbc96d3f0b75837a9edc95a5eeda
+    environments/workspace/look/advanced_styling_field_description_color_description: f69d10a21c9233e0803f024f2e555485
+    environments/workspace/look/advanced_styling_field_description_size: a0d51c3ab7dc56320ecedc2b27917842
+    environments/workspace/look/advanced_styling_field_description_size_description: ff880ea1beddd1b1ec7416d0b8a69cf3
+    environments/workspace/look/advanced_styling_field_description_weight: 514680cc7202ad29835c1cbcde3def1c
+    environments/workspace/look/advanced_styling_field_description_weight_description: 441ac8db1a32557813eb68fbfd759061
+    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_color_description: b3fa9c2fc5da9ee11c1f279e4f949600
+    environments/workspace/look/advanced_styling_field_headline_size: ddc49fa27fc97ed286d5c4309edd9a3c
+    environments/workspace/look/advanced_styling_field_headline_size_description: 13debc3855e4edae992c7a1ebff599c3
+    environments/workspace/look/advanced_styling_field_headline_weight: 0c8b8262945c61f8e2978502362e0a42
+    environments/workspace/look/advanced_styling_field_headline_weight_description: 1a9c40bd76ff5098b1e48b1d3893171b
+    environments/workspace/look/advanced_styling_field_height: f4da6d7ecd26e3fa75cfea03abb60c00
+    environments/workspace/look/advanced_styling_field_indicator_bg: 00febda2901af0f1b0c17e44f9917c38
+    environments/workspace/look/advanced_styling_field_indicator_bg_description: 7eb3b54a8b331354ec95c0dc1545c620
+    environments/workspace/look/advanced_styling_field_input_border_radius_description: 0007f1bb572b35d9a3720daeb7a55617
+    environments/workspace/look/advanced_styling_field_input_font_size_description: 5311f95dcbd083623e35c98ea5374c3b
+    environments/workspace/look/advanced_styling_field_input_height_description: b704fc67e805223992c811d6f86a9c00
+    environments/workspace/look/advanced_styling_field_input_padding_x_description: 10e14296468321c13fda77fd1ba58dfd
+    environments/workspace/look/advanced_styling_field_input_padding_y_description: 98b4aeff2940516d05ea61bdc1211d0d
+    environments/workspace/look/advanced_styling_field_input_placeholder_opacity_description: f55a6700884d24014404e58876121ddf
+    environments/workspace/look/advanced_styling_field_input_shadow_description: b59ea4007756cecda47f216987ba05f6
+    environments/workspace/look/advanced_styling_field_input_text: 4999bfded16b7d0bbcc858b399745eaa
+    environments/workspace/look/advanced_styling_field_input_text_description: 460450df24ea0cc902710118a5000feb
+    environments/workspace/look/advanced_styling_field_option_bg: 0ceaed10d99ed4ad83cb0934ab970174
+    environments/workspace/look/advanced_styling_field_option_bg_description: 6cd6ccecbbb9f2f19439d7c682eb67c1
+    environments/workspace/look/advanced_styling_field_option_border_radius_description: 23f81c25b2681a7c9e2c4f2e7d2e0656
+    environments/workspace/look/advanced_styling_field_option_font_size_description: 5430fd9b08819972f0a613bf3fa659da
+    environments/workspace/look/advanced_styling_field_option_label: 2767a5db32742073a01aac16488e93dc
+    environments/workspace/look/advanced_styling_field_option_label_description: f42c9fc7b19cc2cb9b366a4cd31ae695
+    environments/workspace/look/advanced_styling_field_option_padding_x_description: 10e14296468321c13fda77fd1ba58dfd
+    environments/workspace/look/advanced_styling_field_option_padding_y_description: 98b4aeff2940516d05ea61bdc1211d0d
+    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_bg_description: 8a56258273dfe49e83fe752ea9e8daed
+    environments/workspace/look/advanced_styling_field_track_height: 9ce57cb4583039c224a37e013efb6b8f
+    environments/workspace/look/advanced_styling_field_track_height_description: 90243a4374e15d9118ad0fd93d5f3614
+    environments/workspace/look/advanced_styling_field_upper_label_color: 65d75c60dfdba88e5fed38bcb24a0a5d
+    environments/workspace/look/advanced_styling_field_upper_label_color_description: ae2276506807c7ceeb7a8b87723a8dd4
+    environments/workspace/look/advanced_styling_field_upper_label_size: ea0ca9a3ffa1650f97a31df453b0afc7
+    environments/workspace/look/advanced_styling_field_upper_label_size_description: 061668625be0f7a68ebc2e2ebe49e5a9
+    environments/workspace/look/advanced_styling_field_upper_label_weight: 946c5836d2cfaaee21e494424d550887
+    environments/workspace/look/advanced_styling_field_upper_label_weight_description: 916b03c719a8dead351679336aabcf53
+    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/email_customization: ae399f381183a4fe0ffd41ab496b5d8f
@@ -1952,6 +2010,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
@@ -1966,6 +2027,7 @@ checksums:
     environments/workspace/look/show_formbricks_branding_in: 80fabfec9b34a13c0445d02b923216ed
     environments/workspace/look/show_powered_by_formbricks: a0e96edadec8ef326423feccc9d06be7
     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
@@ -2682,6 +2744,8 @@ checksums:
     templates/picture_selection_description: 44115e3668be00ae4854c299e5976398
     templates/preview_survey_ending_card_description: 6a98bdb1b083e437bb71d8b6c27b0e3a
     templates/preview_survey_ending_card_headline: 3512326ea9ad9a8a6c420a1e69d4d93f
+    templates/preview_survey_input_headline: 277d044caa828f35758b165516da917d
+    templates/preview_survey_input_placeholder: 743c34ea842287e929a5e7e6b7a4e89b
     templates/preview_survey_name: 82503c2dba9f071c93860e5ce9584e14
     templates/preview_survey_question_1_headline: 91622f99f8018adefb3ed0921bc1ad7a
     templates/preview_survey_question_1_lower_label: ff4681be0a94185111459994fe58478c
@@ -2691,6 +2755,7 @@ checksums:
     templates/preview_survey_question_2_choice_1_label: 7885d14d0e01962fd290395ccd96ecfc
     templates/preview_survey_question_2_choice_2_label: 1af148222f327f28cf0db6513de5989e
     templates/preview_survey_question_2_headline: 5cfb173d156555227fbc2c97ad921e72
+    templates/preview_survey_question_2_subheader: 2e652d8acd68d072e5a0ae686c4011c0
     templates/preview_survey_welcome_card_headline: 8778dc41547a2778d0f9482da989fc00
     templates/prioritize_features_description: 1eae41fad0e3947f803d8539081e59ec
     templates/prioritize_features_name: 4ca59ff1f9c319aaa68c3106d820fd6a

apps/web/lib/styling/constants.ts

@@ -1,5 +1,6 @@
 // https://github.com/airbnb/javascript/#naming--uppercase
 import { TProjectStyling } from "@formbricks/types/project";
+import { isLight, mixColor } from "@/lib/utils/colors";
 
 export const COLOR_DEFAULTS = {
   brandColor: "#64748b",
@@ -11,32 +12,174 @@ export const COLOR_DEFAULTS = {
   highlightBorderColor: "#64748b",
 } as const;
 
-export const defaultStyling: TProjectStyling = {
+const DEFAULT_BRAND_COLOR = "#64748b";
+
+/**
+ * Derives a complete set of suggested color values from a single brand color.
+ *
+ * Used by the project-level "Suggest Colors" button **and** to build
+ * `STYLE_DEFAULTS` so that a fresh install always has colours that are
+ * visually cohesive with the default brand.
+ *
+ * The returned object is a flat map of form-field paths to values so it
+ * can be spread directly into form defaults or applied via `form.setValue`.
+ */
+export const getSuggestedColors = (brandColor: string = DEFAULT_BRAND_COLOR) => {
+  // Question / dark text: brand darkened with black (visible brand tint)
+  const questionColor = mixColor(brandColor, "#000000", 0.35);
+  // Input / option background: white with noticeable brand tint
+  const inputBg = mixColor(brandColor, "#ffffff", 0.92);
+  // Input border: visible brand-tinted border
+  const inputBorder = mixColor(brandColor, "#ffffff", 0.6);
+  // Card tones
+  const cardBg = mixColor(brandColor, "#ffffff", 0.97);
+  const cardBorder = mixColor(brandColor, "#ffffff", 0.8);
+  // Page background
+  const pageBg = mixColor(brandColor, "#ffffff", 0.855);
+
+  return {
+    // General
+    "brandColor.light": brandColor,
+    "questionColor.light": questionColor,
+
+    // Headlines & Descriptions — use questionColor to match the legacy behaviour
+    // where all text elements derived their color from questionColor.
+    "elementHeadlineColor.light": questionColor,
+    "elementDescriptionColor.light": questionColor,
+    "elementUpperLabelColor.light": questionColor,
+
+    // Buttons — use the brand color so the button matches the user's intent.
+    "buttonBgColor.light": brandColor,
+    "buttonTextColor.light": isLight(brandColor) ? "#0f172a" : "#ffffff",
+
+    // Inputs
+    "inputColor.light": inputBg,
+    "inputBorderColor.light": inputBorder,
+    "inputTextColor.light": questionColor,
+
+    // Options (Radio / Checkbox)
+    "optionBgColor.light": inputBg,
+    "optionLabelColor.light": questionColor,
+
+    // Card
+    "cardBackgroundColor.light": cardBg,
+    "cardBorderColor.light": cardBorder,
+
+    // Highlight / Focus
+    "highlightBorderColor.light": mixColor(brandColor, "#ffffff", 0.25),
+
+    // Progress Bar — indicator uses the brand color; track is a lighter tint.
+    "progressIndicatorBgColor.light": brandColor,
+    "progressTrackBgColor.light": mixColor(brandColor, "#ffffff", 0.8),
+
+    // Background
+    background: { bg: pageBg, bgType: "color" as const, brightness: 100 },
+  };
+};
+
+// Pre-compute colors derived from the default brand color.
+const _colors = getSuggestedColors(DEFAULT_BRAND_COLOR);
+
+/**
+ * Single source of truth for every styling default.
+ *
+ * Color values are derived from the default brand color (#64748b) via
+ * `getSuggestedColors()`.  Non-color values (dimensions, weights, sizes)
+ * are hardcoded here and must be kept in sync with globals.css.
+ *
+ * Used everywhere: form defaults, preview rendering, email templates,
+ * and as the reset target for "Restore defaults".
+ */
+export const STYLE_DEFAULTS: TProjectStyling = {
   allowStyleOverwrite: true,
-  brandColor: {
-    light: COLOR_DEFAULTS.brandColor,
-  },
-  questionColor: {
-    light: COLOR_DEFAULTS.questionColor,
-  },
-  inputColor: {
-    light: COLOR_DEFAULTS.inputColor,
-  },
-  inputBorderColor: {
-    light: COLOR_DEFAULTS.inputBorderColor,
-  },
-  cardBackgroundColor: {
-    light: COLOR_DEFAULTS.cardBackgroundColor,
-  },
-  cardBorderColor: {
-    light: COLOR_DEFAULTS.cardBorderColor,
-  },
+  brandColor: { light: _colors["brandColor.light"] },
+  questionColor: { light: _colors["questionColor.light"] },
+  inputColor: { light: _colors["inputColor.light"] },
+  inputBorderColor: { light: _colors["inputBorderColor.light"] },
+  cardBackgroundColor: { light: _colors["cardBackgroundColor.light"] },
+  cardBorderColor: { light: _colors["cardBorderColor.light"] },
   isLogoHidden: false,
-  highlightBorderColor: undefined,
+  highlightBorderColor: { light: _colors["highlightBorderColor.light"] },
   isDarkModeEnabled: false,
   roundness: 8,
-  cardArrangement: {
-    linkSurveys: "straight",
-    appSurveys: "straight",
-  },
+  cardArrangement: { linkSurveys: "simple", appSurveys: "simple" },
+
+  // Headlines & Descriptions
+  elementHeadlineColor: { light: _colors["elementHeadlineColor.light"] },
+  elementHeadlineFontSize: 16,
+  elementHeadlineFontWeight: 600,
+  elementDescriptionColor: { light: _colors["elementDescriptionColor.light"] },
+  elementDescriptionFontSize: 14,
+  elementDescriptionFontWeight: 400,
+  elementUpperLabelColor: { light: _colors["elementUpperLabelColor.light"] },
+  elementUpperLabelFontSize: 12,
+  elementUpperLabelFontWeight: 400,
+
+  // Inputs
+  inputTextColor: { light: _colors["inputTextColor.light"] },
+  inputBorderRadius: 8,
+  inputHeight: 40,
+  inputFontSize: 14,
+  inputPaddingX: 16,
+  inputPaddingY: 16,
+  inputPlaceholderOpacity: 0.5,
+  inputShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+
+  // Buttons
+  buttonBgColor: { light: _colors["buttonBgColor.light"] },
+  buttonTextColor: { light: _colors["buttonTextColor.light"] },
+  buttonBorderRadius: 8,
+  buttonHeight: "auto",
+  buttonFontSize: 16,
+  buttonFontWeight: 500,
+  buttonPaddingX: 12,
+  buttonPaddingY: 12,
+
+  // Options
+  optionBgColor: { light: _colors["optionBgColor.light"] },
+  optionLabelColor: { light: _colors["optionLabelColor.light"] },
+  optionBorderRadius: 8,
+  optionPaddingX: 16,
+  optionPaddingY: 16,
+  optionFontSize: 14,
+
+  // Progress Bar
+  progressTrackHeight: 8,
+  progressTrackBgColor: { light: _colors["progressTrackBgColor.light"] },
+  progressIndicatorBgColor: { light: _colors["progressIndicatorBgColor.light"] },
+};
+
+/**
+ * Builds a complete TProjectStyling object from a single brand color.
+ *
+ * Uses STYLE_DEFAULTS for all non-color properties (dimensions, weights, etc.)
+ * and derives every color from the given brand color via getSuggestedColors().
+ *
+ * Useful when only a brand color is known (e.g. onboarding) and a fully
+ * coherent styling object is needed for both preview rendering and persistence.
+ */
+export const buildStylingFromBrandColor = (brandColor: string = DEFAULT_BRAND_COLOR): TProjectStyling => {
+  const colors = getSuggestedColors(brandColor);
+
+  return {
+    ...STYLE_DEFAULTS,
+    brandColor: { light: colors["brandColor.light"] },
+    questionColor: { light: colors["questionColor.light"] },
+    elementHeadlineColor: { light: colors["elementHeadlineColor.light"] },
+    elementDescriptionColor: { light: colors["elementDescriptionColor.light"] },
+    elementUpperLabelColor: { light: colors["elementUpperLabelColor.light"] },
+    buttonBgColor: { light: colors["buttonBgColor.light"] },
+    buttonTextColor: { light: colors["buttonTextColor.light"] },
+    inputColor: { light: colors["inputColor.light"] },
+    inputBorderColor: { light: colors["inputBorderColor.light"] },
+    inputTextColor: { light: colors["inputTextColor.light"] },
+    optionBgColor: { light: colors["optionBgColor.light"] },
+    optionLabelColor: { light: colors["optionLabelColor.light"] },
+    cardBackgroundColor: { light: colors["cardBackgroundColor.light"] },
+    cardBorderColor: { light: colors["cardBorderColor.light"] },
+    highlightBorderColor: { light: colors["highlightBorderColor.light"] },
+    progressIndicatorBgColor: { light: colors["progressIndicatorBgColor.light"] },
+    progressTrackBgColor: { light: colors["progressTrackBgColor.light"] },
+    background: colors.background,
+  };
 };

apps/web/locales/de-DE.json

@@ -1156,7 +1156,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",
@@ -1195,6 +1194,7 @@
         "block_duplicated": "Block dupliziert.",
         "bold": "Fett",
         "brand_color": "Markenfarbe",
+        "brand_color_description": "Wird auf Buttons, Links und Hervorhebungen angewendet.",
         "brightness": "Helligkeit",
         "bulk_edit": "Massenbearbeitung",
         "bulk_edit_description": "Bearbeiten Sie alle Optionen unten, eine pro Zeile. Leere Zeilen werden übersprungen und Duplikate entfernt.",
@@ -1212,7 +1212,9 @@
         "capture_new_action": "Neue Aktion erfassen",
         "card_arrangement_for_survey_type_derived": "Kartenanordnung für {surveyTypeDerived} Umfragen",
         "card_background_color": "Hintergrundfarbe der Karte",
+        "card_background_color_description": "Füllt den Bereich der Umfragekarte.",
         "card_border_color": "Farbe des Kartenrandes",
+        "card_border_color_description": "Umrandet die Umfragekarte.",
         "card_styling": "Kartengestaltung",
         "casual": "Lässig",
         "caution_edit_duplicate": "Duplizieren & bearbeiten",
@@ -1227,15 +1229,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",
@@ -1375,7 +1370,6 @@
         "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_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",
@@ -1386,7 +1380,9 @@
         "initial_value": "Anfangswert",
         "inner_text": "Innerer Text",
         "input_border_color": "Randfarbe des Eingabefelds",
+        "input_border_color_description": "Umrandet Texteingaben und Textbereiche.",
         "input_color": "Farbe des Eingabefelds",
+        "input_color_description": "Füllt das Innere von Texteingaben.",
         "insert_link": "Link einfügen",
         "invalid_targeting": "Ungültiges Targeting: Bitte überprüfe deine Zielgruppenfilter",
         "invalid_video_url_warning": "Bitte gib eine gültige YouTube-, Vimeo- oder Loom-URL ein. Andere Video-Plattformen werden derzeit nicht unterstützt.",
@@ -1470,7 +1466,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",
@@ -1532,6 +1527,7 @@
         "response_limits_redirections_and_more": "Antwort Limits, Weiterleitungen und mehr.",
         "response_options": "Antwortoptionen",
         "roundness": "Rundheit",
+        "roundness_description": "Steuert, wie abgerundet die Kartenecken sind.",
         "row_used_in_logic_error": "Diese Zeile wird in der Logik der Frage {questionIndex} verwendet. Bitte entferne sie zuerst aus der Logik.",
         "rows": "Zeilen",
         "save_and_close": "Speichern & Schließen",
@@ -1573,7 +1569,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",
@@ -2057,6 +2052,69 @@
       "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_bg_description": "Füllt den Weiter-/Absenden-Button.",
+        "advanced_styling_field_button_border_radius_description": "Rundet die Button-Ecken ab.",
+        "advanced_styling_field_button_font_size_description": "Skaliert den Text der Button-Beschriftung.",
+        "advanced_styling_field_button_font_weight_description": "Macht den Button-Text heller oder fetter.",
+        "advanced_styling_field_button_height_description": "Steuert die Button-Höhe.",
+        "advanced_styling_field_button_padding_x_description": "Fügt links und rechts Abstand hinzu.",
+        "advanced_styling_field_button_padding_y_description": "Fügt oben und unten Abstand hinzu.",
+        "advanced_styling_field_button_text": "Button-Text",
+        "advanced_styling_field_button_text_description": "Färbt die Beschriftung innerhalb von Buttons.",
+        "advanced_styling_field_description_color": "Beschreibungsfarbe",
+        "advanced_styling_field_description_color_description": "Färbt den Text unterhalb jeder Überschrift.",
+        "advanced_styling_field_description_size": "Schriftgröße der Beschreibung",
+        "advanced_styling_field_description_size_description": "Skaliert den Beschreibungstext.",
+        "advanced_styling_field_description_weight": "Schriftstärke der Beschreibung",
+        "advanced_styling_field_description_weight_description": "Macht den Beschreibungstext heller oder fetter.",
+        "advanced_styling_field_font_size": "Schriftgröße",
+        "advanced_styling_field_font_weight": "Schriftstärke",
+        "advanced_styling_field_headline_color": "Überschriftsfarbe",
+        "advanced_styling_field_headline_color_description": "Färbt den Hauptfragetext.",
+        "advanced_styling_field_headline_size": "Schriftgröße der Überschrift",
+        "advanced_styling_field_headline_size_description": "Skaliert den Überschriftentext.",
+        "advanced_styling_field_headline_weight": "Schriftstärke der Überschrift",
+        "advanced_styling_field_headline_weight_description": "Macht den Überschriftentext heller oder fetter.",
+        "advanced_styling_field_height": "Höhe",
+        "advanced_styling_field_indicator_bg": "Indikator-Hintergrund",
+        "advanced_styling_field_indicator_bg_description": "Färbt den gefüllten Teil des Balkens.",
+        "advanced_styling_field_input_border_radius_description": "Rundet die Eingabeecken ab.",
+        "advanced_styling_field_input_font_size_description": "Skaliert den eingegebenen Text in Eingabefeldern.",
+        "advanced_styling_field_input_height_description": "Steuert die Höhe des Eingabefelds.",
+        "advanced_styling_field_input_padding_x_description": "Fügt links und rechts Abstand hinzu.",
+        "advanced_styling_field_input_padding_y_description": "Fügt oben und unten Abstand hinzu.",
+        "advanced_styling_field_input_placeholder_opacity_description": "Blendet den Platzhaltertext aus.",
+        "advanced_styling_field_input_shadow_description": "Fügt einen Schlagschatten um Eingabefelder hinzu.",
+        "advanced_styling_field_input_text": "Eingabetext",
+        "advanced_styling_field_input_text_description": "Färbt den eingegebenen Text in Eingabefeldern.",
+        "advanced_styling_field_option_bg": "Hintergrund",
+        "advanced_styling_field_option_bg_description": "Füllt die Optionselemente.",
+        "advanced_styling_field_option_border_radius_description": "Rundet die Ecken der Optionen ab.",
+        "advanced_styling_field_option_font_size_description": "Skaliert den Text der Optionsbeschriftung.",
+        "advanced_styling_field_option_label": "Label-Farbe",
+        "advanced_styling_field_option_label_description": "Färbt den Text der Optionsbeschriftung.",
+        "advanced_styling_field_option_padding_x_description": "Fügt links und rechts Abstand hinzu.",
+        "advanced_styling_field_option_padding_y_description": "Fügt oben und unten Abstand hinzu.",
+        "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_bg_description": "Färbt den nicht ausgefüllten Teil des Balkens.",
+        "advanced_styling_field_track_height": "Track-Höhe",
+        "advanced_styling_field_track_height_description": "Steuert die Dicke des Fortschrittsbalkens.",
+        "advanced_styling_field_upper_label_color": "Farbe des oberen Labels",
+        "advanced_styling_field_upper_label_color_description": "Färbt die kleine Beschriftung über Eingabefeldern.",
+        "advanced_styling_field_upper_label_size": "Schriftgröße des oberen Labels",
+        "advanced_styling_field_upper_label_size_description": "Skaliert die kleine Beschriftung über Eingabefeldern.",
+        "advanced_styling_field_upper_label_weight": "Schriftstärke des oberen Labels",
+        "advanced_styling_field_upper_label_weight_description": "Macht die Beschriftung leichter oder fetter.",
+        "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.",
         "email_customization": "E-Mail-Anpassung",
@@ -2069,6 +2127,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öchtest du ein passendes Farbschema basierend auf deiner Markenfarbe generieren? Dies überschreibt deine 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",
@@ -2083,6 +2144,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."
       },
@@ -2837,6 +2899,8 @@
     "picture_selection_description": "Bitte die Befragten, ein oder mehrere Bilder auszuwählen",
     "preview_survey_ending_card_description": "Mach bitte mit deinem Onboarding weiter.",
     "preview_survey_ending_card_headline": "Geschafft!",
+    "preview_survey_input_headline": "Möchtest Du noch etwas mitteilen?",
+    "preview_survey_input_placeholder": "Hinterlasse eine Notiz...",
     "preview_survey_name": "Vorschau",
     "preview_survey_question_1_headline": "Wie würdest Du {projectName} bewerten?",
     "preview_survey_question_1_lower_label": "Nicht gut",
@@ -2846,6 +2910,7 @@
     "preview_survey_question_2_choice_1_label": "Ja, halte mich auf dem Laufenden.",
     "preview_survey_question_2_choice_2_label": "Nein, danke!",
     "preview_survey_question_2_headline": "Möchtest Du auf dem Laufenden bleiben?",
+    "preview_survey_question_2_subheader": "Dies ist eine Beispielbeschreibung.",
     "preview_survey_welcome_card_headline": "Willkommen!",
     "prioritize_features_description": "Identifiziere die Funktionen, die deine Nutzer am meisten und am wenigsten brauchen.",
     "prioritize_features_name": "Funktionen priorisieren",

apps/web/locales/en-US.json

@@ -1156,7 +1156,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",
@@ -1195,6 +1195,7 @@
         "block_duplicated": "Block duplicated.",
         "bold": "Bold",
         "brand_color": "Brand color",
+        "brand_color_description": "Applied to buttons, links and highlights.",
         "brightness": "Brightness",
         "bulk_edit": "Bulk edit",
         "bulk_edit_description": "Edit all options below, one per line. Empty lines will be skipped and duplicates removed.",
@@ -1212,7 +1213,9 @@
         "capture_new_action": "Capture new action",
         "card_arrangement_for_survey_type_derived": "Card Arrangement for {surveyTypeDerived} Surveys",
         "card_background_color": "Card background color",
+        "card_background_color_description": "Fills the survey card area.",
         "card_border_color": "Card border color",
+        "card_border_color_description": "Outlines the survey card.",
         "card_styling": "Card styling",
         "casual": "Casual",
         "caution_edit_duplicate": "Duplicate & edit",
@@ -1227,15 +1230,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",
@@ -1375,7 +1374,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",
@@ -1386,7 +1385,9 @@
         "initial_value": "Initial value",
         "inner_text": "Inner Text",
         "input_border_color": "Input border color",
+        "input_border_color_description": "Outlines text inputs and textareas.",
         "input_color": "Input color",
+        "input_color_description": "Fills the inside of text inputs.",
         "insert_link": "Insert link",
         "invalid_targeting": "Invalid targeting: Please check your audience filters",
         "invalid_video_url_warning": "Please enter a valid YouTube, Vimeo, or Loom URL. We currently do not support other video hosting providers.",
@@ -1470,7 +1471,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",
@@ -1532,6 +1533,7 @@
         "response_limits_redirections_and_more": "Response limits, redirections and more.",
         "response_options": "Response Options",
         "roundness": "Roundness",
+        "roundness_description": "Controls how rounded the card corners are.",
         "row_used_in_logic_error": "This row is used in logic of question {questionIndex}. Please remove it from logic first.",
         "rows": "Rows",
         "save_and_close": "Save & Close",
@@ -1573,7 +1575,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",
@@ -2057,6 +2059,75 @@
       "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_bg_description": "Fills the Next / Submit button.",
+        "advanced_styling_field_button_border_radius_description": "Rounds the button corners.",
+        "advanced_styling_field_button_font_size_description": "Scales the button label text.",
+        "advanced_styling_field_button_font_weight_description": "Makes button text lighter or bolder.",
+        "advanced_styling_field_button_height_description": "Controls the button height.",
+        "advanced_styling_field_button_padding_x_description": "Adds space on the left and right.",
+        "advanced_styling_field_button_padding_y_description": "Adds space on the top and bottom.",
+        "advanced_styling_field_button_text": "Button Text",
+        "advanced_styling_field_button_text_description": "Colors the label inside buttons.",
+        "advanced_styling_field_description_color": "Description Color",
+        "advanced_styling_field_description_color_description": "Colors the text below each headline.",
+        "advanced_styling_field_description_size": "Description Font Size",
+        "advanced_styling_field_description_size_description": "Scales the description text.",
+        "advanced_styling_field_description_weight": "Description Font Weight",
+        "advanced_styling_field_description_weight_description": "Makes description text lighter or bolder.",
+
+        "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_color_description": "Colors the main question text.",
+        "advanced_styling_field_headline_size": "Headline Font Size",
+        "advanced_styling_field_headline_size_description": "Scales the headline text.",
+        "advanced_styling_field_headline_weight": "Headline Font Weight",
+        "advanced_styling_field_headline_weight_description": "Makes headline text lighter or bolder.",
+        "advanced_styling_field_height": "Height",
+        "advanced_styling_field_indicator_bg": "Indicator Background",
+        "advanced_styling_field_indicator_bg_description": "Colors the filled portion of the bar.",
+
+        "advanced_styling_field_input_border_radius_description": "Rounds the input corners.",
+        "advanced_styling_field_input_font_size_description": "Scales the typed text in inputs.",
+        "advanced_styling_field_input_height_description": "Controls the input field height.",
+        "advanced_styling_field_input_padding_x_description": "Adds space on the left and right.",
+        "advanced_styling_field_input_padding_y_description": "Adds space on the top and bottom.",
+        "advanced_styling_field_input_placeholder_opacity_description": "Fades the placeholder hint text.",
+        "advanced_styling_field_input_shadow_description": "Adds a drop shadow around inputs.",
+        "advanced_styling_field_input_text": "Input Text",
+        "advanced_styling_field_input_text_description": "Colors the typed text in inputs.",
+        "advanced_styling_field_option_bg": "Background",
+        "advanced_styling_field_option_bg_description": "Fills the option items.",
+        "advanced_styling_field_option_border_radius_description": "Rounds the option corners.",
+        "advanced_styling_field_option_font_size_description": "Scales the option label text.",
+        "advanced_styling_field_option_label": "Label Color",
+        "advanced_styling_field_option_label_description": "Colors the option label text.",
+        "advanced_styling_field_option_padding_x_description": "Adds space on the left and right.",
+        "advanced_styling_field_option_padding_y_description": "Adds space on the top and bottom.",
+        "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_bg_description": "Colors the unfilled portion of the bar.",
+        "advanced_styling_field_track_height": "Track Height",
+        "advanced_styling_field_track_height_description": "Controls the progress bar thickness.",
+
+        "advanced_styling_field_upper_label_color": "Headline Label Color",
+        "advanced_styling_field_upper_label_color_description": "Colors the small label above inputs.",
+        "advanced_styling_field_upper_label_size": "Headline Label Font Size",
+        "advanced_styling_field_upper_label_size_description": "Scales the small label above inputs.",
+        "advanced_styling_field_upper_label_weight": "Headline Label Font Weight",
+        "advanced_styling_field_upper_label_weight_description": "Makes the label lighter or bolder.",
+        "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.",
         "email_customization": "Email Customization",
@@ -2069,6 +2140,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",
@@ -2083,6 +2157,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."
       },
@@ -2837,6 +2912,8 @@
     "picture_selection_description": "Ask respondents to choose one or more images",
     "preview_survey_ending_card_description": "Please continue your onboarding.",
     "preview_survey_ending_card_headline": "You did it!",
+    "preview_survey_input_headline": "Anything else to share?",
+    "preview_survey_input_placeholder": "Leave a note...",
     "preview_survey_name": "New Survey",
     "preview_survey_question_1_headline": "How would you rate {projectName}?",
     "preview_survey_question_1_lower_label": "Not good",
@@ -2846,6 +2923,7 @@
     "preview_survey_question_2_choice_1_label": "Yes, keep me informed.",
     "preview_survey_question_2_choice_2_label": "No, thank you!",
     "preview_survey_question_2_headline": "Want to stay in the loop?",
+    "preview_survey_question_2_subheader": "This is an example description.",
     "preview_survey_welcome_card_headline": "Welcome!",
     "prioritize_features_description": "Identify features your users need most and least.",
     "prioritize_features_name": "Prioritize Features",

apps/web/locales/es-ES.json

@@ -1156,7 +1156,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",
@@ -1195,6 +1194,7 @@
         "block_duplicated": "Bloque duplicado.",
         "bold": "Negrita",
         "brand_color": "Color de marca",
+        "brand_color_description": "Se aplica a botones, enlaces y resaltados.",
         "brightness": "Brillo",
         "bulk_edit": "Edición masiva",
         "bulk_edit_description": "Edita todas las opciones a continuación, una por línea. Las líneas vacías se omitirán y los duplicados se eliminarán.",
@@ -1212,7 +1212,9 @@
         "capture_new_action": "Capturar nueva acción",
         "card_arrangement_for_survey_type_derived": "Disposición de tarjetas para encuestas de tipo {surveyTypeDerived}",
         "card_background_color": "Color de fondo de la tarjeta",
+        "card_background_color_description": "Rellena el área de la tarjeta de encuesta.",
         "card_border_color": "Color del borde de la tarjeta",
+        "card_border_color_description": "Delinea la tarjeta de encuesta.",
         "card_styling": "Estilo de la tarjeta",
         "casual": "Informal",
         "caution_edit_duplicate": "Duplicar y editar",
@@ -1227,15 +1229,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",
@@ -1375,7 +1370,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",
@@ -1386,7 +1380,9 @@
         "initial_value": "Valor inicial",
         "inner_text": "Texto interior",
         "input_border_color": "Color del borde de entrada",
+        "input_border_color_description": "Delinea los campos de texto y áreas de texto.",
         "input_color": "Color de entrada",
+        "input_color_description": "Rellena el interior de los campos de texto.",
         "insert_link": "Insertar enlace",
         "invalid_targeting": "Segmentación no válida: por favor, comprueba tus filtros de audiencia",
         "invalid_video_url_warning": "Por favor, introduce una URL válida de YouTube, Vimeo o Loom. Actualmente no admitimos otros proveedores de alojamiento de vídeos.",
@@ -1470,7 +1466,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",
@@ -1532,6 +1527,7 @@
         "response_limits_redirections_and_more": "Límites de respuestas, redirecciones y más.",
         "response_options": "Opciones de respuesta",
         "roundness": "Redondez",
+        "roundness_description": "Controla qué tan redondeadas están las esquinas de la tarjeta.",
         "row_used_in_logic_error": "Esta fila se utiliza en la lógica de la pregunta {questionIndex}. Por favor, elimínala de la lógica primero.",
         "rows": "Filas",
         "save_and_close": "Guardar y cerrar",
@@ -1573,7 +1569,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",
@@ -2057,6 +2052,69 @@
       "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_bg_description": "Rellena el botón siguiente / enviar.",
+        "advanced_styling_field_button_border_radius_description": "Redondea las esquinas del botón.",
+        "advanced_styling_field_button_font_size_description": "Escala el texto de la etiqueta del botón.",
+        "advanced_styling_field_button_font_weight_description": "Hace el texto del botón más ligero o más grueso.",
+        "advanced_styling_field_button_height_description": "Controla la altura del botón.",
+        "advanced_styling_field_button_padding_x_description": "Añade espacio a la izquierda y a la derecha.",
+        "advanced_styling_field_button_padding_y_description": "Añade espacio arriba y abajo.",
+        "advanced_styling_field_button_text": "Texto del botón",
+        "advanced_styling_field_button_text_description": "Colorea la etiqueta dentro de los botones.",
+        "advanced_styling_field_description_color": "Color de la descripción",
+        "advanced_styling_field_description_color_description": "Colorea el texto debajo de cada titular.",
+        "advanced_styling_field_description_size": "Tamaño de fuente de la descripción",
+        "advanced_styling_field_description_size_description": "Escala el texto de la descripción.",
+        "advanced_styling_field_description_weight": "Grosor de fuente de la descripción",
+        "advanced_styling_field_description_weight_description": "Hace el texto de la descripción más ligero o más grueso.",
+        "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_color_description": "Colorea el texto principal de la pregunta.",
+        "advanced_styling_field_headline_size": "Tamaño de fuente del titular",
+        "advanced_styling_field_headline_size_description": "Escala el texto del titular.",
+        "advanced_styling_field_headline_weight": "Grosor de fuente del titular",
+        "advanced_styling_field_headline_weight_description": "Hace el texto del titular más ligero o más grueso.",
+        "advanced_styling_field_height": "Altura",
+        "advanced_styling_field_indicator_bg": "Fondo del indicador",
+        "advanced_styling_field_indicator_bg_description": "Colorea la porción rellena de la barra.",
+        "advanced_styling_field_input_border_radius_description": "Redondea las esquinas del campo.",
+        "advanced_styling_field_input_font_size_description": "Escala el texto escrito en los campos.",
+        "advanced_styling_field_input_height_description": "Controla la altura del campo de entrada.",
+        "advanced_styling_field_input_padding_x_description": "Añade espacio a la izquierda y a la derecha.",
+        "advanced_styling_field_input_padding_y_description": "Añade espacio en la parte superior e inferior.",
+        "advanced_styling_field_input_placeholder_opacity_description": "Atenúa el texto de sugerencia del marcador de posición.",
+        "advanced_styling_field_input_shadow_description": "Añade una sombra alrededor de los campos de entrada.",
+        "advanced_styling_field_input_text": "Texto de entrada",
+        "advanced_styling_field_input_text_description": "Colorea el texto escrito en los campos de entrada.",
+        "advanced_styling_field_option_bg": "Fondo",
+        "advanced_styling_field_option_bg_description": "Rellena los elementos de opción.",
+        "advanced_styling_field_option_border_radius_description": "Redondea las esquinas de las opciones.",
+        "advanced_styling_field_option_font_size_description": "Escala el texto de la etiqueta de opción.",
+        "advanced_styling_field_option_label": "Color de la etiqueta",
+        "advanced_styling_field_option_label_description": "Colorea el texto de la etiqueta de opción.",
+        "advanced_styling_field_option_padding_x_description": "Añade espacio a la izquierda y a la derecha.",
+        "advanced_styling_field_option_padding_y_description": "Añade espacio en la parte superior e inferior.",
+        "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_bg_description": "Colorea la parte no rellenada de la barra.",
+        "advanced_styling_field_track_height": "Altura de la pista",
+        "advanced_styling_field_track_height_description": "Controla el grosor de la barra de progreso.",
+        "advanced_styling_field_upper_label_color": "Color de la etiqueta del titular",
+        "advanced_styling_field_upper_label_color_description": "Colorea la etiqueta pequeña sobre los campos de entrada.",
+        "advanced_styling_field_upper_label_size": "Tamaño de fuente de la etiqueta del titular",
+        "advanced_styling_field_upper_label_size_description": "Escala la etiqueta pequeña sobre los campos de entrada.",
+        "advanced_styling_field_upper_label_weight": "Grosor de fuente de la etiqueta del titular",
+        "advanced_styling_field_upper_label_weight_description": "Hace que la etiqueta sea más ligera o más gruesa.",
+        "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.",
         "email_customization": "Personalización de correo electrónico",
@@ -2069,6 +2127,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 colores que combine con el color de tu marca? Esto sobrescribirá tu configuración de colores actual.",
+        "generate_theme_header": "¿Generar tema de colores?",
         "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",
@@ -2083,6 +2144,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."
       },
@@ -2837,6 +2899,8 @@
     "picture_selection_description": "Pide a los encuestados que elijan una o más imágenes",
     "preview_survey_ending_card_description": "Por favor, continúa con tu incorporación.",
     "preview_survey_ending_card_headline": "¡Lo has conseguido!",
+    "preview_survey_input_headline": "¿Algo más que compartir?",
+    "preview_survey_input_placeholder": "Deja una nota...",
     "preview_survey_name": "Encuesta nueva",
     "preview_survey_question_1_headline": "¿Cómo valorarías {projectName}?",
     "preview_survey_question_1_lower_label": "No es bueno",
@@ -2846,6 +2910,7 @@
     "preview_survey_question_2_choice_1_label": "Sí, mantenme informado.",
     "preview_survey_question_2_choice_2_label": "¡No, gracias!",
     "preview_survey_question_2_headline": "¿Quieres estar al tanto?",
+    "preview_survey_question_2_subheader": "Esta es una descripción de ejemplo.",
     "preview_survey_welcome_card_headline": "¡Bienvenido!",
     "prioritize_features_description": "Identifica las funciones que tus usuarios necesitan más y menos.",
     "prioritize_features_name": "Priorizar funciones",

apps/web/locales/fr-FR.json

@@ -1156,7 +1156,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",
@@ -1195,6 +1194,7 @@
         "block_duplicated": "Bloc dupliqué.",
         "bold": "Gras",
         "brand_color": "Couleur de marque",
+        "brand_color_description": "Appliqué aux boutons, liens et éléments mis en évidence.",
         "brightness": "Luminosité",
         "bulk_edit": "Modification en masse",
         "bulk_edit_description": "Modifiez toutes les options ci-dessous, une par ligne. Les lignes vides seront ignorées et les doublons supprimés.",
@@ -1212,7 +1212,9 @@
         "capture_new_action": "Capturer une nouvelle action",
         "card_arrangement_for_survey_type_derived": "Disposition des cartes pour les enquêtes {surveyTypeDerived}",
         "card_background_color": "Couleur de fond de la carte",
+        "card_background_color_description": "Remplit la zone de la carte d'enquête.",
         "card_border_color": "Couleur de la bordure de la carte",
+        "card_border_color_description": "Délimite la carte d'enquête.",
         "card_styling": "Style de carte",
         "casual": "Décontracté",
         "caution_edit_duplicate": "Dupliquer et modifier",
@@ -1227,15 +1229,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",
@@ -1375,7 +1370,6 @@
         "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_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",
@@ -1386,7 +1380,9 @@
         "initial_value": "Valeur initiale",
         "inner_text": "Texte interne",
         "input_border_color": "Couleur de la bordure des champs de saisie",
+        "input_border_color_description": "Délimite les champs de texte et les zones de texte.",
         "input_color": "Couleur d'arrière-plan des champs de saisie",
+        "input_color_description": "Remplit l'intérieur des champs de texte.",
         "insert_link": "Insérer un lien",
         "invalid_targeting": "Ciblage invalide : Veuillez vérifier vos filtres d'audience",
         "invalid_video_url_warning": "Merci d'entrer une URL YouTube, Vimeo ou Loom valide. Les autres plateformes vidéo ne sont pas encore supportées.",
@@ -1470,7 +1466,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",
@@ -1532,6 +1527,7 @@
         "response_limits_redirections_and_more": "Limites de réponse, redirections et plus.",
         "response_options": "Options de réponse",
         "roundness": "Rondeur",
+        "roundness_description": "Contrôle l'arrondi des coins de la carte.",
         "row_used_in_logic_error": "Cette ligne est utilisée dans la logique de la question {questionIndex}. Veuillez d'abord la supprimer de la logique.",
         "rows": "Lignes",
         "save_and_close": "Enregistrer et fermer",
@@ -1573,7 +1569,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",
@@ -2057,6 +2052,69 @@
       "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_bg_description": "Remplit le bouton Suivant / Envoyer.",
+        "advanced_styling_field_button_border_radius_description": "Arrondit les coins du bouton.",
+        "advanced_styling_field_button_font_size_description": "Ajuste la taille du texte du libellé du bouton.",
+        "advanced_styling_field_button_font_weight_description": "Rend le texte du bouton plus léger ou plus gras.",
+        "advanced_styling_field_button_height_description": "Contrôle la hauteur du bouton.",
+        "advanced_styling_field_button_padding_x_description": "Ajoute de l'espace à gauche et à droite.",
+        "advanced_styling_field_button_padding_y_description": "Ajoute de l'espace en haut et en bas.",
+        "advanced_styling_field_button_text": "Texte du bouton",
+        "advanced_styling_field_button_text_description": "Colore le libellé à l'intérieur des boutons.",
+        "advanced_styling_field_description_color": "Couleur de la description",
+        "advanced_styling_field_description_color_description": "Colore le texte sous chaque titre.",
+        "advanced_styling_field_description_size": "Taille de police de la description",
+        "advanced_styling_field_description_size_description": "Ajuste la taille du texte de description.",
+        "advanced_styling_field_description_weight": "Graisse de police de la description",
+        "advanced_styling_field_description_weight_description": "Rend le texte de description plus léger ou plus gras.",
+        "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_color_description": "Colore le texte principal de la question.",
+        "advanced_styling_field_headline_size": "Taille de police du titre",
+        "advanced_styling_field_headline_size_description": "Ajuste la taille du texte du titre.",
+        "advanced_styling_field_headline_weight": "Graisse de police du titre",
+        "advanced_styling_field_headline_weight_description": "Rend le texte du titre plus léger ou plus gras.",
+        "advanced_styling_field_height": "Hauteur",
+        "advanced_styling_field_indicator_bg": "Arrière-plan de l'indicateur",
+        "advanced_styling_field_indicator_bg_description": "Colore la partie remplie de la barre.",
+        "advanced_styling_field_input_border_radius_description": "Arrondit les coins du champ de saisie.",
+        "advanced_styling_field_input_font_size_description": "Ajuste la taille du texte saisi dans les champs.",
+        "advanced_styling_field_input_height_description": "Contrôle la hauteur du champ de saisie.",
+        "advanced_styling_field_input_padding_x_description": "Ajoute de l'espace à gauche et à droite.",
+        "advanced_styling_field_input_padding_y_description": "Ajoute de l'espace en haut et en bas.",
+        "advanced_styling_field_input_placeholder_opacity_description": "Atténue le texte d'indication du placeholder.",
+        "advanced_styling_field_input_shadow_description": "Ajoute une ombre portée autour des champs de saisie.",
+        "advanced_styling_field_input_text": "Texte de saisie",
+        "advanced_styling_field_input_text_description": "Colore le texte saisi dans les champs.",
+        "advanced_styling_field_option_bg": "Arrière-plan",
+        "advanced_styling_field_option_bg_description": "Remplit les éléments d'option.",
+        "advanced_styling_field_option_border_radius_description": "Arrondit les coins des options.",
+        "advanced_styling_field_option_font_size_description": "Ajuste la taille du texte des libellés d'option.",
+        "advanced_styling_field_option_label": "Couleur de l'étiquette",
+        "advanced_styling_field_option_label_description": "Colore le texte des libellés d'option.",
+        "advanced_styling_field_option_padding_x_description": "Ajoute de l'espace à gauche et à droite.",
+        "advanced_styling_field_option_padding_y_description": "Ajoute de l'espace en haut et en bas.",
+        "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 placeholder",
+        "advanced_styling_field_shadow": "Ombre",
+        "advanced_styling_field_track_bg": "Arrière-plan de la piste",
+        "advanced_styling_field_track_bg_description": "Colore la partie non remplie de la barre.",
+        "advanced_styling_field_track_height": "Hauteur de la piste",
+        "advanced_styling_field_track_height_description": "Contrôle l'épaisseur de la barre de progression.",
+        "advanced_styling_field_upper_label_color": "Couleur de l'étiquette du titre",
+        "advanced_styling_field_upper_label_color_description": "Colore le petit libellé au-dessus des champs de saisie.",
+        "advanced_styling_field_upper_label_size": "Taille de police de l'étiquette du titre",
+        "advanced_styling_field_upper_label_size_description": "Ajuste la taille du petit libellé au-dessus des champs de saisie.",
+        "advanced_styling_field_upper_label_weight": "Graisse de police de l'étiquette du titre",
+        "advanced_styling_field_upper_label_weight_description": "Rend le libellé plus léger ou plus gras.",
+        "advanced_styling_section_buttons": "Boutons",
+        "advanced_styling_section_headlines": "Titres et descriptions",
+        "advanced_styling_section_inputs": "Champs de saisie",
+        "advanced_styling_section_options": "Options (boutons radio/cases à 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.",
         "email_customization": "Personnalisation des e-mails",
@@ -2069,6 +2127,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 assorti basé sur votre couleur de 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",
@@ -2083,6 +2144,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."
       },
@@ -2837,6 +2899,8 @@
     "picture_selection_description": "Demandez aux répondants de choisir une ou plusieurs images",
     "preview_survey_ending_card_description": "Continue ton onboarding, s'il te plaît.",
     "preview_survey_ending_card_headline": "C'est fait !",
+    "preview_survey_input_headline": "Autre chose à partager ?",
+    "preview_survey_input_placeholder": "Laisse une note...",
     "preview_survey_name": "Nouveau Sondage",
     "preview_survey_question_1_headline": "Comment évalueriez-vous {projectName} ?",
     "preview_survey_question_1_lower_label": "Pas bon",
@@ -2846,6 +2910,7 @@
     "preview_survey_question_2_choice_1_label": "Oui, tenez-moi au courant.",
     "preview_survey_question_2_choice_2_label": "Non, merci !",
     "preview_survey_question_2_headline": "Souhaitez-vous être informé ?",
+    "preview_survey_question_2_subheader": "Ceci est un exemple de description.",
     "preview_survey_welcome_card_headline": "Bienvenue !",
     "prioritize_features_description": "Identifiez les fonctionnalités dont vos utilisateurs ont le plus et le moins besoin.",
     "prioritize_features_name": "Prioriser les fonctionnalités",

apps/web/locales/hu-HU.json

@@ -1156,7 +1156,6 @@
         "add_fallback_placeholder": "Helykitöltő hozzáadása annak megjelenítéshez, hogy nincs visszahívandó érték.",
         "add_hidden_field_id": "Rejtett mezőazonosító hozzáadása",
         "add_highlight_border": "Kiemelési szegély hozzáadása",
-        "add_highlight_border_description": "Külső szegély hozzáadása a kérdőív kártyájához.",
         "add_logic": "Logika hozzáadása",
         "add_none_of_the_above": "„A fentiek közül egyik sem” hozzáadása",
         "add_option": "Lehetőség hozzáadása",
@@ -1195,6 +1194,7 @@
         "block_duplicated": "A blokk kettőzve.",
         "bold": "Félkövér",
         "brand_color": "Márkajel színe",
+        "brand_color_description": "Gomboknál, hivatkozásoknál és kiemeléseknél alkalmazva.",
         "brightness": "Fényerő",
         "bulk_edit": "Tömeges szerkesztés",
         "bulk_edit_description": "Az összes lenti lehetőség szerkesztése, soronként egy. Az üres sorok kihagyásra kerülnek, az ismétlődések pedig el lesznek távolítva.",
@@ -1212,7 +1212,9 @@
         "capture_new_action": "Új művelet rögzítése",
         "card_arrangement_for_survey_type_derived": "Kártyaelrendezés a(z) {surveyTypeDerived} kérdőíveknél",
         "card_background_color": "Kártya hátterének színe",
+        "card_background_color_description": "Kitölti a kérdőívkártya területét.",
         "card_border_color": "Kártya szegélyének színe",
+        "card_border_color_description": "Körvonalazza a kérdőívkártyát.",
         "card_styling": "Kártya stílusának beállítása",
         "casual": "Alkalmi",
         "caution_edit_duplicate": "Kettőzés és szerkesztés",
@@ -1227,15 +1229,8 @@
         "change_background": "Háttér megváltoztatása",
         "change_question_type": "Kérdés típusának megváltoztatása",
         "change_survey_type": "A kérdőív típusának megváltoztatása befolyásolja a meglévő hozzáférést",
-        "change_the_background_color_of_the_card": "A kártya háttérszínének megváltoztatása.",
-        "change_the_background_color_of_the_input_fields": "A beviteli mezők háttérszínének megváltoztatása.",
         "change_the_background_to_a_color_image_or_animation": "A háttér megváltoztatása színre, képre vagy animációra.",
-        "change_the_border_color_of_the_card": "A kártya szegélyszínének megváltoztatása.",
-        "change_the_border_color_of_the_input_fields": "A beviteli mezők szegélyszínének megváltoztatása.",
-        "change_the_border_radius_of_the_card_and_the_inputs": "A kártya és a beviteli mezők szegélysugarának megváltoztatása.",
-        "change_the_brand_color_of_the_survey": "A kérdőív márkajelszínének megváltoztatása.",
         "change_the_placement_of_this_survey": "A kérdőív elhelyezésének megváltoztatása.",
-        "change_the_question_color_of_the_survey": "A kérdőív kérdésszínének megváltoztatása.",
         "changes_saved": "Változtatások elmentve.",
         "changing_survey_type_will_remove_existing_distribution_channels": "A kérdőív típusának megváltoztatása hatással lesz arra, hogy hogyan lehet megosztani azt. Ha a válaszadók már rendelkeznek a jelenlegi típushoz tartozó hozzáférési hivatkozásokkal, akkor elveszíthetik a hozzáférést a váltás után.",
         "checkbox_label": "Jelölőnégyzet címkéje",
@@ -1375,7 +1370,6 @@
         "hide_progress_bar": "Folyamatjelző elrejtése",
         "hide_question_settings": "Kérdésbeállítások elrejtése",
         "hostname": "Gépnév",
-        "how_funky_do_you_want_your_cards_in_survey_type_derived_surveys": "Mennyire szeretné vagánnyá tenni a kártyáit a(z) {surveyTypeDerived} kérdőívekben",
         "if_you_need_more_please": "Ha többre van szüksége, akkor",
         "if_you_really_want_that_answer_ask_until_you_get_it": "Maradjon megjelenítve bármikor is aktiválódott, amíg egy választ el nem küldenek.",
         "ignore_global_waiting_time": "Várakozási időszak figyelmen kívül hagyása",
@@ -1386,7 +1380,9 @@
         "initial_value": "Kezdeti érték",
         "inner_text": "Belső szöveg",
         "input_border_color": "Beviteli mező szegélyének színe",
+        "input_border_color_description": "Körvonalazza a szövegbeviteli mezőket és szövegterületeket.",
         "input_color": "Beviteli mező színe",
+        "input_color_description": "Kitölti a szövegbeviteli mezők belsejét.",
         "insert_link": "Hivatkozás beszúrása",
         "invalid_targeting": "Érvénytelen célzás: ellenőrizze a közönség szűrőit",
         "invalid_video_url_warning": "Adjon meg egy érvényes YouTube, Vimeo vagy Loom URL-t. Jelenleg nem támogatunk más videomegosztó szolgáltatókat.",
@@ -1470,7 +1466,6 @@
         "protect_survey_with_pin_description": "Csak a PIN-kóddal rendelkező felhasználók férhetnek hozzá a kérdőívhez.",
         "publish": "Közzététel",
         "question": "Kérdés",
-        "question_color": "Kérdés színe",
         "question_deleted": "Kérdés törölve.",
         "question_duplicated": "Kérdés megkettőzve.",
         "question_id_updated": "Kérdésazonosító frissítve",
@@ -1532,6 +1527,7 @@
         "response_limits_redirections_and_more": "Válaszkorlátok, átirányítások és egyebek.",
         "response_options": "Válasz beállításai",
         "roundness": "Kerekesség",
+        "roundness_description": "Szabályozza a kártya sarkai lekerekítését.",
         "row_used_in_logic_error": "Ez a sor használatban van a(z) {questionIndex}. kérdés logikájában. Először távolítsa el a logikából.",
         "rows": "Sorok",
         "save_and_close": "Mentés és bezárás",
@@ -1573,7 +1569,6 @@
         "styling_set_to_theme_styles": "A stílus a téma stílusaira állítva",
         "subheading": "Alcím",
         "subtract": "Kivonás -",
-        "suggest_colors": "Színek ajánlása",
         "survey_completed_heading": "A kérdőív kitöltve",
         "survey_completed_subheading": "Ez a szabad és nyílt forráskódú kérdőív le lett zárva",
         "survey_display_settings": "Kérdőív megjelenítésének beállításai",
@@ -2057,6 +2052,69 @@
       "look": {
         "add_background_color": "Háttérszín hozzáadása",
         "add_background_color_description": "Hátérszín hozzáadása a logó tárolódobozához.",
+        "advanced_styling_field_border_radius": "Szegély lekerekítése",
+        "advanced_styling_field_button_bg": "Gomb háttere",
+        "advanced_styling_field_button_bg_description": "Kitölti a következő / küldés gombot.",
+        "advanced_styling_field_button_border_radius_description": "Lekerekíti a gomb sarkait.",
+        "advanced_styling_field_button_font_size_description": "Méretezi a gomb feliratának szövegét.",
+        "advanced_styling_field_button_font_weight_description": "Vékonyabbá vagy vastagabbá teszi a gomb szövegét.",
+        "advanced_styling_field_button_height_description": "Szabályozza a gomb magasságát.",
+        "advanced_styling_field_button_padding_x_description": "Térközt ad hozzá bal és jobb oldalon.",
+        "advanced_styling_field_button_padding_y_description": "Térközt ad hozzá fent és lent.",
+        "advanced_styling_field_button_text": "Gomb szövege",
+        "advanced_styling_field_button_text_description": "Színezi a gombokon belüli feliratot.",
+        "advanced_styling_field_description_color": "Leírás színe",
+        "advanced_styling_field_description_color_description": "Színezi az egyes címsorok alatti szöveget.",
+        "advanced_styling_field_description_size": "Leírás betűmérete",
+        "advanced_styling_field_description_size_description": "Méretezi a leírás szövegét.",
+        "advanced_styling_field_description_weight": "Leírás betűvastagsága",
+        "advanced_styling_field_description_weight_description": "Vékonyabbá vagy vastagabbá teszi a leírás szövegét.",
+        "advanced_styling_field_font_size": "Betűméret",
+        "advanced_styling_field_font_weight": "Betűvastagság",
+        "advanced_styling_field_headline_color": "Címsor színe",
+        "advanced_styling_field_headline_color_description": "Színezi a fő kérdés szövegét.",
+        "advanced_styling_field_headline_size": "Címsor betűmérete",
+        "advanced_styling_field_headline_size_description": "Méretezi a címsor szövegét.",
+        "advanced_styling_field_headline_weight": "Címsor betűvastagsága",
+        "advanced_styling_field_headline_weight_description": "Vékonyabbá vagy vastagabbá teszi a címsor szövegét.",
+        "advanced_styling_field_height": "Magasság",
+        "advanced_styling_field_indicator_bg": "Jelző háttere",
+        "advanced_styling_field_indicator_bg_description": "Színezi a sáv kitöltött részét.",
+        "advanced_styling_field_input_border_radius_description": "Lekerekíti a beviteli mező sarkait.",
+        "advanced_styling_field_input_font_size_description": "Méretezi a beviteli mezőkbe gépelt szöveget.",
+        "advanced_styling_field_input_height_description": "Szabályozza a beviteli mező magasságát.",
+        "advanced_styling_field_input_padding_x_description": "Térközt ad hozzá bal és jobb oldalon.",
+        "advanced_styling_field_input_padding_y_description": "Térközt ad hozzá felül és alul.",
+        "advanced_styling_field_input_placeholder_opacity_description": "Halványítja a helyőrző szöveget.",
+        "advanced_styling_field_input_shadow_description": "Árnyékot ad a beviteli mezők köré.",
+        "advanced_styling_field_input_text": "Beviteli mező szövege",
+        "advanced_styling_field_input_text_description": "Színezi a beviteli mezőkbe írt szöveget.",
+        "advanced_styling_field_option_bg": "Háttér",
+        "advanced_styling_field_option_bg_description": "Kitölti az opciós elemeket.",
+        "advanced_styling_field_option_border_radius_description": "Lekerekíti az opciók sarkait.",
+        "advanced_styling_field_option_font_size_description": "Méretezi az opciók címkeszövegét.",
+        "advanced_styling_field_option_label": "Címke színe",
+        "advanced_styling_field_option_label_description": "Színezi az opciók címkeszövegét.",
+        "advanced_styling_field_option_padding_x_description": "Térközt ad hozzá balra és jobbra.",
+        "advanced_styling_field_option_padding_y_description": "Térközt ad hozzá felül és alul.",
+        "advanced_styling_field_padding_x": "Belső margó X",
+        "advanced_styling_field_padding_y": "Belső margó Y",
+        "advanced_styling_field_placeholder_opacity": "Helyőrző átlátszósága",
+        "advanced_styling_field_shadow": "Árnyék",
+        "advanced_styling_field_track_bg": "Sáv háttere",
+        "advanced_styling_field_track_bg_description": "Színezi a sáv kitöltetlen részét.",
+        "advanced_styling_field_track_height": "Sáv magassága",
+        "advanced_styling_field_track_height_description": "Szabályozza a folyamatjelző sáv vastagságát.",
+        "advanced_styling_field_upper_label_color": "Felső címke színe",
+        "advanced_styling_field_upper_label_color_description": "Színezi a beviteli mezők feletti kis címkét.",
+        "advanced_styling_field_upper_label_size": "Felső címke betűmérete",
+        "advanced_styling_field_upper_label_size_description": "Méretezi a beviteli mezők feletti kis címkét.",
+        "advanced_styling_field_upper_label_weight": "Felső címke betűvastagsága",
+        "advanced_styling_field_upper_label_weight_description": "Vékonyabbá vagy vastagabbá teszi a címkét.",
+        "advanced_styling_section_buttons": "Gombok",
+        "advanced_styling_section_headlines": "Címsorok és leírások",
+        "advanced_styling_section_inputs": "Beviteli mezők",
+        "advanced_styling_section_options": "Opciók (rádiógomb/jelölőnégyzet)",
         "app_survey_placement": "Alkalmazás-kérdőív elhelyezése",
         "app_survey_placement_settings_description": "Annak megváltoztatása, hogy a kérdőívek hol jelennek meg a webalkalmazásban vagy a webhelyen.",
         "email_customization": "E-mail személyre szabás",
@@ -2069,6 +2127,9 @@
         "formbricks_branding_hidden": "A Formbricks márkajel rejtve van.",
         "formbricks_branding_settings_description": "Nagyra értékeljük a támogatását, de megértjük, ha kikapcsolja.",
         "formbricks_branding_shown": "A Formbricks márkajel megjelenik.",
+        "generate_theme_btn": "Előállítás",
+        "generate_theme_confirmation": "Szeretnél egy illeszkedő színtémát generálni a márka színed alapján? Ez felülírja a jelenlegi színbeállításaidat.",
+        "generate_theme_header": "Színtéma előállítása?",
         "logo_removed_successfully": "A logó sikeresen eltávolítva",
         "logo_settings_description": "Vállalati logo feltöltése a kérdőívek és hivatkozások előnézeteinek márkaépítéséhez.",
         "logo_updated_successfully": "A logó sikeresen frissítve",
@@ -2083,6 +2144,7 @@
         "show_formbricks_branding_in": "Formbricks márkajel megjelenítése a(z) {type} kérdőívekben",
         "show_powered_by_formbricks": "Az „A gépházban: Formbricks” aláírás megjelenítése",
         "styling_updated_successfully": "A stílus sikeresen frissítve",
+        "suggest_colors": "Színek javaslása",
         "theme": "Téma",
         "theme_settings_description": "Stílustéma létrehozása az összes kérdőívhez. Egyéni stílust engedélyezhet minden egyes kérdőívhez."
       },
@@ -2837,6 +2899,8 @@
     "picture_selection_description": "A válaszadók megkérése, hogy egy vagy több képet válasszanak",
     "preview_survey_ending_card_description": "Folytassa a beléptetését.",
     "preview_survey_ending_card_headline": "Megcsinálta!",
+    "preview_survey_input_headline": "Van még valami, amit meg szeretne osztani?",
+    "preview_survey_input_placeholder": "Hagyj egy megjegyzést...",
     "preview_survey_name": "Új kérdőív",
     "preview_survey_question_1_headline": "Hogyan értékelné a(z) {projectName} projektet?",
     "preview_survey_question_1_lower_label": "Nem jó",
@@ -2846,6 +2910,7 @@
     "preview_survey_question_2_choice_1_label": "Igen, folyamatosan tájékoztassanak.",
     "preview_survey_question_2_choice_2_label": "Nem, köszönöm!",
     "preview_survey_question_2_headline": "Szeretne naprakész maradni?",
+    "preview_survey_question_2_subheader": "Ez egy példa leírás.",
     "preview_survey_welcome_card_headline": "Üdvözöljük!",
     "prioritize_features_description": "A felhasználóknak leginkább és legkevésbé szükséges funkciók azonosítása.",
     "prioritize_features_name": "Funkciók rangsorolása",

apps/web/locales/ja-JP.json

@@ -1156,7 +1156,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": "オプションを追加",
@@ -1195,6 +1194,7 @@
         "block_duplicated": "ブロックが複製されました。",
         "bold": "太字",
         "brand_color": "ブランドカラー",
+        "brand_color_description": "ボタン、リンク、ハイライトに適用されます。",
         "brightness": "明るさ",
         "bulk_edit": "一括編集",
         "bulk_edit_description": "以下のオプションを1行ずつ編集してください。空の行はスキップされ、重複は削除されます。",
@@ -1212,7 +1212,9 @@
         "capture_new_action": "新しいアクションをキャプチャ",
         "card_arrangement_for_survey_type_derived": "{surveyTypeDerived} フォームのカード配置",
         "card_background_color": "カードの背景色",
+        "card_background_color_description": "フォームカードエリアを塗りつぶします。",
         "card_border_color": "カードの枠線の色",
+        "card_border_color_description": "フォームカードの輪郭を描きます。",
         "card_styling": "カードのスタイル設定",
         "casual": "カジュアル",
         "caution_edit_duplicate": "複製して編集",
@@ -1227,15 +1229,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": "チェックボックスのラベル",
@@ -1375,7 +1370,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": "クールダウン期間を無視",
@@ -1386,7 +1380,9 @@
         "initial_value": "初期値",
         "inner_text": "内部テキスト",
         "input_border_color": "入力の枠線の色",
+        "input_border_color_description": "テキスト入力とテキストエリアの輪郭を描きます。",
         "input_color": "入力の色",
+        "input_color_description": "テキスト入力の内側を塗りつぶします。",
         "insert_link": "リンク を 挿入",
         "invalid_targeting": "無効なターゲティング: オーディエンスフィルターを確認してください",
         "invalid_video_url_warning": "有効なYouTube、Vimeo、またはLoomのURLを入力してください。現在、他の動画ホスティングプロバイダーはサポートしていません。",
@@ -1470,7 +1466,6 @@
         "protect_survey_with_pin_description": "PINを持つユーザーのみがフォームにアクセスできます。",
         "publish": "公開",
         "question": "質問",
-        "question_color": "質問の色",
         "question_deleted": "質問を削除しました。",
         "question_duplicated": "質問を複製しました。",
         "question_id_updated": "質問IDを更新しました",
@@ -1532,6 +1527,7 @@
         "response_limits_redirections_and_more": "回答数の上限、リダイレクトなど。",
         "response_options": "回答オプション",
         "roundness": "丸み",
+        "roundness_description": "カードの角の丸みを調整します。",
         "row_used_in_logic_error": "この行は質問 {questionIndex} のロジックで使用されています。まず、ロジックから削除してください。",
         "rows": "行",
         "save_and_close": "保存して閉じる",
@@ -1573,7 +1569,6 @@
         "styling_set_to_theme_styles": "スタイルをテーマのスタイルに設定しました",
         "subheading": "サブ見出し",
         "subtract": "減算 -",
-        "suggest_colors": "色を提案",
         "survey_completed_heading": "フォームが完了しました",
         "survey_completed_subheading": "この無料のオープンソースフォームは閉鎖されました",
         "survey_display_settings": "フォーム表示設定",
@@ -2057,6 +2052,69 @@
       "look": {
         "add_background_color": "背景色を追加",
         "add_background_color_description": "ロゴコンテナに背景色を追加します。",
+        "advanced_styling_field_border_radius": "境界線の丸み",
+        "advanced_styling_field_button_bg": "ボタンの背景",
+        "advanced_styling_field_button_bg_description": "次へ/送信ボタンを塗りつぶします。",
+        "advanced_styling_field_button_border_radius_description": "ボタンの角を丸めます。",
+        "advanced_styling_field_button_font_size_description": "ボタンラベルのテキストサイズを調整します。",
+        "advanced_styling_field_button_font_weight_description": "ボタンテキストを細くまたは太くします。",
+        "advanced_styling_field_button_height_description": "ボタンの高さを調整します。",
+        "advanced_styling_field_button_padding_x_description": "左右にスペースを追加します。",
+        "advanced_styling_field_button_padding_y_description": "上下にスペースを追加します。",
+        "advanced_styling_field_button_text": "ボタンのテキスト",
+        "advanced_styling_field_button_text_description": "ボタン内のラベルに色を付けます。",
+        "advanced_styling_field_description_color": "説明文の色",
+        "advanced_styling_field_description_color_description": "各見出しの下のテキストに色を付けます。",
+        "advanced_styling_field_description_size": "説明文のフォントサイズ",
+        "advanced_styling_field_description_size_description": "説明テキストのサイズを調整します。",
+        "advanced_styling_field_description_weight": "説明文のフォントの太さ",
+        "advanced_styling_field_description_weight_description": "説明テキストを細くまたは太くします。",
+        "advanced_styling_field_font_size": "フォントサイズ",
+        "advanced_styling_field_font_weight": "フォントの太さ",
+        "advanced_styling_field_headline_color": "見出しの色",
+        "advanced_styling_field_headline_color_description": "メインの質問テキストに色を付けます。",
+        "advanced_styling_field_headline_size": "見出しのフォントサイズ",
+        "advanced_styling_field_headline_size_description": "見出しテキストのサイズを調整します。",
+        "advanced_styling_field_headline_weight": "見出しのフォントの太さ",
+        "advanced_styling_field_headline_weight_description": "見出しテキストを細くまたは太くします。",
+        "advanced_styling_field_height": "高さ",
+        "advanced_styling_field_indicator_bg": "インジケーターの背景",
+        "advanced_styling_field_indicator_bg_description": "バーの塗りつぶし部分に色を付けます。",
+        "advanced_styling_field_input_border_radius_description": "入力フィールドの角を丸めます。",
+        "advanced_styling_field_input_font_size_description": "入力フィールド内の入力テキストのサイズを調整します。",
+        "advanced_styling_field_input_height_description": "入力フィールドの高さを調整します。",
+        "advanced_styling_field_input_padding_x_description": "左右にスペースを追加します。",
+        "advanced_styling_field_input_padding_y_description": "上下にスペースを追加します。",
+        "advanced_styling_field_input_placeholder_opacity_description": "プレースホルダーのヒントテキストを薄くします。",
+        "advanced_styling_field_input_shadow_description": "入力フィールドの周囲にドロップシャドウを追加します。",
+        "advanced_styling_field_input_text": "入力テキスト",
+        "advanced_styling_field_input_text_description": "入力フィールドに入力されたテキストの色を設定します。",
+        "advanced_styling_field_option_bg": "背景",
+        "advanced_styling_field_option_bg_description": "オプション項目を塗りつぶします。",
+        "advanced_styling_field_option_border_radius_description": "オプションの角を丸くします。",
+        "advanced_styling_field_option_font_size_description": "オプションラベルのテキストサイズを調整します。",
+        "advanced_styling_field_option_label": "ラベルの色",
+        "advanced_styling_field_option_label_description": "オプションラベルのテキストの色を設定します。",
+        "advanced_styling_field_option_padding_x_description": "左右にスペースを追加します。",
+        "advanced_styling_field_option_padding_y_description": "上下にスペースを追加します。",
+        "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_bg_description": "バーの未入力部分の色を設定します。",
+        "advanced_styling_field_track_height": "トラックの高さ",
+        "advanced_styling_field_track_height_description": "プログレスバーの太さを調整します。",
+        "advanced_styling_field_upper_label_color": "見出しラベルの色",
+        "advanced_styling_field_upper_label_color_description": "入力フィールド上部の小さなラベルの色を設定します。",
+        "advanced_styling_field_upper_label_size": "見出しラベルのフォントサイズ",
+        "advanced_styling_field_upper_label_size_description": "入力フィールド上部の小さなラベルのサイズを調整します。",
+        "advanced_styling_field_upper_label_weight": "見出しラベルのフォントの太さ",
+        "advanced_styling_field_upper_label_weight_description": "ラベルを細くまたは太くします。",
+        "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アプリまたはウェブサイトでフォームを表示する場所を変更します。",
         "email_customization": "メールのカスタマイズ",
@@ -2069,6 +2127,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": "ロゴを正常に更新しました",
@@ -2083,6 +2144,7 @@
         "show_formbricks_branding_in": "{type}アンケートにFormbricksブランディングを表示",
         "show_powered_by_formbricks": "「Powered by Formbricks」署名を表示",
         "styling_updated_successfully": "スタイルを正常に更新しました",
+        "suggest_colors": "カラーを提案",
         "theme": "テーマ",
         "theme_settings_description": "すべてのアンケート用のスタイルテーマを作成します。各アンケートでカスタムスタイルを有効にできます。"
       },
@@ -2837,6 +2899,8 @@
     "picture_selection_description": "回答者に1つまたは複数の画像を選択させる",
     "preview_survey_ending_card_description": "オンボーディングを続けてください。",
     "preview_survey_ending_card_headline": "完了しました！",
+    "preview_survey_input_headline": "他に共有したいことはありますか？",
+    "preview_survey_input_placeholder": "メモを残す...",
     "preview_survey_name": "新しいアンケート",
     "preview_survey_question_1_headline": "{projectName}をどう評価しますか？",
     "preview_survey_question_1_lower_label": "良くない",
@@ -2846,6 +2910,7 @@
     "preview_survey_question_2_choice_1_label": "はい、最新情報を知りたいです。",
     "preview_survey_question_2_choice_2_label": "いいえ、結構です！",
     "preview_survey_question_2_headline": "最新情報を知りたいですか？",
+    "preview_survey_question_2_subheader": "これは説明の例です。",
     "preview_survey_welcome_card_headline": "ようこそ！",
     "prioritize_features_description": "ユーザーが最も必要とする機能と最も必要としない機能を特定する。",
     "prioritize_features_name": "機能の優先順位付け",

apps/web/locales/nl-NL.json

@@ -1156,7 +1156,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",
@@ -1195,6 +1194,7 @@
         "block_duplicated": "Blok gedupliceerd.",
         "bold": "Vetgedrukt",
         "brand_color": "Merk kleur",
+        "brand_color_description": "Toegepast op knoppen, links en highlights.",
         "brightness": "Helderheid",
         "bulk_edit": "Bulkbewerking",
         "bulk_edit_description": "Bewerk alle opties hieronder, één per regel. Lege regels worden overgeslagen en duplicaten verwijderd.",
@@ -1212,7 +1212,9 @@
         "capture_new_action": "Leg nieuwe actie vast",
         "card_arrangement_for_survey_type_derived": "Kaartarrangement voor {surveyTypeDerived} enquêtes",
         "card_background_color": "Achtergrondkleur van de kaart",
+        "card_background_color_description": "Vult het enquêtekaartgebied.",
         "card_border_color": "Randkleur kaart",
+        "card_border_color_description": "Omlijnt de enquêtekaart.",
         "card_styling": "Kaartstijl",
         "casual": "Casual",
         "caution_edit_duplicate": "Dupliceren en bewerken",
@@ -1227,15 +1229,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",
@@ -1375,7 +1370,6 @@
         "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_really_want_that_answer_ask_until_you_get_it": "Blijf tonen wanneer geactiveerd totdat een reactie is ingediend.",
         "ignore_global_waiting_time": "Afkoelperiode negeren",
@@ -1386,7 +1380,9 @@
         "initial_value": "Initiële waarde",
         "inner_text": "Innerlijke tekst",
         "input_border_color": "Randkleur invoeren",
+        "input_border_color_description": "Omlijnt tekstvelden en tekstgebieden.",
         "input_color": "Kleur invoeren",
+        "input_color_description": "Vult de binnenkant van tekstvelden.",
         "insert_link": "Link invoegen",
         "invalid_targeting": "Ongeldige targeting: controleer uw doelgroepfilters",
         "invalid_video_url_warning": "Voer een geldige YouTube-, Vimeo- of Loom-URL in. We ondersteunen momenteel geen andere videohostingproviders.",
@@ -1470,7 +1466,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",
@@ -1532,6 +1527,7 @@
         "response_limits_redirections_and_more": "Reactielimieten, omleidingen en meer.",
         "response_options": "Reactieopties",
         "roundness": "Rondheid",
+        "roundness_description": "Bepaalt hoe afgerond de kaarthoeken zijn.",
         "row_used_in_logic_error": "Deze rij wordt gebruikt in de logica van vraag {questionIndex}. Verwijder het eerst uit de logica.",
         "rows": "Rijen",
         "save_and_close": "Opslaan en sluiten",
@@ -1573,7 +1569,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",
@@ -2057,6 +2052,69 @@
       "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": "Knopachtergrond",
+        "advanced_styling_field_button_bg_description": "Vult de volgende/verzend-knop.",
+        "advanced_styling_field_button_border_radius_description": "Rondt de knophoeken af.",
+        "advanced_styling_field_button_font_size_description": "Schaalt de tekst van het knoplabel.",
+        "advanced_styling_field_button_font_weight_description": "Maakt knoptekst lichter of vetter.",
+        "advanced_styling_field_button_height_description": "Bepaalt de knophoogte.",
+        "advanced_styling_field_button_padding_x_description": "Voegt ruimte toe aan de linker- en rechterkant.",
+        "advanced_styling_field_button_padding_y_description": "Voegt ruimte toe aan de boven- en onderkant.",
+        "advanced_styling_field_button_text": "Knoptekst",
+        "advanced_styling_field_button_text_description": "Kleurt het label binnen knoppen.",
+        "advanced_styling_field_description_color": "Beschrijvingskleur",
+        "advanced_styling_field_description_color_description": "Kleurt de tekst onder elke kop.",
+        "advanced_styling_field_description_size": "Lettergrootte beschrijving",
+        "advanced_styling_field_description_size_description": "Schaalt de beschrijvingstekst.",
+        "advanced_styling_field_description_weight": "Letterdikte beschrijving",
+        "advanced_styling_field_description_weight_description": "Maakt beschrijvingstekst lichter of vetter.",
+        "advanced_styling_field_font_size": "Lettergrootte",
+        "advanced_styling_field_font_weight": "Letterdikte",
+        "advanced_styling_field_headline_color": "Kopkleur",
+        "advanced_styling_field_headline_color_description": "Kleurt de hoofdvraagtekst.",
+        "advanced_styling_field_headline_size": "Lettergrootte kop",
+        "advanced_styling_field_headline_size_description": "Schaalt de koptekst.",
+        "advanced_styling_field_headline_weight": "Letterdikte kop",
+        "advanced_styling_field_headline_weight_description": "Maakt koptekst lichter of vetter.",
+        "advanced_styling_field_height": "Hoogte",
+        "advanced_styling_field_indicator_bg": "Indicatorachtergrond",
+        "advanced_styling_field_indicator_bg_description": "Kleurt het gevulde deel van de balk.",
+        "advanced_styling_field_input_border_radius_description": "Rondt de invoerhoeken af.",
+        "advanced_styling_field_input_font_size_description": "Schaalt de getypte tekst in invoervelden.",
+        "advanced_styling_field_input_height_description": "Bepaalt de hoogte van het invoerveld.",
+        "advanced_styling_field_input_padding_x_description": "Voegt ruimte toe aan de linker- en rechterkant.",
+        "advanced_styling_field_input_padding_y_description": "Voegt ruimte toe aan de boven- en onderkant.",
+        "advanced_styling_field_input_placeholder_opacity_description": "Vervaagt de tijdelijke aanwijzingstekst.",
+        "advanced_styling_field_input_shadow_description": "Voegt een slagschaduw toe rond invoervelden.",
+        "advanced_styling_field_input_text": "Invoertekst",
+        "advanced_styling_field_input_text_description": "Kleurt de getypte tekst in invoervelden.",
+        "advanced_styling_field_option_bg": "Achtergrond",
+        "advanced_styling_field_option_bg_description": "Vult de optie-items.",
+        "advanced_styling_field_option_border_radius_description": "Rondt de hoeken van opties af.",
+        "advanced_styling_field_option_font_size_description": "Schaalt de tekst van optielabels.",
+        "advanced_styling_field_option_label": "Labelkleur",
+        "advanced_styling_field_option_label_description": "Kleurt de tekst van optielabels.",
+        "advanced_styling_field_option_padding_x_description": "Voegt ruimte toe aan de linker- en rechterkant.",
+        "advanced_styling_field_option_padding_y_description": "Voegt ruimte toe aan de boven- en onderkant.",
+        "advanced_styling_field_padding_x": "Opvulling X",
+        "advanced_styling_field_padding_y": "Opvulling Y",
+        "advanced_styling_field_placeholder_opacity": "Plaatshouderopaciteit",
+        "advanced_styling_field_shadow": "Schaduw",
+        "advanced_styling_field_track_bg": "Sporachtergrond",
+        "advanced_styling_field_track_bg_description": "Kleurt het ongevulde gedeelte van de balk.",
+        "advanced_styling_field_track_height": "Spoorhoogte",
+        "advanced_styling_field_track_height_description": "Regelt de dikte van de voortgangsbalk.",
+        "advanced_styling_field_upper_label_color": "Koplabelkleur",
+        "advanced_styling_field_upper_label_color_description": "Kleurt het kleine label boven invoervelden.",
+        "advanced_styling_field_upper_label_size": "Lettergrootte koplabel",
+        "advanced_styling_field_upper_label_size_description": "Schaalt het kleine label boven invoervelden.",
+        "advanced_styling_field_upper_label_weight": "Letterdikte koplabel",
+        "advanced_styling_field_upper_label_weight_description": "Maakt het label lichter of vetter.",
+        "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.",
         "email_customization": "E-mail aanpassing",
@@ -2069,6 +2127,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 passend 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",
@@ -2083,6 +2144,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": "Kleuren voorstellen",
         "theme": "Thema",
         "theme_settings_description": "Maak een stijlthema voor alle enquêtes. Je kunt aangepaste styling inschakelen voor elke enquête."
       },
@@ -2837,6 +2899,8 @@
     "picture_selection_description": "Vraag respondenten om één of meerdere afbeeldingen te kiezen",
     "preview_survey_ending_card_description": "Ga alstublieft door met uw onboarding.",
     "preview_survey_ending_card_headline": "Je hebt het gedaan!",
+    "preview_survey_input_headline": "Nog iets te delen?",
+    "preview_survey_input_placeholder": "Laat een notitie achter...",
     "preview_survey_name": "Nieuwe enquête",
     "preview_survey_question_1_headline": "Hoe zou u {projectName} beoordelen?",
     "preview_survey_question_1_lower_label": "Niet goed",
@@ -2846,6 +2910,7 @@
     "preview_survey_question_2_choice_1_label": "Ja, houd mij op de hoogte.",
     "preview_survey_question_2_choice_2_label": "Nee, dank je!",
     "preview_survey_question_2_headline": "Wil je op de hoogte blijven?",
+    "preview_survey_question_2_subheader": "Dit is een voorbeeldbeschrijving.",
     "preview_survey_welcome_card_headline": "Welkom!",
     "prioritize_features_description": "Identificeer functies die uw gebruikers het meest en het minst nodig hebben.",
     "prioritize_features_name": "Geef prioriteit aan functies",

apps/web/locales/pt-BR.json

@@ -1156,7 +1156,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",
@@ -1195,6 +1194,7 @@
         "block_duplicated": "Bloco duplicado.",
         "bold": "Negrito",
         "brand_color": "Cor da marca",
+        "brand_color_description": "Aplicado a botões, links e destaques.",
         "brightness": "brilho",
         "bulk_edit": "Edição em massa",
         "bulk_edit_description": "Edite todas as opções abaixo, uma por linha. Linhas vazias serão ignoradas e duplicatas removidas.",
@@ -1212,7 +1212,9 @@
         "capture_new_action": "Capturar nova ação",
         "card_arrangement_for_survey_type_derived": "Arranjo de Cartões para Pesquisas {surveyTypeDerived}",
         "card_background_color": "Cor de fundo do cartão",
+        "card_background_color_description": "Preenche a área do cartão da pesquisa.",
         "card_border_color": "Cor da borda do cartão",
+        "card_border_color_description": "Contorna o cartão da pesquisa.",
         "card_styling": "Estilo do cartão",
         "casual": "Casual",
         "caution_edit_duplicate": "Duplicar e editar",
@@ -1227,15 +1229,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",
@@ -1375,7 +1370,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",
@@ -1386,7 +1380,9 @@
         "initial_value": "Valor inicial",
         "inner_text": "Texto Interno",
         "input_border_color": "Cor da borda de entrada",
+        "input_border_color_description": "Contorna campos de texto e áreas de texto.",
         "input_color": "Cor de entrada",
+        "input_color_description": "Preenche o interior dos campos de texto.",
         "insert_link": "Inserir link",
         "invalid_targeting": "Segmentação inválida: Por favor, verifique os filtros do seu público",
         "invalid_video_url_warning": "Por favor, insira uma URL válida do YouTube, Vimeo ou Loom. No momento, não suportamos outros provedores de vídeo.",
@@ -1470,7 +1466,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",
@@ -1532,6 +1527,7 @@
         "response_limits_redirections_and_more": "Limites de resposta, redirecionamentos e mais.",
         "response_options": "Opções de Resposta",
         "roundness": "Circularidade",
+        "roundness_description": "Controla o arredondamento dos cantos do cartão.",
         "row_used_in_logic_error": "Esta linha é usada na lógica da pergunta {questionIndex}. Por favor, remova-a da lógica primeiro.",
         "rows": "linhas",
         "save_and_close": "Salvar e Fechar",
@@ -1573,7 +1569,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",
@@ -2057,6 +2052,69 @@
       "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_bg_description": "Preenche o botão Próximo / Enviar.",
+        "advanced_styling_field_button_border_radius_description": "Arredonda os cantos do botão.",
+        "advanced_styling_field_button_font_size_description": "Ajusta o tamanho do texto do rótulo do botão.",
+        "advanced_styling_field_button_font_weight_description": "Torna o texto do botão mais leve ou mais negrito.",
+        "advanced_styling_field_button_height_description": "Controla a altura do botão.",
+        "advanced_styling_field_button_padding_x_description": "Adiciona espaço à esquerda e à direita.",
+        "advanced_styling_field_button_padding_y_description": "Adiciona espaço no topo e na base.",
+        "advanced_styling_field_button_text": "Texto do botão",
+        "advanced_styling_field_button_text_description": "Colore o rótulo dentro dos botões.",
+        "advanced_styling_field_description_color": "Cor da descrição",
+        "advanced_styling_field_description_color_description": "Colore o texto abaixo de cada título.",
+        "advanced_styling_field_description_size": "Tamanho da fonte da descrição",
+        "advanced_styling_field_description_size_description": "Ajusta o tamanho do texto da descrição.",
+        "advanced_styling_field_description_weight": "Peso da fonte da descrição",
+        "advanced_styling_field_description_weight_description": "Torna o texto da descrição mais leve ou mais negrito.",
+        "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_color_description": "Colore o texto principal da pergunta.",
+        "advanced_styling_field_headline_size": "Tamanho da fonte do título",
+        "advanced_styling_field_headline_size_description": "Ajusta o tamanho do texto do título.",
+        "advanced_styling_field_headline_weight": "Peso da fonte do título",
+        "advanced_styling_field_headline_weight_description": "Torna o texto do título mais leve ou mais negrito.",
+        "advanced_styling_field_height": "Altura",
+        "advanced_styling_field_indicator_bg": "Fundo do indicador",
+        "advanced_styling_field_indicator_bg_description": "Colore a porção preenchida da barra.",
+        "advanced_styling_field_input_border_radius_description": "Arredonda os cantos do campo.",
+        "advanced_styling_field_input_font_size_description": "Ajusta o tamanho do texto digitado nos campos.",
+        "advanced_styling_field_input_height_description": "Controla a altura do campo de entrada.",
+        "advanced_styling_field_input_padding_x_description": "Adiciona espaço à esquerda e à direita.",
+        "advanced_styling_field_input_padding_y_description": "Adiciona espaço na parte superior e inferior.",
+        "advanced_styling_field_input_placeholder_opacity_description": "Esmaece o texto de dica do placeholder.",
+        "advanced_styling_field_input_shadow_description": "Adiciona uma sombra ao redor dos campos de entrada.",
+        "advanced_styling_field_input_text": "Texto de entrada",
+        "advanced_styling_field_input_text_description": "Colore o texto digitado nos campos de entrada.",
+        "advanced_styling_field_option_bg": "Fundo",
+        "advanced_styling_field_option_bg_description": "Preenche os itens de opção.",
+        "advanced_styling_field_option_border_radius_description": "Arredonda os cantos das opções.",
+        "advanced_styling_field_option_font_size_description": "Ajusta o tamanho do texto do rótulo da opção.",
+        "advanced_styling_field_option_label": "Cor do rótulo",
+        "advanced_styling_field_option_label_description": "Colore o texto do rótulo da opção.",
+        "advanced_styling_field_option_padding_x_description": "Adiciona espaço à esquerda e à direita.",
+        "advanced_styling_field_option_padding_y_description": "Adiciona espaço na parte superior e inferior.",
+        "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_bg_description": "Colore a porção não preenchida da barra.",
+        "advanced_styling_field_track_height": "Altura da trilha",
+        "advanced_styling_field_track_height_description": "Controla a espessura da barra de progresso.",
+        "advanced_styling_field_upper_label_color": "Cor do rótulo do título",
+        "advanced_styling_field_upper_label_color_description": "Colore o pequeno rótulo acima dos campos de entrada.",
+        "advanced_styling_field_upper_label_size": "Tamanho da fonte do rótulo do título",
+        "advanced_styling_field_upper_label_size_description": "Ajusta o tamanho do pequeno rótulo acima dos campos de entrada.",
+        "advanced_styling_field_upper_label_weight": "Peso da fonte do rótulo do título",
+        "advanced_styling_field_upper_label_weight_description": "Torna o rótulo mais leve ou mais negrito.",
+        "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 (rádio/caixa de seleção)",
         "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.",
         "email_customization": "Personalização de e-mail",
@@ -2069,6 +2127,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": "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",
@@ -2083,6 +2144,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."
       },
@@ -2837,6 +2899,8 @@
     "picture_selection_description": "Peça aos respondentes para escolherem uma ou mais imagens",
     "preview_survey_ending_card_description": "Por favor, continue seu onboarding.",
     "preview_survey_ending_card_headline": "Você conseguiu!",
+    "preview_survey_input_headline": "Tem mais alguma coisa para compartilhar?",
+    "preview_survey_input_placeholder": "Deixe uma nota...",
     "preview_survey_name": "Nova pesquisa",
     "preview_survey_question_1_headline": "Como você avaliaria {projectName}?",
     "preview_survey_question_1_lower_label": "Não tá bom",
@@ -2846,6 +2910,7 @@
     "preview_survey_question_2_choice_1_label": "Sim, me mantenha informado.",
     "preview_survey_question_2_choice_2_label": "Não, obrigado!",
     "preview_survey_question_2_headline": "Quer ficar por dentro?",
+    "preview_survey_question_2_subheader": "Este é um exemplo de descrição.",
     "preview_survey_welcome_card_headline": "Bem-vindo!",
     "prioritize_features_description": "Identifique os recursos que seus usuários mais e menos precisam.",
     "prioritize_features_name": "Priorizar Funcionalidades",

apps/web/locales/pt-PT.json

@@ -1156,7 +1156,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",
@@ -1195,6 +1194,7 @@
         "block_duplicated": "Bloco duplicado.",
         "bold": "Negrito",
         "brand_color": "Cor da marca",
+        "brand_color_description": "Aplicado a botões, links e destaques.",
         "brightness": "Brilho",
         "bulk_edit": "Edição em massa",
         "bulk_edit_description": "Edite todas as opções abaixo, uma por linha. Linhas vazias serão ignoradas e duplicados removidos.",
@@ -1212,7 +1212,9 @@
         "capture_new_action": "Capturar nova ação",
         "card_arrangement_for_survey_type_derived": "Arranjo de Cartões para Inquéritos {surveyTypeDerived}",
         "card_background_color": "Cor de fundo do cartão",
+        "card_background_color_description": "Preenche a área do cartão do inquérito.",
         "card_border_color": "Cor da borda do cartão",
+        "card_border_color_description": "Contorna o cartão do inquérito.",
         "card_styling": "Estilo de cartão",
         "casual": "Casual",
         "caution_edit_duplicate": "Duplicar e editar",
@@ -1227,15 +1229,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",
@@ -1375,7 +1370,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",
@@ -1386,7 +1380,9 @@
         "initial_value": "Valor inicial",
         "inner_text": "Texto Interno",
         "input_border_color": "Cor da borda do campo de entrada",
+        "input_border_color_description": "Contorna campos de texto e áreas de texto.",
         "input_color": "Cor do campo de entrada",
+        "input_color_description": "Preenche o interior dos campos de texto.",
         "insert_link": "Inserir ligação",
         "invalid_targeting": "Segmentação inválida: Por favor, verifique os seus filtros de audiência",
         "invalid_video_url_warning": "Por favor, insira um URL válido do YouTube, Vimeo ou Loom. Atualmente, não suportamos outros fornecedores de hospedagem de vídeo.",
@@ -1470,7 +1466,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",
@@ -1532,6 +1527,7 @@
         "response_limits_redirections_and_more": "Limites de resposta, redirecionamentos e mais.",
         "response_options": "Opções de Resposta",
         "roundness": "Arredondamento",
+        "roundness_description": "Controla o arredondamento dos cantos do cartão.",
         "row_used_in_logic_error": "Esta linha é usada na lógica da pergunta {questionIndex}. Por favor, remova-a da lógica primeiro.",
         "rows": "Linhas",
         "save_and_close": "Guardar e Fechar",
@@ -1573,7 +1569,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",
@@ -2057,6 +2052,69 @@
       "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_bg_description": "Preenche o botão Seguinte / Submeter.",
+        "advanced_styling_field_button_border_radius_description": "Arredonda os cantos do botão.",
+        "advanced_styling_field_button_font_size_description": "Ajusta o tamanho do texto da etiqueta do botão.",
+        "advanced_styling_field_button_font_weight_description": "Torna o texto do botão mais leve ou mais negrito.",
+        "advanced_styling_field_button_height_description": "Controla a altura do botão.",
+        "advanced_styling_field_button_padding_x_description": "Adiciona espaço à esquerda e à direita.",
+        "advanced_styling_field_button_padding_y_description": "Adiciona espaço no topo e na base.",
+        "advanced_styling_field_button_text": "Texto do botão",
+        "advanced_styling_field_button_text_description": "Colore a etiqueta dentro dos botões.",
+        "advanced_styling_field_description_color": "Cor da descrição",
+        "advanced_styling_field_description_color_description": "Colore o texto abaixo de cada título.",
+        "advanced_styling_field_description_size": "Tamanho da fonte da descrição",
+        "advanced_styling_field_description_size_description": "Ajusta o tamanho do texto da descrição.",
+        "advanced_styling_field_description_weight": "Peso da fonte da descrição",
+        "advanced_styling_field_description_weight_description": "Torna o texto da descrição mais leve ou mais negrito.",
+        "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_color_description": "Colore o texto principal da pergunta.",
+        "advanced_styling_field_headline_size": "Tamanho da fonte do título",
+        "advanced_styling_field_headline_size_description": "Ajusta o tamanho do texto do título.",
+        "advanced_styling_field_headline_weight": "Peso da fonte do título",
+        "advanced_styling_field_headline_weight_description": "Torna o texto do título mais leve ou mais negrito.",
+        "advanced_styling_field_height": "Altura",
+        "advanced_styling_field_indicator_bg": "Fundo do indicador",
+        "advanced_styling_field_indicator_bg_description": "Colore a porção preenchida da barra.",
+        "advanced_styling_field_input_border_radius_description": "Arredonda os cantos do campo.",
+        "advanced_styling_field_input_font_size_description": "Ajusta o tamanho do texto digitado nos campos.",
+        "advanced_styling_field_input_height_description": "Controla a altura do campo de entrada.",
+        "advanced_styling_field_input_padding_x_description": "Adiciona espaço à esquerda e à direita.",
+        "advanced_styling_field_input_padding_y_description": "Adiciona espaço no topo e na base.",
+        "advanced_styling_field_input_placeholder_opacity_description": "Atenua o texto de sugestão do placeholder.",
+        "advanced_styling_field_input_shadow_description": "Adiciona uma sombra ao redor dos campos de entrada.",
+        "advanced_styling_field_input_text": "Texto de entrada",
+        "advanced_styling_field_input_text_description": "Colore o texto digitado nos campos de entrada.",
+        "advanced_styling_field_option_bg": "Fundo",
+        "advanced_styling_field_option_bg_description": "Preenche os itens de opção.",
+        "advanced_styling_field_option_border_radius_description": "Arredonda os cantos das opções.",
+        "advanced_styling_field_option_font_size_description": "Ajusta o tamanho do texto da etiqueta da opção.",
+        "advanced_styling_field_option_label": "Cor da etiqueta",
+        "advanced_styling_field_option_label_description": "Colore o texto da etiqueta da opção.",
+        "advanced_styling_field_option_padding_x_description": "Adiciona espaço à esquerda e à direita.",
+        "advanced_styling_field_option_padding_y_description": "Adiciona espaço no topo e na base.",
+        "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 faixa",
+        "advanced_styling_field_track_bg_description": "Colore a porção não preenchida da barra.",
+        "advanced_styling_field_track_height": "Altura da faixa",
+        "advanced_styling_field_track_height_description": "Controla a espessura da barra de progresso.",
+        "advanced_styling_field_upper_label_color": "Cor da etiqueta do título",
+        "advanced_styling_field_upper_label_color_description": "Colore a pequena etiqueta acima dos campos de entrada.",
+        "advanced_styling_field_upper_label_size": "Tamanho da fonte da etiqueta do título",
+        "advanced_styling_field_upper_label_size_description": "Ajusta o tamanho da pequena etiqueta acima dos campos de entrada.",
+        "advanced_styling_field_upper_label_weight": "Peso da fonte da etiqueta do título",
+        "advanced_styling_field_upper_label_weight_description": "Torna a etiqueta mais leve ou mais negrito.",
+        "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 (rádio/caixa de seleçã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.",
         "email_customization": "Personalização de e-mail",
@@ -2069,6 +2127,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": "Gostarias de gerar um tema de cores correspondente com base na cor da tua marca? Isto irá substituir as tuas 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",
@@ -2083,6 +2144,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."
       },
@@ -2837,6 +2899,8 @@
     "picture_selection_description": "Peça aos respondentes para escolherem uma ou mais imagens",
     "preview_survey_ending_card_description": "Por favor, continue o seu onboarding.",
     "preview_survey_ending_card_headline": "Conseguiste!",
+    "preview_survey_input_headline": "Mais alguma coisa a partilhar?",
+    "preview_survey_input_placeholder": "Deixa uma nota...",
     "preview_survey_name": "Novo inquérito",
     "preview_survey_question_1_headline": "Como classificaria {projectName}?",
     "preview_survey_question_1_lower_label": "Não é bom",
@@ -2846,6 +2910,7 @@
     "preview_survey_question_2_choice_1_label": "Sim, mantenha-me informado.",
     "preview_survey_question_2_choice_2_label": "Não, obrigado!",
     "preview_survey_question_2_headline": "Quer manter-se atualizado?",
+    "preview_survey_question_2_subheader": "Este é um exemplo de descrição.",
     "preview_survey_welcome_card_headline": "Bem-vindo!",
     "prioritize_features_description": "Identifique as funcionalidades que os seus utilizadores precisam mais e menos.",
     "prioritize_features_name": "Priorizar Funcionalidades",

apps/web/locales/ro-RO.json

@@ -1156,7 +1156,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",
@@ -1195,6 +1194,7 @@
         "block_duplicated": "Bloc duplicat.",
         "bold": "Îngroșat",
         "brand_color": "Culoarea brandului",
+        "brand_color_description": "Se aplică pe butoane, linkuri și evidențieri.",
         "brightness": "Luminozitate",
         "bulk_edit": "Editare în bloc",
         "bulk_edit_description": "Editați toate opțiunile de mai jos, câte una pe linie. Liniile goale vor fi omise, iar duplicatele vor fi eliminate.",
@@ -1212,7 +1212,9 @@
         "capture_new_action": "Capturați acțiune nouă",
         "card_arrangement_for_survey_type_derived": "Aranjament de carduri pentru sondaje de tip {surveyTypeDerived}",
         "card_background_color": "Culoarea de fundal a cardului",
+        "card_background_color_description": "Umple zona cardului de sondaj.",
         "card_border_color": "Culoarea bordurii cardului",
+        "card_border_color_description": "Conturează cardul sondajului.",
         "card_styling": "Stilizare card",
         "casual": "Casual",
         "caution_edit_duplicate": "Duplică & editează",
@@ -1227,15 +1229,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",
@@ -1375,7 +1370,6 @@
         "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_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",
@@ -1386,7 +1380,9 @@
         "initial_value": "Valoare inițială",
         "inner_text": "Text Interior",
         "input_border_color": "Culoarea graniței câmpului de introducere",
+        "input_border_color_description": "Conturează câmpurile de text și zonele de text.",
         "input_color": "Culoarea câmpului de introducere",
+        "input_color_description": "Umple interiorul câmpurilor de text.",
         "insert_link": "Inserează link",
         "invalid_targeting": "\"Targetare nevalidă: Vă rugăm să verificați filtrele pentru audiență\"",
         "invalid_video_url_warning": "Vă rugăm să introduceți un URL valid de YouTube, Vimeo sau Loom. În prezent nu susținem alți furnizori de găzduire video.",
@@ -1470,7 +1466,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",
@@ -1532,6 +1527,7 @@
         "response_limits_redirections_and_more": "Limite de răspunsuri, redirecționări și altele.",
         "response_options": "Opțiuni răspuns",
         "roundness": "Rotunjire",
+        "roundness_description": "Controlează cât de rotunjite sunt colțurile cardului.",
         "row_used_in_logic_error": "Această linie este folosită în logica întrebării {questionIndex}. Vă rugăm să-l eliminați din logică mai întâi.",
         "rows": "Rânduri",
         "save_and_close": "Salvează & Închide",
@@ -1573,7 +1569,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",
@@ -2057,6 +2052,69 @@
       "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_bg_description": "Umple butonul Următor / Trimite.",
+        "advanced_styling_field_button_border_radius_description": "Rotunjește colțurile butonului.",
+        "advanced_styling_field_button_font_size_description": "Scalează textul etichetei butonului.",
+        "advanced_styling_field_button_font_weight_description": "Face textul butonului mai subțire sau mai îngroșat.",
+        "advanced_styling_field_button_height_description": "Controlează înălțimea butonului.",
+        "advanced_styling_field_button_padding_x_description": "Adaugă spațiu la stânga și la dreapta.",
+        "advanced_styling_field_button_padding_y_description": "Adaugă spațiu sus și jos.",
+        "advanced_styling_field_button_text": "Text buton",
+        "advanced_styling_field_button_text_description": "Colorează eticheta din interiorul butoanelor.",
+        "advanced_styling_field_description_color": "Culoare descriere",
+        "advanced_styling_field_description_color_description": "Colorează textul de sub fiecare titlu.",
+        "advanced_styling_field_description_size": "Mărime font descriere",
+        "advanced_styling_field_description_size_description": "Scalează textul descrierii.",
+        "advanced_styling_field_description_weight": "Grosime font descriere",
+        "advanced_styling_field_description_weight_description": "Face textul descrierii mai subțire sau mai îngroșat.",
+        "advanced_styling_field_font_size": "Mărime font",
+        "advanced_styling_field_font_weight": "Grosime font",
+        "advanced_styling_field_headline_color": "Culoare titlu",
+        "advanced_styling_field_headline_color_description": "Colorează textul principal al întrebării.",
+        "advanced_styling_field_headline_size": "Mărime font titlu",
+        "advanced_styling_field_headline_size_description": "Scalează textul titlului.",
+        "advanced_styling_field_headline_weight": "Grosime font titlu",
+        "advanced_styling_field_headline_weight_description": "Face textul titlului mai subțire sau mai îngroșat.",
+        "advanced_styling_field_height": "Înălțime",
+        "advanced_styling_field_indicator_bg": "Fundal indicator",
+        "advanced_styling_field_indicator_bg_description": "Colorează partea umplută a barei.",
+        "advanced_styling_field_input_border_radius_description": "Rotunjește colțurile câmpurilor de introducere.",
+        "advanced_styling_field_input_font_size_description": "Scalează textul introdus în câmpuri.",
+        "advanced_styling_field_input_height_description": "Controlează înălțimea câmpului de introducere.",
+        "advanced_styling_field_input_padding_x_description": "Adaugă spațiu la stânga și la dreapta.",
+        "advanced_styling_field_input_padding_y_description": "Adaugă spațiu deasupra și dedesubt.",
+        "advanced_styling_field_input_placeholder_opacity_description": "Estompează textul de sugestie din placeholder.",
+        "advanced_styling_field_input_shadow_description": "Adaugă o umbră în jurul câmpurilor de introducere.",
+        "advanced_styling_field_input_text": "Text câmp",
+        "advanced_styling_field_input_text_description": "Colorează textul introdus în câmpuri.",
+        "advanced_styling_field_option_bg": "Fundal",
+        "advanced_styling_field_option_bg_description": "Umple elementele de opțiune.",
+        "advanced_styling_field_option_border_radius_description": "Rotunjește colțurile opțiunilor.",
+        "advanced_styling_field_option_font_size_description": "Redimensionează textul etichetei opțiunii.",
+        "advanced_styling_field_option_label": "Culoare etichetă",
+        "advanced_styling_field_option_label_description": "Colorează textul etichetei opțiunii.",
+        "advanced_styling_field_option_padding_x_description": "Adaugă spațiu în stânga și în dreapta.",
+        "advanced_styling_field_option_padding_y_description": "Adaugă spațiu deasupra și dedesubt.",
+        "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 track",
+        "advanced_styling_field_track_bg_description": "Colorează partea necompletată a barei.",
+        "advanced_styling_field_track_height": "Înălțime track",
+        "advanced_styling_field_track_height_description": "Controlează grosimea barei de progres.",
+        "advanced_styling_field_upper_label_color": "Culoare etichetă titlu",
+        "advanced_styling_field_upper_label_color_description": "Colorează eticheta mică de deasupra câmpurilor.",
+        "advanced_styling_field_upper_label_size": "Mărime font etichetă titlu",
+        "advanced_styling_field_upper_label_size_description": "Redimensionează eticheta mică de deasupra câmpurilor.",
+        "advanced_styling_field_upper_label_weight": "Grosime font etichetă titlu",
+        "advanced_styling_field_upper_label_weight_description": "Face eticheta mai subțire sau mai îngroșată.",
+        "advanced_styling_section_buttons": "Butoane",
+        "advanced_styling_section_headlines": "Titluri și descrieri",
+        "advanced_styling_section_inputs": "Inputuri",
+        "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.",
         "email_customization": "Personalizare email",
@@ -2069,6 +2127,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": "Vrei să generezi o temă de culori potrivită pe baza culorii brandului tău? Aceasta va suprascrie setările actuale de culoare.",
+        "generate_theme_header": "Generezi 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",
@@ -2083,6 +2144,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": "Sugerează culori",
         "theme": "Temă",
         "theme_settings_description": "Creează o temă de stil pentru toate sondajele. Poți activa stilizare personalizată pentru fiecare sondaj."
       },
@@ -2837,6 +2899,8 @@
     "picture_selection_description": "Cereți respondenților să aleagă una sau mai multe imagini",
     "preview_survey_ending_card_description": "Vă rugăm să continuați onboarding-ul.",
     "preview_survey_ending_card_headline": "Ai reușit!",
+    "preview_survey_input_headline": "Mai vrei să adaugi ceva?",
+    "preview_survey_input_placeholder": "Lasă o notă...",
     "preview_survey_name": "Previzualizare chestionar",
     "preview_survey_question_1_headline": "Cum ai evalua {projectName}?",
     "preview_survey_question_1_lower_label": "Nu este bine",
@@ -2846,6 +2910,7 @@
     "preview_survey_question_2_choice_1_label": "Da, ține-mă informat.",
     "preview_survey_question_2_choice_2_label": "Nu, mulţumesc!",
     "preview_survey_question_2_headline": "Vrei să fii în temă?",
+    "preview_survey_question_2_subheader": "Aceasta este o descriere exemplu.",
     "preview_survey_welcome_card_headline": "Bun venit!",
     "prioritize_features_description": "Identificați caracteristicile de care utilizatorii dumneavoastră au cel mai mult și cel mai puțin nevoie.",
     "prioritize_features_name": "Prioritizați caracteristicile",

apps/web/locales/ru-RU.json

@@ -1156,7 +1156,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": "Добавить вариант",
@@ -1195,6 +1194,7 @@
         "block_duplicated": "Блокировать дубликаты.",
         "bold": "Жирный",
         "brand_color": "Фирменный цвет",
+        "brand_color_description": "Применяется к кнопкам, ссылкам и выделениям.",
         "brightness": "Яркость",
         "bulk_edit": "Массовое редактирование",
         "bulk_edit_description": "Отредактируйте все варианты ниже, по одному на строку. Пустые строки будут пропущены, а дубликаты удалены.",
@@ -1212,7 +1212,9 @@
         "capture_new_action": "Захватить новое действие",
         "card_arrangement_for_survey_type_derived": "Расположение карточек для опросов типа {surveyTypeDerived}",
         "card_background_color": "Цвет фона карточки",
+        "card_background_color_description": "Заполняет область карточки опроса.",
         "card_border_color": "Цвет рамки карточки",
+        "card_border_color_description": "Обводит карточку опроса.",
         "card_styling": "Оформление карточки",
         "casual": "Неформальный",
         "caution_edit_duplicate": "Дублировать и редактировать",
@@ -1227,15 +1229,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": "Метка флажка",
@@ -1375,7 +1370,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": "Игнорировать период ожидания",
@@ -1386,7 +1380,9 @@
         "initial_value": "Начальное значение",
         "inner_text": "Внутренний текст",
         "input_border_color": "Цвет рамки поля ввода",
+        "input_border_color_description": "Обводит текстовые поля и текстовые области.",
         "input_color": "Цвет поля ввода",
+        "input_color_description": "Заполняет внутреннюю часть текстовых полей.",
         "insert_link": "Вставить ссылку",
         "invalid_targeting": "Некорректный таргетинг: проверьте фильтры аудитории",
         "invalid_video_url_warning": "Пожалуйста, введите корректную ссылку на YouTube, Vimeo или Loom. В настоящее время другие видеохостинги не поддерживаются.",
@@ -1470,7 +1466,6 @@
         "protect_survey_with_pin_description": "Только пользователи, у которых есть PIN-код, могут получить доступ к опросу.",
         "publish": "Опубликовать",
         "question": "Вопрос",
-        "question_color": "Цвет вопроса",
         "question_deleted": "Вопрос удалён.",
         "question_duplicated": "Вопрос дублирован.",
         "question_id_updated": "ID вопроса обновлён",
@@ -1532,6 +1527,7 @@
         "response_limits_redirections_and_more": "Лимиты ответов, перенаправления и другое.",
         "response_options": "Параметры ответа",
         "roundness": "Скругление",
+        "roundness_description": "Определяет степень скругления углов карточки.",
         "row_used_in_logic_error": "Эта строка используется в логике вопроса {questionIndex}. Пожалуйста, сначала удалите её из логики.",
         "rows": "Строки",
         "save_and_close": "Сохранить и закрыть",
@@ -1573,7 +1569,6 @@
         "styling_set_to_theme_styles": "Оформление установлено в соответствии с темой",
         "subheading": "Подзаголовок",
         "subtract": "Вычесть -",
-        "suggest_colors": "Предложить цвета",
         "survey_completed_heading": "Опрос завершён",
         "survey_completed_subheading": "Этот бесплатный и открытый опрос был закрыт",
         "survey_display_settings": "Настройки отображения опроса",
@@ -2057,6 +2052,69 @@
       "look": {
         "add_background_color": "Добавить цвет фона",
         "add_background_color_description": "Добавьте цвет фона для контейнера с логотипом.",
+        "advanced_styling_field_border_radius": "Радиус скругления",
+        "advanced_styling_field_button_bg": "Фон кнопки",
+        "advanced_styling_field_button_bg_description": "Заполняет кнопку «Далее» / «Отправить».",
+        "advanced_styling_field_button_border_radius_description": "Скругляет углы кнопки.",
+        "advanced_styling_field_button_font_size_description": "Масштабирует текст на кнопке.",
+        "advanced_styling_field_button_font_weight_description": "Делает текст на кнопке тоньше или жирнее.",
+        "advanced_styling_field_button_height_description": "Определяет высоту кнопки.",
+        "advanced_styling_field_button_padding_x_description": "Добавляет отступы слева и справа.",
+        "advanced_styling_field_button_padding_y_description": "Добавляет отступы сверху и снизу.",
+        "advanced_styling_field_button_text": "Текст кнопки",
+        "advanced_styling_field_button_text_description": "Задаёт цвет текста на кнопках.",
+        "advanced_styling_field_description_color": "Цвет описания",
+        "advanced_styling_field_description_color_description": "Задаёт цвет текста под каждым заголовком.",
+        "advanced_styling_field_description_size": "Размер шрифта описания",
+        "advanced_styling_field_description_size_description": "Масштабирует текст описания.",
+        "advanced_styling_field_description_weight": "Толщина шрифта описания",
+        "advanced_styling_field_description_weight_description": "Делает текст описания тоньше или жирнее.",
+        "advanced_styling_field_font_size": "Размер шрифта",
+        "advanced_styling_field_font_weight": "Толщина шрифта",
+        "advanced_styling_field_headline_color": "Цвет заголовка",
+        "advanced_styling_field_headline_color_description": "Задаёт цвет основного текста вопроса.",
+        "advanced_styling_field_headline_size": "Размер шрифта заголовка",
+        "advanced_styling_field_headline_size_description": "Масштабирует текст заголовка.",
+        "advanced_styling_field_headline_weight": "Толщина шрифта заголовка",
+        "advanced_styling_field_headline_weight_description": "Делает текст заголовка тоньше или жирнее.",
+        "advanced_styling_field_height": "Высота",
+        "advanced_styling_field_indicator_bg": "Фон индикатора",
+        "advanced_styling_field_indicator_bg_description": "Задаёт цвет заполненной части полосы.",
+        "advanced_styling_field_input_border_radius_description": "Скругляет углы полей ввода.",
+        "advanced_styling_field_input_font_size_description": "Масштабирует введённый текст в полях ввода.",
+        "advanced_styling_field_input_height_description": "Определяет высоту поля ввода.",
+        "advanced_styling_field_input_padding_x_description": "Добавляет отступы слева и справа.",
+        "advanced_styling_field_input_padding_y_description": "Добавляет пространство сверху и снизу.",
+        "advanced_styling_field_input_placeholder_opacity_description": "Делает текст подсказки менее заметным.",
+        "advanced_styling_field_input_shadow_description": "Добавляет тень вокруг полей ввода.",
+        "advanced_styling_field_input_text": "Текст ввода",
+        "advanced_styling_field_input_text_description": "Задаёт цвет введённого текста в полях.",
+        "advanced_styling_field_option_bg": "Фон",
+        "advanced_styling_field_option_bg_description": "Заливает фон элементов опций.",
+        "advanced_styling_field_option_border_radius_description": "Скругляет углы опций.",
+        "advanced_styling_field_option_font_size_description": "Изменяет размер текста метки опции.",
+        "advanced_styling_field_option_label": "Цвет метки",
+        "advanced_styling_field_option_label_description": "Задаёт цвет текста метки опции.",
+        "advanced_styling_field_option_padding_x_description": "Добавляет пространство слева и справа.",
+        "advanced_styling_field_option_padding_y_description": "Добавляет пространство сверху и снизу.",
+        "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_bg_description": "Задаёт цвет незаполненной части полосы.",
+        "advanced_styling_field_track_height": "Высота трека",
+        "advanced_styling_field_track_height_description": "Управляет толщиной индикатора прогресса.",
+        "advanced_styling_field_upper_label_color": "Цвет метки заголовка",
+        "advanced_styling_field_upper_label_color_description": "Задаёт цвет маленькой метки над полями ввода.",
+        "advanced_styling_field_upper_label_size": "Размер шрифта метки заголовка",
+        "advanced_styling_field_upper_label_size_description": "Изменяет размер маленькой метки над полями ввода.",
+        "advanced_styling_field_upper_label_weight": "Толщина шрифта метки заголовка",
+        "advanced_styling_field_upper_label_weight_description": "Делает метку тоньше или жирнее.",
+        "advanced_styling_section_buttons": "Кнопки",
+        "advanced_styling_section_headlines": "Заголовки и описания",
+        "advanced_styling_section_inputs": "Поля ввода",
+        "advanced_styling_section_options": "Опции (радио/чекбокс)",
         "app_survey_placement": "Размещение опроса в приложении",
         "app_survey_placement_settings_description": "Измените, где будут отображаться опросы в вашем веб-приложении или на сайте.",
         "email_customization": "Настройка email",
@@ -2069,6 +2127,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": "Логотип успешно обновлён",
@@ -2083,6 +2144,7 @@
         "show_formbricks_branding_in": "Показывать брендинг Formbricks в опросах типа {type}",
         "show_powered_by_formbricks": "Показывать подпись «Работает на Formbricks»",
         "styling_updated_successfully": "Стили успешно обновлены",
+        "suggest_colors": "Предложить цвета",
         "theme": "Тема",
         "theme_settings_description": "Создайте стиль для всех опросов. Вы можете включить индивидуальное оформление для каждого опроса."
       },
@@ -2837,6 +2899,8 @@
     "picture_selection_description": "Попросите респондентов выбрать одно или несколько изображений",
     "preview_survey_ending_card_description": "Пожалуйста, продолжайте регистрацию.",
     "preview_survey_ending_card_headline": "Вы справились!",
+    "preview_survey_input_headline": "Есть ещё что-то, чем хочешь поделиться?",
+    "preview_survey_input_placeholder": "Оставь заметку...",
     "preview_survey_name": "Новый опрос",
     "preview_survey_question_1_headline": "Как бы вы оценили {projectName}?",
     "preview_survey_question_1_lower_label": "Плохо",
@@ -2846,6 +2910,7 @@
     "preview_survey_question_2_choice_1_label": "Да, держите меня в курсе.",
     "preview_survey_question_2_choice_2_label": "Нет, спасибо!",
     "preview_survey_question_2_headline": "Хотите быть в курсе событий?",
+    "preview_survey_question_2_subheader": "Это пример описания.",
     "preview_survey_welcome_card_headline": "Добро пожаловать!",
     "prioritize_features_description": "Определите, какие функции наиболее и наименее важны для ваших пользователей.",
     "prioritize_features_name": "Приоритизация функций",

apps/web/locales/sv-SE.json

@@ -1156,7 +1156,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",
@@ -1195,6 +1194,7 @@
         "block_duplicated": "Block duplicerat.",
         "bold": "Fet",
         "brand_color": "Varumärkesfärg",
+        "brand_color_description": "Används för knappar, länkar och markeringar.",
         "brightness": "Ljusstyrka",
         "bulk_edit": "Massredigera",
         "bulk_edit_description": "Redigera alla alternativ nedan, ett per rad. Tomma rader kommer att hoppas över och dubbletter tas bort.",
@@ -1212,7 +1212,9 @@
         "capture_new_action": "Fånga ny åtgärd",
         "card_arrangement_for_survey_type_derived": "Kortarrangemang för {surveyTypeDerived}-enkäter",
         "card_background_color": "Kortets bakgrundsfärg",
+        "card_background_color_description": "Fyller enkätkortets yta.",
         "card_border_color": "Kortets kantfärg",
+        "card_border_color_description": "Markerar enkätkortets kant.",
         "card_styling": "Kortstil",
         "casual": "Avslappnad",
         "caution_edit_duplicate": "Duplicera och redigera",
@@ -1227,15 +1229,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",
@@ -1375,7 +1370,6 @@
         "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_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",
@@ -1386,7 +1380,9 @@
         "initial_value": "Initialt värde",
         "inner_text": "Inre text",
         "input_border_color": "Inmatningsfältets kantfärg",
+        "input_border_color_description": "Markerar kanten på textfält och textområden.",
         "input_color": "Inmatningsfärg",
+        "input_color_description": "Fyller insidan av textfält.",
         "insert_link": "Infoga länk",
         "invalid_targeting": "Ogiltig målgruppsinriktning: Vänligen kontrollera dina målgruppsfilter",
         "invalid_video_url_warning": "Vänligen ange en giltig YouTube-, Vimeo- eller Loom-URL. Vi stöder för närvarande inte andra videohostingleverantörer.",
@@ -1470,7 +1466,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",
@@ -1532,6 +1527,7 @@
         "response_limits_redirections_and_more": "Svarsgränser, omdirigeringar och mer.",
         "response_options": "Svarsalternativ",
         "roundness": "Rundhet",
+        "roundness_description": "Styr hur rundade kortets hörn är.",
         "row_used_in_logic_error": "Denna rad används i logiken för fråga {questionIndex}. Vänligen ta bort den från logiken först.",
         "rows": "Rader",
         "save_and_close": "Spara och stäng",
@@ -1573,7 +1569,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",
@@ -2057,6 +2052,69 @@
       "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": "Knappens bakgrund",
+        "advanced_styling_field_button_bg_description": "Fyller Nästa / Skicka-knappen.",
+        "advanced_styling_field_button_border_radius_description": "Rundar av knappens hörn.",
+        "advanced_styling_field_button_font_size_description": "Ändrar storleken på knappens text.",
+        "advanced_styling_field_button_font_weight_description": "Gör knapptexten tunnare eller fetare.",
+        "advanced_styling_field_button_height_description": "Styr knappens höjd.",
+        "advanced_styling_field_button_padding_x_description": "Lägger till utrymme till vänster och höger.",
+        "advanced_styling_field_button_padding_y_description": "Lägger till utrymme upptill och nedtill.",
+        "advanced_styling_field_button_text": "Knapptext",
+        "advanced_styling_field_button_text_description": "Färglägger texten i knappar.",
+        "advanced_styling_field_description_color": "Beskrivningsfärg",
+        "advanced_styling_field_description_color_description": "Färglägger texten under varje rubrik.",
+        "advanced_styling_field_description_size": "Beskrivningens teckenstorlek",
+        "advanced_styling_field_description_size_description": "Ändrar storleken på beskrivningstexten.",
+        "advanced_styling_field_description_weight": "Beskrivningens teckentjocklek",
+        "advanced_styling_field_description_weight_description": "Gör beskrivningstexten tunnare eller fetare.",
+        "advanced_styling_field_font_size": "Teckenstorlek",
+        "advanced_styling_field_font_weight": "Teckentjocklek",
+        "advanced_styling_field_headline_color": "Rubrikfärg",
+        "advanced_styling_field_headline_color_description": "Färglägger huvudfrågan.",
+        "advanced_styling_field_headline_size": "Rubrikens teckenstorlek",
+        "advanced_styling_field_headline_size_description": "Ändrar storleken på rubriken.",
+        "advanced_styling_field_headline_weight": "Rubrikens teckentjocklek",
+        "advanced_styling_field_headline_weight_description": "Gör rubriktexten tunnare eller fetare.",
+        "advanced_styling_field_height": "Höjd",
+        "advanced_styling_field_indicator_bg": "Indikatorns bakgrund",
+        "advanced_styling_field_indicator_bg_description": "Färglägger den fyllda delen av stapeln.",
+        "advanced_styling_field_input_border_radius_description": "Rundar av hörnen på inmatningsfält.",
+        "advanced_styling_field_input_font_size_description": "Ändrar storleken på texten i inmatningsfält.",
+        "advanced_styling_field_input_height_description": "Styr höjden på inmatningsfältet.",
+        "advanced_styling_field_input_padding_x_description": "Lägger till utrymme till vänster och höger.",
+        "advanced_styling_field_input_padding_y_description": "Lägger till utrymme upptill och nedtill.",
+        "advanced_styling_field_input_placeholder_opacity_description": "Tonar ut platshållartexten.",
+        "advanced_styling_field_input_shadow_description": "Lägger till en skugga runt inmatningsfälten.",
+        "advanced_styling_field_input_text": "Inmatningstext",
+        "advanced_styling_field_input_text_description": "Färgar den inmatade texten i fälten.",
+        "advanced_styling_field_option_bg": "Bakgrund",
+        "advanced_styling_field_option_bg_description": "Fyller alternativraderna.",
+        "advanced_styling_field_option_border_radius_description": "Rundar hörnen på alternativen.",
+        "advanced_styling_field_option_font_size_description": "Skalar textstorleken på alternativetiketten.",
+        "advanced_styling_field_option_label": "Etikettfärg",
+        "advanced_styling_field_option_label_description": "Färgar texten på alternativetiketten.",
+        "advanced_styling_field_option_padding_x_description": "Lägger till utrymme till vänster och höger.",
+        "advanced_styling_field_option_padding_y_description": "Lägger till utrymme upptill och nedtill.",
+        "advanced_styling_field_padding_x": "Horisontell padding",
+        "advanced_styling_field_padding_y": "Vertikal padding",
+        "advanced_styling_field_placeholder_opacity": "Platshållarens opacitet",
+        "advanced_styling_field_shadow": "Skugga",
+        "advanced_styling_field_track_bg": "Spårets bakgrund",
+        "advanced_styling_field_track_bg_description": "Färgar den ofyllda delen av stapeln.",
+        "advanced_styling_field_track_height": "Spårets höjd",
+        "advanced_styling_field_track_height_description": "Styr tjockleken på förloppsstapeln.",
+        "advanced_styling_field_upper_label_color": "Rubriketikettens färg",
+        "advanced_styling_field_upper_label_color_description": "Färgar den lilla etiketten ovanför fälten.",
+        "advanced_styling_field_upper_label_size": "Rubriketikettens teckenstorlek",
+        "advanced_styling_field_upper_label_size_description": "Skalar storleken på den lilla etiketten ovanför fälten.",
+        "advanced_styling_field_upper_label_weight": "Rubriketikettens teckentjocklek",
+        "advanced_styling_field_upper_label_weight_description": "Gör etiketten tunnare eller fetare.",
+        "advanced_styling_section_buttons": "Knappar",
+        "advanced_styling_section_headlines": "Rubriker & beskrivningar",
+        "advanced_styling_section_inputs": "Inmatningar",
+        "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.",
         "email_customization": "E-postanpassning",
@@ -2069,6 +2127,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 generera 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",
@@ -2083,6 +2144,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."
       },
@@ -2837,6 +2899,8 @@
     "picture_selection_description": "Be respondenter välja en eller flera bilder",
     "preview_survey_ending_card_description": "Vänligen fortsätt din onboarding.",
     "preview_survey_ending_card_headline": "Du klarade det!",
+    "preview_survey_input_headline": "Något mer du vill dela med dig av?",
+    "preview_survey_input_placeholder": "Lämna en kommentar...",
     "preview_survey_name": "Ny enkät",
     "preview_survey_question_1_headline": "Hur skulle du betygsätta {projectName}?",
     "preview_survey_question_1_lower_label": "Inte bra",
@@ -2846,6 +2910,7 @@
     "preview_survey_question_2_choice_1_label": "Ja, håll mig informerad.",
     "preview_survey_question_2_choice_2_label": "Nej, tack!",
     "preview_survey_question_2_headline": "Vill du hållas uppdaterad?",
+    "preview_survey_question_2_subheader": "Det här är ett exempel på en beskrivning.",
     "preview_survey_welcome_card_headline": "Välkommen!",
     "prioritize_features_description": "Identifiera vilka funktioner dina användare behöver mest och minst.",
     "prioritize_features_name": "Prioritera funktioner",

apps/web/locales/zh-Hans-CN.json

@@ -1156,7 +1156,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": "添加 选项",
@@ -1195,6 +1194,7 @@
         "block_duplicated": "区块已复制。",
         "bold": "粗体",
         "brand_color": "品牌 颜色",
+        "brand_color_description": "应用于按钮、链接和高亮部分。",
         "brightness": "亮度",
         "bulk_edit": "批量编辑",
         "bulk_edit_description": "编辑以下所有选项，每行一个。空行将被跳过，重复项将被移除。",
@@ -1212,7 +1212,9 @@
         "capture_new_action": "捕获 新动作",
         "card_arrangement_for_survey_type_derived": "{surveyTypeDerived} 调查 的 卡片 布局",
         "card_background_color": "卡片 的 背景 颜色",
+        "card_background_color_description": "填充调查卡区域。",
         "card_border_color": "卡片 的 边框 颜色",
+        "card_border_color_description": "勾勒调查卡边框。",
         "card_styling": "卡片样式",
         "casual": "休闲",
         "caution_edit_duplicate": "复制 并 编辑",
@@ -1227,15 +1229,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": "复选框 标签",
@@ -1375,7 +1370,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": "忽略冷却期",
@@ -1386,7 +1380,9 @@
         "initial_value": "初始 值",
         "inner_text": "内文",
         "input_border_color": "输入 边框 颜色",
+        "input_border_color_description": "勾勒文本输入框和多行文本框的边框。",
         "input_color": "输入颜色",
+        "input_color_description": "填充文本输入框内部。",
         "insert_link": "插入 链接",
         "invalid_targeting": "无效的目标： 请检查 您 的受众过滤器",
         "invalid_video_url_warning": "请输入有效的 YouTube、Vimeo 或 Loom URL 。我们目前不支持其他 视频 托管服务提供商。",
@@ -1470,7 +1466,6 @@
         "protect_survey_with_pin_description": "只有 拥有 PIN 的 用户 可以 访问 调查。",
         "publish": "发布",
         "question": "问题",
-        "question_color": "问题颜色",
         "question_deleted": "问题 已删除",
         "question_duplicated": "问题重复。",
         "question_id_updated": "问题 ID 更新",
@@ -1532,6 +1527,7 @@
         "response_limits_redirections_and_more": "响应 限制 、 重定向 和 更多 。",
         "response_options": "响应 选项",
         "roundness": "圆度",
+        "roundness_description": "控制卡片角的圆润程度。",
         "row_used_in_logic_error": "\"这个 行 在 问题 {questionIndex} 的 逻辑 中 使用。请 先 从 逻辑 中 删除 它。\"",
         "rows": "行",
         "save_and_close": "保存 和 关闭",
@@ -1573,7 +1569,6 @@
         "styling_set_to_theme_styles": "样式 设置 为 主题 风格",
         "subheading": "子标题",
         "subtract": "减 -",
-        "suggest_colors": "建议颜色",
         "survey_completed_heading": "调查 完成",
         "survey_completed_subheading": "此 免费 & 开源 调查 已 关闭",
         "survey_display_settings": "调查显示设置",
@@ -2057,6 +2052,69 @@
       "look": {
         "add_background_color": "添加背景色",
         "add_background_color_description": "为 logo 容器添加背景色。",
+        "advanced_styling_field_border_radius": "边框圆角",
+        "advanced_styling_field_button_bg": "按钮背景",
+        "advanced_styling_field_button_bg_description": "填充“下一步/提交”按钮。",
+        "advanced_styling_field_button_border_radius_description": "设置按钮圆角。",
+        "advanced_styling_field_button_font_size_description": "调整按钮标签文字大小。",
+        "advanced_styling_field_button_font_weight_description": "设置按钮文字的粗细。",
+        "advanced_styling_field_button_height_description": "控制按钮高度。",
+        "advanced_styling_field_button_padding_x_description": "增加左右间距。",
+        "advanced_styling_field_button_padding_y_description": "增加上下间距。",
+        "advanced_styling_field_button_text": "按钮文字",
+        "advanced_styling_field_button_text_description": "设置按钮内标签的颜色。",
+        "advanced_styling_field_description_color": "描述颜色",
+        "advanced_styling_field_description_color_description": "设置每个标题下方文字的颜色。",
+        "advanced_styling_field_description_size": "描述字体大小",
+        "advanced_styling_field_description_size_description": "调整描述文字大小。",
+        "advanced_styling_field_description_weight": "描述字体粗细",
+        "advanced_styling_field_description_weight_description": "设置描述文字的粗细。",
+        "advanced_styling_field_font_size": "字体大小",
+        "advanced_styling_field_font_weight": "字体粗细",
+        "advanced_styling_field_headline_color": "标题颜色",
+        "advanced_styling_field_headline_color_description": "设置主问题文字的颜色。",
+        "advanced_styling_field_headline_size": "标题字体大小",
+        "advanced_styling_field_headline_size_description": "调整主标题文字大小。",
+        "advanced_styling_field_headline_weight": "标题字体粗细",
+        "advanced_styling_field_headline_weight_description": "设置主标题文字的粗细。",
+        "advanced_styling_field_height": "高度",
+        "advanced_styling_field_indicator_bg": "指示器背景",
+        "advanced_styling_field_indicator_bg_description": "设置进度条已填充部分的颜色。",
+        "advanced_styling_field_input_border_radius_description": "设置输入框圆角。",
+        "advanced_styling_field_input_font_size_description": "调整输入框内文字大小。",
+        "advanced_styling_field_input_height_description": "控制输入框高度。",
+        "advanced_styling_field_input_padding_x_description": "增加输入框左右间距。",
+        "advanced_styling_field_input_padding_y_description": "为输入框上下添加间距。",
+        "advanced_styling_field_input_placeholder_opacity_description": "调整占位提示文字的透明度。",
+        "advanced_styling_field_input_shadow_description": "为输入框添加投影效果。",
+        "advanced_styling_field_input_text": "输入文字",
+        "advanced_styling_field_input_text_description": "设置输入框内已输入文字的颜色。",
+        "advanced_styling_field_option_bg": "背景色",
+        "advanced_styling_field_option_bg_description": "设置选项项的背景色。",
+        "advanced_styling_field_option_border_radius_description": "设置选项的圆角。",
+        "advanced_styling_field_option_font_size_description": "调整选项标签文字的大小。",
+        "advanced_styling_field_option_label": "标签颜色",
+        "advanced_styling_field_option_label_description": "设置选项标签文字的颜色。",
+        "advanced_styling_field_option_padding_x_description": "为选项左右添加间距。",
+        "advanced_styling_field_option_padding_y_description": "为选项上下添加间距。",
+        "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_bg_description": "设置进度条未填充部分的颜色。",
+        "advanced_styling_field_track_height": "轨道高度",
+        "advanced_styling_field_track_height_description": "控制进度条的粗细。",
+        "advanced_styling_field_upper_label_color": "标题标签颜色",
+        "advanced_styling_field_upper_label_color_description": "设置输入框上方小标签的颜色。",
+        "advanced_styling_field_upper_label_size": "标题标签字体大小",
+        "advanced_styling_field_upper_label_size_description": "调整输入框上方小标签的大小。",
+        "advanced_styling_field_upper_label_weight": "标题标签字体粗细",
+        "advanced_styling_field_upper_label_weight_description": "设置标签文字的粗细。",
+        "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 应用或网站中显示的位置。",
         "email_customization": "邮件自定义",
@@ -2069,6 +2127,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 更新成功",
@@ -2083,6 +2144,7 @@
         "show_formbricks_branding_in": "在 {type} 调查中显示 Formbricks 品牌标识",
         "show_powered_by_formbricks": "显示“Powered by Formbricks”标识",
         "styling_updated_successfully": "样式更新成功",
+        "suggest_colors": "推荐颜色",
         "theme": "主题",
         "theme_settings_description": "为所有问卷创建一个样式主题。你可以为每个问卷启用自定义样式。"
       },
@@ -2837,6 +2899,8 @@
     "picture_selection_description": "要求 受访者 选择 一个 或 多个 图片",
     "preview_survey_ending_card_description": "请继续您的 入职培训。",
     "preview_survey_ending_card_headline": "你 做 到 了 ！",
+    "preview_survey_input_headline": "还有其他想分享的吗？",
+    "preview_survey_input_placeholder": "留下备注……",
     "preview_survey_name": "预览 调查",
     "preview_survey_question_1_headline": "您 如何 评价 {projectName} ？",
     "preview_survey_question_1_lower_label": "不 好",
@@ -2846,6 +2910,7 @@
     "preview_survey_question_2_choice_1_label": "是 ， 保持我 更新 。",
     "preview_survey_question_2_choice_2_label": "不，谢谢！",
     "preview_survey_question_2_headline": "想 了解 最新信息吗？",
+    "preview_survey_question_2_subheader": "这是一个示例描述。",
     "preview_survey_welcome_card_headline": "欢迎！",
     "prioritize_features_description": "确定 用户 最 需要 和 最 不 需要 的 功能。",
     "prioritize_features_name": "优先 功能",

apps/web/locales/zh-Hant-TW.json

@@ -1156,7 +1156,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": "新增選項",
@@ -1195,6 +1194,7 @@
         "block_duplicated": "區塊已複製。",
         "bold": "粗體",
         "brand_color": "品牌顏色",
+        "brand_color_description": "應用於按鈕、連結和重點標示。",
         "brightness": "亮度",
         "bulk_edit": "批次編輯",
         "bulk_edit_description": "在下方逐行編輯所有選項。空白行將被略過，重複項目將被移除。",
@@ -1212,7 +1212,9 @@
         "capture_new_action": "擷取新操作",
         "card_arrangement_for_survey_type_derived": "'{'surveyTypeDerived'}' 問卷的卡片排列",
         "card_background_color": "卡片背景顏色",
+        "card_background_color_description": "填滿問卷卡片區域。",
         "card_border_color": "卡片邊框顏色",
+        "card_border_color_description": "描繪問卷卡片的邊框。",
         "card_styling": "卡片樣式",
         "casual": "隨意",
         "caution_edit_duplicate": "複製 & 編輯",
@@ -1227,15 +1229,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": "核取方塊標籤",
@@ -1375,7 +1370,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": "忽略冷卻期",
@@ -1386,7 +1380,9 @@
         "initial_value": "初始值",
         "inner_text": "內部文字",
         "input_border_color": "輸入邊框顏色",
+        "input_border_color_description": "描繪文字輸入框和文字區域的邊框。",
         "input_color": "輸入顏色",
+        "input_color_description": "填滿文字輸入框的內部。",
         "insert_link": "插入 連結",
         "invalid_targeting": "目標設定無效：請檢查您的受眾篩選器",
         "invalid_video_url_warning": "請輸入有效的 YouTube、Vimeo 或 Loom 網址。我們目前不支援其他影片託管提供者。",
@@ -1470,7 +1466,6 @@
         "protect_survey_with_pin_description": "只有擁有 PIN 碼的使用者才能存取問卷。",
         "publish": "發布",
         "question": "問題",
-        "question_color": "問題顏色",
         "question_deleted": "問題已刪除。",
         "question_duplicated": "問題已複製。",
         "question_id_updated": "問題 ID 已更新",
@@ -1532,6 +1527,7 @@
         "response_limits_redirections_and_more": "回應限制、重新導向等。",
         "response_options": "回應選項",
         "roundness": "圓角",
+        "roundness_description": "調整卡片邊角的圓弧度。",
         "row_used_in_logic_error": "此 row 用於問題 '{'questionIndex'}' 的邏輯中。請先從邏輯中移除。",
         "rows": "列",
         "save_and_close": "儲存並關閉",
@@ -1573,7 +1569,6 @@
         "styling_set_to_theme_styles": "樣式設定為主題樣式",
         "subheading": "副標題",
         "subtract": "減 -",
-        "suggest_colors": "建議顏色",
         "survey_completed_heading": "問卷已完成",
         "survey_completed_subheading": "此免費且開源的問卷已關閉",
         "survey_display_settings": "問卷顯示設定",
@@ -2057,6 +2052,69 @@
       "look": {
         "add_background_color": "新增背景顏色",
         "add_background_color_description": "為標誌容器新增背景顏色。",
+        "advanced_styling_field_border_radius": "邊框圓角",
+        "advanced_styling_field_button_bg": "按鈕背景",
+        "advanced_styling_field_button_bg_description": "填滿「下一步」／「送出」按鈕。",
+        "advanced_styling_field_button_border_radius_description": "調整按鈕的圓角。",
+        "advanced_styling_field_button_font_size_description": "調整按鈕標籤文字的大小。",
+        "advanced_styling_field_button_font_weight_description": "讓按鈕文字變細或變粗。",
+        "advanced_styling_field_button_height_description": "調整按鈕的高度。",
+        "advanced_styling_field_button_padding_x_description": "在左右兩側增加間距。",
+        "advanced_styling_field_button_padding_y_description": "在上下兩側增加間距。",
+        "advanced_styling_field_button_text": "按鈕文字",
+        "advanced_styling_field_button_text_description": "設定按鈕內標籤的顏色。",
+        "advanced_styling_field_description_color": "說明文字顏色",
+        "advanced_styling_field_description_color_description": "設定每個標題下方文字的顏色。",
+        "advanced_styling_field_description_size": "說明文字大小",
+        "advanced_styling_field_description_size_description": "調整說明文字的大小。",
+        "advanced_styling_field_description_weight": "說明文字粗細",
+        "advanced_styling_field_description_weight_description": "讓說明文字變細或變粗。",
+        "advanced_styling_field_font_size": "字體大小",
+        "advanced_styling_field_font_weight": "字體粗細",
+        "advanced_styling_field_headline_color": "標題顏色",
+        "advanced_styling_field_headline_color_description": "設定主要問題文字的顏色。",
+        "advanced_styling_field_headline_size": "標題字體大小",
+        "advanced_styling_field_headline_size_description": "調整標題文字的大小。",
+        "advanced_styling_field_headline_weight": "標題字體粗細",
+        "advanced_styling_field_headline_weight_description": "讓標題文字變細或變粗。",
+        "advanced_styling_field_height": "高度",
+        "advanced_styling_field_indicator_bg": "指示器背景",
+        "advanced_styling_field_indicator_bg_description": "設定進度條已填滿部分的顏色。",
+        "advanced_styling_field_input_border_radius_description": "調整輸入框的圓角。",
+        "advanced_styling_field_input_font_size_description": "調整輸入框內輸入文字的大小。",
+        "advanced_styling_field_input_height_description": "調整輸入欄位的高度。",
+        "advanced_styling_field_input_padding_x_description": "在左右兩側增加間距。",
+        "advanced_styling_field_input_padding_y_description": "在上方和下方增加間距。",
+        "advanced_styling_field_input_placeholder_opacity_description": "讓提示文字變得更淡。",
+        "advanced_styling_field_input_shadow_description": "在輸入框周圍加上陰影。",
+        "advanced_styling_field_input_text": "輸入文字",
+        "advanced_styling_field_input_text_description": "設定輸入文字的顏色。",
+        "advanced_styling_field_option_bg": "背景",
+        "advanced_styling_field_option_bg_description": "填滿選項項目背景。",
+        "advanced_styling_field_option_border_radius_description": "讓選項的邊角變圓。",
+        "advanced_styling_field_option_font_size_description": "調整選項標籤文字的大小。",
+        "advanced_styling_field_option_label": "標籤顏色",
+        "advanced_styling_field_option_label_description": "設定選項標籤文字的顏色。",
+        "advanced_styling_field_option_padding_x_description": "在左側和右側增加間距。",
+        "advanced_styling_field_option_padding_y_description": "在上方和下方增加間距。",
+        "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_bg_description": "設定進度條未填滿部分的顏色。",
+        "advanced_styling_field_track_height": "軌道高度",
+        "advanced_styling_field_track_height_description": "調整進度條的厚度。",
+        "advanced_styling_field_upper_label_color": "標題標籤顏色",
+        "advanced_styling_field_upper_label_color_description": "設定輸入框上方小標籤的顏色。",
+        "advanced_styling_field_upper_label_size": "標題標籤字體大小",
+        "advanced_styling_field_upper_label_size_description": "調整輸入框上方小標籤的大小。",
+        "advanced_styling_field_upper_label_weight": "標題標籤字體粗細",
+        "advanced_styling_field_upper_label_weight_description": "讓標籤字體變細或變粗。",
+        "advanced_styling_section_buttons": "按鈕",
+        "advanced_styling_section_headlines": "標題與說明",
+        "advanced_styling_section_inputs": "輸入欄位",
+        "advanced_styling_section_options": "選項（單選／複選）",
         "app_survey_placement": "應用程式問卷位置",
         "app_survey_placement_settings_description": "變更問卷在您的網頁應用程式或網站中顯示的位置。",
         "email_customization": "電子郵件自訂化",
@@ -2069,6 +2127,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": "標誌已成功更新",
@@ -2083,6 +2144,7 @@
         "show_formbricks_branding_in": "在 {type} 問卷中顯示 Formbricks 品牌標示",
         "show_powered_by_formbricks": "顯示「Powered by Formbricks」標記",
         "styling_updated_successfully": "樣式已成功更新",
+        "suggest_colors": "建議顏色",
         "theme": "主題",
         "theme_settings_description": "為所有調查建立樣式主題。您可以為每個調查啟用自訂樣式。"
       },
@@ -2837,6 +2899,8 @@
     "picture_selection_description": "要求回應者選擇一張或多張圖片",
     "preview_survey_ending_card_description": "請繼續您的新手上路程序。",
     "preview_survey_ending_card_headline": "您完成了！",
+    "preview_survey_input_headline": "還有其他想分享的嗎？",
+    "preview_survey_input_placeholder": "留下備註⋯⋯",
     "preview_survey_name": "新問卷",
     "preview_survey_question_1_headline": "您對 '{'projectName'}' 的評分如何？",
     "preview_survey_question_1_lower_label": "不好",
@@ -2846,6 +2910,7 @@
     "preview_survey_question_2_choice_1_label": "是，請保持通知我。",
     "preview_survey_question_2_choice_2_label": "不用了，謝謝！",
     "preview_survey_question_2_headline": "想要緊跟最新動態嗎？",
+    "preview_survey_question_2_subheader": "這是一個範例說明。",
     "preview_survey_welcome_card_headline": "歡迎！",
     "prioritize_features_description": "找出您的使用者最需要和最不需要的功能。",
     "prioritize_features_name": "優先排序功能",

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";
@@ -11,7 +11,7 @@ import { useTranslation } from "react-i18next";
 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 { STYLE_DEFAULTS, getSuggestedColors } from "@/lib/styling/constants";
 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 +20,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,
@@ -53,35 +54,55 @@ export const ThemeStyling = ({
   const { t } = useTranslation();
   const router = useRouter();
 
+  const savedStyling = project.styling as Partial<TProjectStyling> | null;
+
+  // Strip null/undefined values so they don't override STYLE_DEFAULTS.
+  // Saved styling from before advanced fields existed will have nullish entries.
+  const cleanSaved = savedStyling
+    ? Object.fromEntries(Object.entries(savedStyling).filter(([, v]) => v != null))
+    : {};
+
   const form = useForm<TProjectStyling>({
-    defaultValues: { ...defaultStyling, ...project.styling },
+    defaultValues: { ...STYLE_DEFAULTS, ...cleanSaved },
     resolver: zodResolver(ZProjectStyling),
   });
 
   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,
       data: {
-        styling: { ...defaultStyling },
+        styling: { ...STYLE_DEFAULTS },
       },
     });
 
     if (updatedProjectResponse?.data) {
-      form.reset({ ...defaultStyling });
+      form.reset({ ...STYLE_DEFAULTS });
       toast.success(t("environments.workspace.look.styling_updated_successfully"));
       router.refresh();
     } else {
       const errorMessage = getFormattedErrorMessage(updatedProjectResponse);
       toast.error(errorMessage);
     }
-  }, [form, project.id, router]);
+  }, [form, project.id, router, t]);
+
+  const handleSuggestColors = () => {
+    const brandColor = form.getValues().brandColor?.light ?? STYLE_DEFAULTS.brandColor?.light;
+    const suggested = getSuggestedColors(brandColor);
+
+    for (const [key, value] of Object.entries(suggested)) {
+      form.setValue(key as keyof TProjectStyling, value, { 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 +165,38 @@ 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>{t("environments.surveys.edit.brand_color")}</FormLabel>
+                        <FormDescription>
+                          {t("environments.surveys.edit.brand_color_description")}
+                        </FormDescription>
+                        <FormControl>
+                          <ColorPicker
+                            color={field.value ?? STYLE_DEFAULTS.brandColor?.light}
+                            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"
+                      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,12 +244,12 @@ 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={{
                   ...project,
-                  styling: form.watch(),
+                  styling: form.watch("allowStyleOverwrite") ? form.watch() : STYLE_DEFAULTS,
                 }}
                 previewType={previewSurveyType}
                 setPreviewType={setPreviewSurveyType}
@@ -206,6 +258,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}

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
@@ -110,110 +79,291 @@ 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")}
+                description={t(
+                  "environments.workspace.look.advanced_styling_field_headline_color_description"
+                )}
+              />
+              <ColorField
+                form={form}
+                name="elementDescriptionColor.light"
+                label={t("environments.workspace.look.advanced_styling_field_description_color")}
+                description={t(
+                  "environments.workspace.look.advanced_styling_field_description_color_description"
+                )}
+              />
+              <DimensionInput
+                form={form}
+                name="elementHeadlineFontSize"
+                label={t("environments.workspace.look.advanced_styling_field_headline_size")}
+                description={t(
+                  "environments.workspace.look.advanced_styling_field_headline_size_description"
+                )}
+              />
+              <DimensionInput
+                form={form}
+                name="elementDescriptionFontSize"
+                label={t("environments.workspace.look.advanced_styling_field_description_size")}
+                description={t(
+                  "environments.workspace.look.advanced_styling_field_description_size_description"
+                )}
+              />
+              <NumberField
+                form={form}
+                name="elementHeadlineFontWeight"
+                label={t("environments.workspace.look.advanced_styling_field_headline_weight")}
+                description={t(
+                  "environments.workspace.look.advanced_styling_field_headline_weight_description"
+                )}
+              />
+              <NumberField
+                form={form}
+                name="elementDescriptionFontWeight"
+                label={t("environments.workspace.look.advanced_styling_field_description_weight")}
+                description={t(
+                  "environments.workspace.look.advanced_styling_field_description_weight_description"
+                )}
+              />
+              <ColorField
+                form={form}
+                name="elementUpperLabelColor.light"
+                label={t("environments.workspace.look.advanced_styling_field_upper_label_color")}
+                description={t(
+                  "environments.workspace.look.advanced_styling_field_upper_label_color_description"
+                )}
+              />
+              <DimensionInput
+                form={form}
+                name="elementUpperLabelFontSize"
+                label={t("environments.workspace.look.advanced_styling_field_upper_label_size")}
+                description={t(
+                  "environments.workspace.look.advanced_styling_field_upper_label_size_description"
+                )}
+              />
+              <NumberField
+                form={form}
+                name="elementUpperLabelFontWeight"
+                label={t("environments.workspace.look.advanced_styling_field_upper_label_weight")}
+                description={t(
+                  "environments.workspace.look.advanced_styling_field_upper_label_weight_description"
+                )}
+              />
+            </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")}
+                description={t("environments.surveys.edit.input_color_description")}
+              />
+              <ColorField
+                form={form}
+                name="inputBorderColor.light"
+                label={t("environments.surveys.edit.input_border_color")}
+                description={t("environments.surveys.edit.input_border_color_description")}
+              />
+              <ColorField
+                form={form}
+                name="inputTextColor.light"
+                label={t("environments.workspace.look.advanced_styling_field_input_text")}
+                description={t("environments.workspace.look.advanced_styling_field_input_text_description")}
+              />
+              <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")}
+                description={t(
+                  "environments.workspace.look.advanced_styling_field_input_border_radius_description"
+                )}
+              />
+              <DimensionInput
+                form={form}
+                name="inputHeight"
+                label={t("environments.workspace.look.advanced_styling_field_height")}
+                description={t("environments.workspace.look.advanced_styling_field_input_height_description")}
+              />
+              <DimensionInput
+                form={form}
+                name="inputFontSize"
+                label={t("environments.workspace.look.advanced_styling_field_font_size")}
+                description={t(
+                  "environments.workspace.look.advanced_styling_field_input_font_size_description"
+                )}
+              />
+              <DimensionInput
+                form={form}
+                name="inputPaddingX"
+                label={t("environments.workspace.look.advanced_styling_field_padding_x")}
+                description={t(
+                  "environments.workspace.look.advanced_styling_field_input_padding_x_description"
+                )}
+              />
+              <DimensionInput
+                form={form}
+                name="inputPaddingY"
+                label={t("environments.workspace.look.advanced_styling_field_padding_y")}
+                description={t(
+                  "environments.workspace.look.advanced_styling_field_input_padding_y_description"
+                )}
+              />
+              <NumberField
+                form={form}
+                name="inputPlaceholderOpacity"
+                label={t("environments.workspace.look.advanced_styling_field_placeholder_opacity")}
+                description={t(
+                  "environments.workspace.look.advanced_styling_field_input_placeholder_opacity_description"
+                )}
+                step={0.1}
+                max={1}
+              />
+              <TextField
+                form={form}
+                name="inputShadow"
+                label={t("environments.workspace.look.advanced_styling_field_shadow")}
+                description={t("environments.workspace.look.advanced_styling_field_input_shadow_description")}
+              />
+            </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")}
+                description={t("environments.workspace.look.advanced_styling_field_button_bg_description")}
+              />
+              <ColorField
+                form={form}
+                name="buttonTextColor.light"
+                label={t("environments.workspace.look.advanced_styling_field_button_text")}
+                description={t("environments.workspace.look.advanced_styling_field_button_text_description")}
+              />
+              <DimensionInput
+                form={form}
+                name="buttonBorderRadius"
+                label={t("environments.workspace.look.advanced_styling_field_border_radius")}
+                description={t(
+                  "environments.workspace.look.advanced_styling_field_button_border_radius_description"
+                )}
+              />
+              <DimensionInput
+                form={form}
+                name="buttonHeight"
+                label={t("environments.workspace.look.advanced_styling_field_height")}
+                description={t(
+                  "environments.workspace.look.advanced_styling_field_button_height_description"
+                )}
+              />
+              <DimensionInput
+                form={form}
+                name="buttonFontSize"
+                label={t("environments.workspace.look.advanced_styling_field_font_size")}
+                description={t(
+                  "environments.workspace.look.advanced_styling_field_button_font_size_description"
+                )}
+              />
+              <NumberField
+                form={form}
+                name="buttonFontWeight"
+                label={t("environments.workspace.look.advanced_styling_field_font_weight")}
+                description={t(
+                  "environments.workspace.look.advanced_styling_field_button_font_weight_description"
+                )}
+              />
+              <DimensionInput
+                form={form}
+                name="buttonPaddingX"
+                label={t("environments.workspace.look.advanced_styling_field_padding_x")}
+                description={t(
+                  "environments.workspace.look.advanced_styling_field_button_padding_x_description"
+                )}
+              />
+              <DimensionInput
+                form={form}
+                name="buttonPaddingY"
+                label={t("environments.workspace.look.advanced_styling_field_padding_y")}
+                description={t(
+                  "environments.workspace.look.advanced_styling_field_button_padding_y_description"
+                )}
+              />
+            </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")}
+                description={t("environments.workspace.look.advanced_styling_field_option_bg_description")}
+              />
+              <ColorField
+                form={form}
+                name="optionLabelColor.light"
+                label={t("environments.workspace.look.advanced_styling_field_option_label")}
+                description={t("environments.workspace.look.advanced_styling_field_option_label_description")}
+              />
+              <DimensionInput
+                form={form}
+                name="optionBorderRadius"
+                label={t("environments.workspace.look.advanced_styling_field_border_radius")}
+                description={t(
+                  "environments.workspace.look.advanced_styling_field_option_border_radius_description"
+                )}
+              />
+              <DimensionInput
+                form={form}
+                name="optionPaddingX"
+                label={t("environments.workspace.look.advanced_styling_field_padding_x")}
+                description={t(
+                  "environments.workspace.look.advanced_styling_field_option_padding_x_description"
+                )}
+              />
+              <DimensionInput
+                form={form}
+                name="optionPaddingY"
+                label={t("environments.workspace.look.advanced_styling_field_padding_y")}
+                description={t(
+                  "environments.workspace.look.advanced_styling_field_option_padding_y_description"
+                )}
+              />
+              <DimensionInput
+                form={form}
+                name="optionFontSize"
+                label={t("environments.workspace.look.advanced_styling_field_font_size")}
+                description={t(
+                  "environments.workspace.look.advanced_styling_field_option_font_size_description"
+                )}
+              />
+            </div>
+          </StylingSection>
         </div>
       </Collapsible.CollapsibleContent>
     </Collapsible.Root>

apps/web/modules/survey/editor/components/styling-view.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Project } from "@prisma/client";
-import { RotateCcwIcon } from "lucide-react";
+import { RotateCcwIcon, SparklesIcon } from "lucide-react";
 import Link from "next/link";
 import React, { useEffect, useMemo, useState } from "react";
 import { UseFormReturn, useForm } from "react-hook-form";
@@ -9,13 +9,14 @@ import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { TProjectStyling } from "@formbricks/types/project";
 import { TSurvey, TSurveyStyling } from "@formbricks/types/surveys/types";
-import { defaultStyling } from "@/lib/styling/constants";
+import { STYLE_DEFAULTS, getSuggestedColors } from "@/lib/styling/constants";
 import { FormStylingSettings } from "@/modules/survey/editor/components/form-styling-settings";
 import { LogoSettingsCard } from "@/modules/survey/editor/components/logo-settings-card";
 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,
@@ -57,8 +58,22 @@ export const StylingView = ({
 }: StylingViewProps) => {
   const { t } = useTranslation();
 
+  const savedProjectStyling = project.styling as Partial<TProjectStyling> | null;
+
+  // Strip null/undefined values so they don't override STYLE_DEFAULTS.
+  const cleanProject = savedProjectStyling
+    ? Object.fromEntries(Object.entries(savedProjectStyling).filter(([, v]) => v != null))
+    : {};
+  const cleanSurvey = localSurvey.styling
+    ? Object.fromEntries(Object.entries(localSurvey.styling).filter(([, v]) => v != null))
+    : {};
+
   const form = useForm<TSurveyStyling>({
-    defaultValues: { ...defaultStyling, ...project.styling, ...localSurvey.styling },
+    defaultValues: {
+      ...STYLE_DEFAULTS,
+      ...cleanProject,
+      ...cleanSurvey,
+    },
   });
 
   const overwriteThemeStyling = form.watch("overwriteThemeStyling");
@@ -69,6 +84,19 @@ export const StylingView = ({
   const [cardStylingOpen, setCardStylingOpen] = useState(false);
   const [stylingOpen, setStylingOpen] = useState(false);
   const [confirmResetStylingModalOpen, setConfirmResetStylingModalOpen] = useState(false);
+  const [confirmSuggestColorsOpen, setConfirmSuggestColorsOpen] = useState(false);
+
+  const handleSuggestColors = () => {
+    const currentBrandColor = form.getValues().brandColor?.light ?? STYLE_DEFAULTS.brandColor?.light;
+    const suggested = getSuggestedColors(currentBrandColor);
+
+    for (const [key, value] of Object.entries(suggested)) {
+      form.setValue(key as keyof TSurveyStyling, value, { shouldDirty: true });
+    }
+
+    toast.success(t("environments.workspace.look.styling_updated_successfully"));
+    setConfirmSuggestColorsOpen(false);
+  };
 
   const onResetThemeStyling = () => {
     const { allowStyleOverwrite, ...baseStyling } = project.styling ?? {};
@@ -189,6 +217,38 @@ export const StylingView = ({
             </div>
           )}
 
+          {overwriteThemeStyling && (
+            <div className="grid grid-cols-2 items-end gap-4 rounded-lg border border-slate-300 bg-white p-4">
+              <FormField
+                control={form.control}
+                name="brandColor.light"
+                render={({ field }) => (
+                  <FormItem className="space-y-1">
+                    <FormLabel>{t("environments.surveys.edit.brand_color")}</FormLabel>
+                    <FormDescription>
+                      {t("environments.surveys.edit.brand_color_description")}
+                    </FormDescription>
+                    <FormControl>
+                      <ColorPicker
+                        color={field.value ?? STYLE_DEFAULTS.brandColor?.light}
+                        onChange={(color) => field.onChange(color)}
+                        containerClass="w-full"
+                      />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+              <Button
+                type="button"
+                variant="secondary"
+                className="h-10 w-full justify-center gap-2"
+                onClick={() => setConfirmSuggestColorsOpen(true)}>
+                <SparklesIcon className="mr-2 h-4 w-4" />
+                {t("environments.workspace.look.suggest_colors")}
+              </Button>
+            </div>
+          )}
+
           <FormStylingSettings
             open={formStylingOpen}
             setOpen={setFormStylingOpen}
@@ -263,6 +323,17 @@ export const StylingView = ({
             onDecline={() => setConfirmResetStylingModalOpen(false)}
             onConfirm={onResetThemeStyling}
           />
+
+          <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)}
+          />
         </div>
       </form>
     </FormProvider>

apps/web/modules/ui/components/card-arrangement-tabs/index.tsx

@@ -47,9 +47,9 @@ export const CardArrangementTabs = ({
         }}
         options={[
           {
-            value: "casual",
-            label: t("environments.surveys.edit.casual"),
-            icon: getCardArrangementIcon("casual"),
+            value: "simple",
+            label: t("environments.surveys.edit.simple"),
+            icon: getCardArrangementIcon("simple"),
           },
           {
             value: "straight",
@@ -57,9 +57,9 @@ export const CardArrangementTabs = ({
             icon: getCardArrangementIcon("straight"),
           },
           {
-            value: "simple",
-            label: t("environments.surveys.edit.simple"),
-            icon: getCardArrangementIcon("simple"),
+            value: "casual",
+            label: t("environments.surveys.edit.casual"),
+            icon: getCardArrangementIcon("casual"),
           },
         ]}
         defaultSelected={activeCardArrangement}

apps/web/modules/ui/components/card-styling-settings/index.tsx

@@ -9,11 +9,11 @@ import { useTranslation } from "react-i18next";
 import { TProjectStyling } from "@formbricks/types/project";
 import { TSurveyStyling, TSurveyType } from "@formbricks/types/surveys/types";
 import { cn } from "@/lib/cn";
-import { COLOR_DEFAULTS } from "@/lib/styling/constants";
+import { STYLE_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}
@@ -81,51 +82,28 @@ 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")}
+            description={t("environments.surveys.edit.roundness_description")}
+          />
 
           <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>{t("environments.surveys.edit.card_background_color")}</FormLabel>
+                <FormDescription>
+                  {t("environments.surveys.edit.card_background_color_description")}
+                </FormDescription>
 
                 <FormControl>
                   <ColorPicker
-                    color={field.value || COLOR_DEFAULTS.cardBackgroundColor}
+                    color={field.value || STYLE_DEFAULTS.cardBackgroundColor?.light || "#ffffff"}
                     onChange={(color) => field.onChange(color)}
                     containerClass="max-w-xs"
                   />
@@ -138,17 +116,15 @@ 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>{t("environments.surveys.edit.card_border_color")}</FormLabel>
+                <FormDescription>
+                  {t("environments.surveys.edit.card_border_color_description")}
+                </FormDescription>
 
                 <FormControl>
                   <ColorPicker
-                    color={field.value || COLOR_DEFAULTS.cardBorderColor}
+                    color={field.value || STYLE_DEFAULTS.cardBorderColor?.light || "#f8fafc"}
                     onChange={(color) => field.onChange(color)}
                     containerClass="max-w-xs"
                   />
@@ -157,66 +133,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">
@@ -237,7 +153,7 @@ export const CardStylingSettings = ({
                               }
 
                               field.onChange({
-                                light: COLOR_DEFAULTS.highlightBorderColor,
+                                light: STYLE_DEFAULTS.highlightBorderColor?.light,
                               });
                             }}
                           />
@@ -245,16 +161,13 @@ 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>
 
                       {!!field.value && (
                         <FormControl>
                           <ColorPicker
-                            color={field.value?.light ?? COLOR_DEFAULTS.highlightBorderColor}
+                            color={field.value?.light ?? STYLE_DEFAULTS.highlightBorderColor?.light}
                             onChange={(color: string) =>
                               field.onChange({
                                 ...field.value,
@@ -271,6 +184,93 @@ 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")}
+                  description={t("environments.workspace.look.advanced_styling_field_track_bg_description")}
+                />
+                <ColorField
+                  form={form}
+                  name="progressIndicatorBgColor.light"
+                  label={t("environments.workspace.look.advanced_styling_field_indicator_bg")}
+                  description={t(
+                    "environments.workspace.look.advanced_styling_field_indicator_bg_description"
+                  )}
+                />
+                <DimensionInput
+                  form={form}
+                  name="progressTrackHeight"
+                  label={t("environments.workspace.look.advanced_styling_field_track_height")}
+                  description={t(
+                    "environments.workspace.look.advanced_styling_field_track_height_description"
+                  )}
+                />
+              </div>
+            )}
+          </div>
         </div>
       </Collapsible.CollapsibleContent>
     </Collapsible.Root>

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"

apps/web/modules/ui/components/media-background/index.tsx

@@ -176,7 +176,7 @@ export const MediaBackground: React.FC<MediaBackgroundProps> = ({
     );
   } else if (isEditorView) {
     return (
-      <div ref={ContentRef} className="overflow-hiddem flex flex-grow flex-col rounded-b-lg">
+      <div ref={ContentRef} className="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">
           {renderBackground()}
           <div className="flex h-full w-full items-center justify-center">{children}</div>

apps/web/modules/ui/components/preview-survey/components/modal.tsx

@@ -12,7 +12,7 @@ interface ModalProps {
   previewMode: string;
   clickOutsideClose: boolean;
   overlay: TOverlay;
-  borderRadius?: number;
+  borderRadius?: number | string;
   background?: string;
 }
 
@@ -137,8 +137,8 @@ export const Modal = ({
         ref={modalRef}
         style={{
           ...scalingClasses,
-          ...(borderRadius && {
-            borderRadius: `${borderRadius}px`,
+          ...(borderRadius !== undefined && {
+            borderRadius: typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
           }),
           ...(background && {
             background,

apps/web/modules/ui/components/styling-fields/components/color-field.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { ColorPicker } from "@/modules/ui/components/color-picker";
+import { FormControl, FormDescription, FormField, FormItem, FormLabel } from "@/modules/ui/components/form";
+
+interface ColorFieldProps {
+  form: any;
+  name: string;
+  label: string;
+  description?: string;
+  containerClass?: string;
+}
+
+export const ColorField = ({ form, name, label, description, containerClass }: ColorFieldProps) => (
+  <FormField
+    control={form.control}
+    name={name}
+    render={({ field }) => (
+      <FormItem className="space-y-1">
+        <FormLabel>{label}</FormLabel>
+        {description && <FormDescription>{description}</FormDescription>}
+        <FormControl>
+          <ColorPicker
+            color={field.value ?? ""}
+            onChange={(color) => field.onChange(color)}
+            containerClass={containerClass || "w-full"}
+          />
+        </FormControl>
+      </FormItem>
+    )}
+  />
+);

apps/web/modules/ui/components/styling-fields/components/dimension-input.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { FormControl, FormDescription, FormField, FormItem, FormLabel } from "@/modules/ui/components/form";
+import { Input } from "@/modules/ui/components/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/modules/ui/components/select";
+
+interface DimensionInputProps {
+  form: any;
+  name: string;
+  label: string;
+  placeholder?: string;
+  description?: string;
+}
+
+const UNITS = ["px", "%", "rem", "em"] as const;
+
+export const DimensionInput = ({ form, name, label, description, placeholder }: DimensionInputProps) => (
+  <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>{label}</FormLabel>
+          {description && <FormDescription>{description}</FormDescription>}
+          <FormControl>
+            <div className="focus-within:border-brand-dark flex h-10 rounded-md border border-slate-300 focus-within:ring-2 focus-within:ring-slate-400 focus-within:ring-offset-2">
+              <Input
+                type="number"
+                {...field}
+                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}`);
+                }}
+                placeholder={placeholder}
+                className="flex-1 rounded-r-none border-0 shadow-none focus:ring-0 focus:ring-offset-0"
+              />
+              <Select
+                value={unit}
+                onValueChange={(newUnit) => {
+                  const currentVal = numericValue ?? 0;
+                  if (newUnit === "px") {
+                    field.onChange(currentVal);
+                  } else {
+                    field.onChange(`${currentVal}${newUnit}`);
+                  }
+                }}>
+                <SelectTrigger className="h-full w-[70px] rounded-l-none border-0 border-l border-slate-300 text-sm font-medium shadow-none focus:ring-0 focus:ring-offset-0">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {UNITS.map((u) => (
+                    <SelectItem key={u} value={u} className="text-sm">
+                      {u}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </FormControl>
+        </FormItem>
+      );
+    }}
+  />
+);

apps/web/modules/ui/components/styling-fields/components/number-field.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { FormControl, FormDescription, FormField, FormItem, FormLabel } from "@/modules/ui/components/form";
+import { Input } from "@/modules/ui/components/input";
+
+interface NumberFieldProps {
+  form: any;
+  name: string;
+  label: string;
+  description?: string;
+  step?: number;
+  max?: number;
+  placeholder?: string;
+}
+
+export const NumberField = ({
+  form,
+  name,
+  label,
+  description,
+  placeholder,
+  step = 1,
+  max,
+}: NumberFieldProps) => (
+  <FormField
+    control={form.control}
+    name={name}
+    render={({ field }) => (
+      <FormItem className="space-y-1">
+        <FormLabel>{label}</FormLabel>
+        {description && <FormDescription>{description}</FormDescription>}
+        <FormControl>
+          <Input
+            type="number"
+            {...field}
+            onChange={(e) => {
+              const val = e.target.valueAsNumber;
+              field.onChange(Number.isNaN(val) ? null : val);
+            }}
+            step={step}
+            max={max}
+            placeholder={placeholder}
+          />
+        </FormControl>
+      </FormItem>
+    )}
+  />
+);

apps/web/modules/ui/components/styling-fields/components/text-field.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { FormControl, FormDescription, FormField, FormItem, FormLabel } from "@/modules/ui/components/form";
+import { Input } from "@/modules/ui/components/input";
+
+interface TextFieldProps {
+  form: any;
+  name: string;
+  label: string;
+  description?: string;
+}
+
+export const TextField = ({ form, name, label, description }: TextFieldProps) => (
+  <FormField
+    control={form.control}
+    name={name}
+    render={({ field }) => (
+      <FormItem className="space-y-1">
+        <FormLabel>{label}</FormLabel>
+        {description && <FormDescription>{description}</FormDescription>}
+        <FormControl>
+          <Input type="text" {...field} />
+        </FormControl>
+      </FormItem>
+    )}
+  />
+);

apps/web/modules/ui/components/styling-fields/index.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useAutoAnimate } from "@formkit/auto-animate/react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import React from "react";
+
+export { ColorField } from "./components/color-field";
+export { DimensionInput } from "./components/dimension-input";
+export { NumberField } from "./components/number-field";
+export { TextField } from "./components/text-field";
+
+interface StylingSectionProps {
+  title: string;
+  open: boolean;
+  setOpen: (o: boolean) => void;
+  children: React.ReactNode;
+}
+
+export const StylingSection = ({ title, open, setOpen, children }: StylingSectionProps) => {
+  const [parent] = useAutoAnimate();
+
+  return (
+    <div ref={parent} className={`rounded-md border ${open ? "overflow-visible" : "overflow-hidden"}`}>
+      <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>
+  );
+};

apps/web/modules/ui/components/theme-styling-preview-survey/index.tsx

@@ -2,9 +2,10 @@
 
 import { Project } from "@prisma/client";
 import { Variants, motion } from "framer-motion";
-import { Fragment, useRef, useState } from "react";
+import { Fragment, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { TSurvey, TSurveyType } from "@formbricks/types/surveys/types";
+import { cn } from "@/lib/cn";
 import { ClientLogo } from "@/modules/ui/components/client-logo";
 import { MediaBackground } from "@/modules/ui/components/media-background";
 import { Modal } from "@/modules/ui/components/preview-survey/components/modal";
@@ -59,6 +60,7 @@ export const ThemeStylingPreviewSurvey = ({
   const [shrink] = useState(false);
   const { t } = useTranslation();
   const { projectOverwrites } = survey || {};
+  const isAppSurvey = previewType === "app"; // Moved up
 
   const previewScreenVariants: Variants = {
     expanded: {
@@ -89,9 +91,8 @@ export const ThemeStylingPreviewSurvey = ({
       },
     },
     shrink: {
-      display: "relative",
       width: ["83.33%"],
-      height: ["95%"],
+      height: ["660px"],
     },
   };
 
@@ -110,7 +111,12 @@ export const ThemeStylingPreviewSurvey = ({
     setSurveyFormKey(Date.now());
   };
 
-  const isAppSurvey = previewType === "app";
+  const styling = useMemo(() => {
+    if (survey.styling?.overwriteThemeStyling) {
+      return { ...project.styling, ...survey.styling };
+    }
+    return project.styling;
+  }, [project.styling, survey.styling]);
 
   // Create a unique key that includes both timestamp and preview type
   // This ensures the survey remounts when switching between app and link
@@ -140,23 +146,26 @@ 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">
-            <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>
-              <div className="h-3 w-3 rounded-full bg-emerald-500"></div>
-            </div>
-            <div className="ml-4 flex w-full justify-between font-mono text-sm text-slate-400">
-              <p>{isAppSurvey ? "Your web app" : "Preview"}</p>
+        className={cn(
+          "relative z-10 flex w-5/6 flex-col rounded-lg border border-slate-300 shadow-xl",
+          "h-[660px] max-h-[95%]",
+          isAppSurvey ? "bg-slate-200" : "overflow-y-auto bg-white"
+        )}>
+        <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>
+            <div className="h-3 w-3 rounded-full bg-emerald-500"></div>
+          </div>
+          <div className="ml-4 flex w-full justify-between font-mono text-sm text-slate-400">
+            <p>{isAppSurvey ? "Your web app" : "Preview"}</p>
 
-              <div className="flex items-center">
-                <ResetProgressButton onClick={resetQuestionProgress} />
-              </div>
+            <div className="flex items-center">
+              <ResetProgressButton onClick={resetQuestionProgress} />
             </div>
           </div>
-
+        </div>
+        <div className="flex w-full flex-1 flex-col rounded-b-lg">
           {isAppSurvey ? (
             <Modal
               isOpen
@@ -174,7 +183,7 @@ export const ThemeStylingPreviewSurvey = ({
                   isBrandingEnabled={project.inAppSurveyBranding}
                   isRedirectDisabled={true}
                   onFileUpload={async (file) => file.name}
-                  styling={project.styling}
+                  styling={styling}
                   isCardBorderVisible={!highlightBorderColor}
                   languageCode="default"
                 />
@@ -183,7 +192,7 @@ export const ThemeStylingPreviewSurvey = ({
           ) : (
             <MediaBackground
               surveyType={survey.type}
-              styling={project.styling}
+              styling={styling}
               ContentRef={ContentRef as React.MutableRefObject<HTMLDivElement> | null}
               isEditorView>
               {!project.styling?.isLogoHidden && (
@@ -193,7 +202,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}
@@ -202,7 +211,7 @@ export const ThemeStylingPreviewSurvey = ({
                   isRedirectDisabled={true}
                   onFileUpload={async (file) => file.name}
                   responseCount={42}
-                  styling={project.styling}
+                  styling={styling}
                   languageCode="default"
                 />
               </div>

apps/web/playwright/survey-styling.spec.ts

@@ -0,0 +1,375 @@
+import { expect } from "@playwright/test";
+import { test } from "./lib/fixtures";
+
+test.describe("Survey Styling", async () => {
+  // Shared Helpers
+  const openAccordion = async (page: any, name: string) => {
+    // Find the trigger by text, ensuring we get the visible one (important for nested or reusable components)
+    const accordionHeader = page
+      .locator("div,button")
+      .filter({ hasText: name })
+      .locator("visible=true")
+      .last();
+    // Check if open (aria-expanded or data-state)
+    const expanded = await accordionHeader.getAttribute("aria-expanded");
+    const state = await accordionHeader.getAttribute("data-state");
+    if (expanded === "false" || state === "closed" || (!expanded && !state)) {
+      await accordionHeader.click();
+      await page.waitForTimeout(500); // Animation
+    }
+  };
+
+  const setColor = async (page: any, label: string, hex: string) => {
+    const labelEl = page.locator("label").filter({ hasText: label }).locator("visible=true").last();
+    const container = labelEl.locator("..");
+    await container.getByRole("textbox").fill(hex.replace("#", ""));
+    await container.getByRole("textbox").blur();
+  };
+
+  const setDimension = async (page: any, label: string, value: string) => {
+    const labelEl = page.locator("label").filter({ hasText: label }).locator("visible=true").last();
+    const container = labelEl.locator("..");
+    // Try finding number input, fallback to simple fill if it's text
+    const input = container.locator('input[type="number"], input[type="text"]').first();
+    await input.fill(value);
+    await input.blur();
+  };
+
+  test("Global Theme Styling (Workspace Level)", async ({ page, users }) => {
+    const user = await users.create();
+    await user.login();
+
+    // Navigate to Look & Feel settings
+    await page.getByRole("link", { name: "Configuration" }).click();
+    await page.getByRole("link", { name: "Look & Feel" }).click();
+    await page.waitForURL(/\/environments\/[^/]+\/workspace\/look/);
+
+    // Toggle "Enable custom styling"
+    const addCustomStyles = page.getByLabel("Enable custom styling");
+    if (!(await addCustomStyles.isChecked())) {
+      await addCustomStyles.click();
+    }
+
+    // --- Form styling ---
+    await openAccordion(page, "Form styling");
+
+    // 1. Headlines & Descriptions
+    await openAccordion(page, "Headlines & Descriptions");
+    await setColor(page, "Headline Color", "aa0000"); // Red-ish
+    await setColor(page, "Description Color", "00aa00"); // Green-ish
+    await setDimension(page, "Headline Font Size", "24");
+    await setDimension(page, "Description Font Size", "18");
+    await setDimension(page, "Headline Font Weight", "700");
+    await setColor(page, "Headline Label Color", "0000aa"); // Blue-ish
+    await setDimension(page, "Headline Label Font Size", "14");
+    await setDimension(page, "Headline Label Font Weight", "600");
+
+    // Verify Typography Variables
+    await page.waitForTimeout(1000);
+    let css = await page.evaluate(() => document.getElementById("formbricks__css__custom")?.innerHTML);
+    expect(css).toContain("--fb-element-headline-color: #aa0000");
+    expect(css).toContain("--fb-element-description-color: #00aa00");
+    expect(css).toContain("--fb-element-headline-font-size: 24px");
+    expect(css).toContain("--fb-element-description-font-size: 18px");
+    expect(css).toContain("--fb-element-headline-font-weight: 700");
+    expect(css).toContain("--fb-element-upper-label-color: #0000aa");
+    expect(css).toContain("--fb-element-upper-label-font-size: 14px");
+    expect(css).toContain("--fb-element-upper-label-font-weight: 600");
+
+    // 2. Inputs
+    await openAccordion(page, "Inputs");
+    await setColor(page, "Input color", "eeeeee");
+    await setColor(page, "Input border color", "cccccc");
+    await setColor(page, "Input Text", "024eff");
+    await setDimension(page, "Border Radius", "5");
+    await setDimension(page, "Height", "50");
+    await setDimension(page, "Font Size", "16");
+    await setDimension(page, "Padding X", "20");
+    await setDimension(page, "Padding Y", "10");
+    await setDimension(page, "Placeholder Opacity", "0.8");
+    // Shadow is a text input – use setDimension helper (label→parent→input)
+    // because getByLabel relies on for/id linkage which FormLabel doesn't guarantee
+    await setDimension(page, "Shadow", "0 4px 6px -1px rgba(0, 0, 0, 0.1)");
+
+    await page.waitForTimeout(1000);
+    css = await page.evaluate(() => document.getElementById("formbricks__css__custom")?.innerHTML);
+    expect(css).toContain("--fb-input-background-color: #eeeeee");
+    expect(css).toContain("--fb-input-border-color: #cccccc");
+    expect(css).toContain("--fb-input-text-color: #024eff");
+    expect(css).toContain("--fb-input-border-radius: 5px");
+    expect(css).toContain("--fb-input-height: 50px");
+    expect(css).toContain("--fb-input-font-size: 16px");
+    expect(css).toContain("--fb-input-padding-x: 20px");
+    expect(css).toContain("--fb-input-padding-y: 10px");
+    expect(css).toContain("--fb-input-placeholder-opacity: 0.8");
+    expect(css).toContain("--fb-input-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1)");
+
+    // 3. Buttons
+    await openAccordion(page, "Buttons");
+    await setColor(page, "Button Background", "ff00ff");
+    await setColor(page, "Button Text", "ffffff");
+    await setDimension(page, "Border Radius", "12");
+    await setDimension(page, "Height", "48");
+    await setDimension(page, "Font Size", "18");
+    await setDimension(page, "Font Weight", "600");
+    await setDimension(page, "Padding X", "24");
+    await setDimension(page, "Padding Y", "12");
+
+    await page.waitForTimeout(1000);
+    // Partial verification for Buttons to ensure state is good before moving to Options
+    css = await page.evaluate(() => document.getElementById("formbricks__css__custom")?.innerHTML);
+    expect(css).toContain("--fb-button-bg-color: #ff00ff");
+    expect(css).toContain("--fb-button-text-color: #ffffff");
+    expect(css).toContain("--fb-button-border-radius: 12px");
+    expect(css).toContain("--fb-button-height: 48px");
+    expect(css).toContain("--fb-button-font-size: 18px");
+    expect(css).toContain("--fb-button-font-weight: 600");
+    expect(css).toContain("--fb-button-padding-x: 24px");
+    expect(css).toContain("--fb-button-padding-y: 12px");
+
+    // 4. Options (Radio/Checkbox)
+    await openAccordion(page, "Options (Radio/Checkbox)");
+    await setColor(page, "Background", "dddddd");
+    await setColor(page, "Label Color", "111111");
+    // Note: Border Radius is reused, but we can set it here to be sure
+    await setDimension(page, "Border Radius", "6");
+    await setDimension(page, "Padding X", "12");
+    await setDimension(page, "Padding Y", "8");
+    await setDimension(page, "Font Size", "15");
+
+    await page.waitForTimeout(1000);
+    css = await page.evaluate(() => document.getElementById("formbricks__css__custom")?.innerHTML);
+    expect(css).toContain("--fb-option-bg-color: #dddddd");
+    expect(css).toContain("--fb-option-label-color: #111111");
+    expect(css).toContain("--fb-option-border-radius: 6px");
+    expect(css).toContain("--fb-option-padding-x: 12px");
+    expect(css).toContain("--fb-option-padding-y: 8px");
+    expect(css).toContain("--fb-option-font-size: 15px");
+
+    // --- Card styling ---
+    await openAccordion(page, "Card styling");
+    // Toggle progress bar off/on to ensure visibility
+    const hideProgressSwitch = page.locator("#hideProgressBar");
+    if ((await hideProgressSwitch.getAttribute("aria-checked")) === "true") {
+      await hideProgressSwitch.click();
+    }
+    await setDimension(page, "Track Height", "15");
+    await setDimension(page, "Roundness", "20");
+
+    await page.waitForTimeout(1000);
+    css = await page.evaluate(() => document.getElementById("formbricks__css__custom")?.innerHTML);
+    expect(css).toContain("--fb-progress-track-height: 15px");
+    expect(css).toContain("--fb-progress-track-border-radius: 20px");
+  });
+
+  test("Suggest Colors derives all colors from brand color without changing non-color properties", async ({
+    page,
+    users,
+  }) => {
+    const user = await users.create();
+    await user.login();
+
+    // Navigate to Look & Feel settings
+    await page.getByRole("link", { name: "Configuration" }).click();
+    await page.getByRole("link", { name: "Look & Feel" }).click();
+    await page.waitForURL(/\/environments\/[^/]+\/workspace\/look/);
+
+    // Toggle "Enable custom styling"
+    const addCustomStyles = page.getByLabel("Enable custom styling");
+    if (!(await addCustomStyles.isChecked())) {
+      await addCustomStyles.click();
+    }
+
+    // Set some non-color properties BEFORE suggesting colors, so we can verify they aren't overwritten
+    await openAccordion(page, "Form styling");
+    await openAccordion(page, "Inputs");
+    await setDimension(page, "Border Radius", "12");
+    await setDimension(page, "Padding Y", "20");
+
+    await openAccordion(page, "Options (Radio/Checkbox)");
+    await setDimension(page, "Border Radius", "10");
+    await setDimension(page, "Padding Y", "14");
+
+    await page.waitForTimeout(1000);
+
+    // Verify non-color CSS vars are set before suggesting
+    let cssBefore = await page.evaluate(() => document.getElementById("formbricks__css__custom")?.innerHTML);
+    expect(cssBefore).toContain("--fb-input-border-radius: 12px");
+    expect(cssBefore).toContain("--fb-input-padding-y: 20px");
+    expect(cssBefore).toContain("--fb-option-border-radius: 10px");
+    expect(cssBefore).toContain("--fb-option-padding-y: 14px");
+
+    // Set a distinctive brand color (rose-600)
+    await setColor(page, "Brand color", "e11d48");
+    await page.waitForTimeout(500);
+
+    // Click "Suggest colors" button
+    await page.getByRole("button", { name: "Suggest colors" }).click();
+
+    // Confirm the dialog
+    await page.getByRole("button", { name: "Generate" }).click();
+
+    // Wait for the preview to update with derived colors
+    await page.waitForTimeout(1500);
+
+    const css = await page.evaluate(() => document.getElementById("formbricks__css__custom")?.innerHTML);
+    expect(css).toBeDefined();
+
+    // --- Verify colors ARE derived from brand (not hardcoded) ---
+
+    // Brand color itself should be present
+    expect(css).toContain("--fb-brand-color: #e11d48");
+
+    // Input background should be brand-tinted, NOT hardcoded #ffffff
+    expect(css).toContain("--fb-input-background-color:");
+    expect(css).not.toContain("--fb-input-background-color: #ffffff");
+
+    // Card/survey background should be brand-tinted, NOT hardcoded #ffffff
+    expect(css).toContain("--fb-survey-background-color:");
+    expect(css).not.toContain("--fb-survey-background-color: #ffffff");
+
+    // Question/heading color should be derived, NOT the old hardcoded #2b2524
+    expect(css).toContain("--fb-heading-color:");
+    expect(css).not.toContain("--fb-heading-color: #2b2524");
+
+    // Input text color should be derived, NOT hardcoded #0f172a
+    expect(css).toContain("--fb-input-text-color:");
+    expect(css).not.toContain("--fb-input-text-color: #0f172a");
+
+    // Option label color should be derived, NOT hardcoded #0f172a
+    expect(css).toContain("--fb-option-label-color:");
+    expect(css).not.toContain("--fb-option-label-color: #0f172a");
+
+    // Option background should be brand-tinted (same as input bg)
+    expect(css).toContain("--fb-option-bg-color:");
+    expect(css).not.toContain("--fb-option-bg-color: #ffffff");
+
+    // --- Verify non-color properties were NOT changed ---
+    expect(css).toContain("--fb-input-border-radius: 12px");
+    expect(css).toContain("--fb-input-padding-y: 20px");
+    expect(css).toContain("--fb-option-border-radius: 10px");
+    expect(css).toContain("--fb-option-padding-y: 14px");
+  });
+
+  test("Initial load derives button, progress, input, and option colors from brand color", async ({
+    page,
+    users,
+  }) => {
+    const user = await users.create();
+    await user.login();
+
+    // Navigate to Look & Feel settings
+    await page.getByRole("link", { name: "Configuration" }).click();
+    await page.getByRole("link", { name: "Look & Feel" }).click();
+    await page.waitForURL(/\/environments\/[^/]+\/workspace\/look/);
+
+    // Toggle "Enable custom styling"
+    const addCustomStyles = page.getByLabel("Enable custom styling");
+    if (!(await addCustomStyles.isChecked())) {
+      await addCustomStyles.click();
+    }
+
+    // Wait for the preview to render with default styling
+    await page.waitForTimeout(1500);
+
+    const css = await page.evaluate(() => document.getElementById("formbricks__css__custom")?.innerHTML);
+    expect(css).toBeDefined();
+
+    // On initial load (no saved styling), button and progress bar should derive from brand color (#64748b)
+    // NOT from the old hardcoded dark navy (#0f172a)
+    expect(css).not.toContain("--fb-button-bg-color: #0f172a");
+    expect(css).not.toContain("--fb-progress-indicator-bg-color: #0f172a");
+
+    // Input text and option label CSS variables are only emitted when
+    // the user explicitly sets them, so on initial load they should NOT
+    // be present at all (the CSS-variable fallback from globals.css applies).
+    // Verify they are not set to the old hardcoded dark navy value.
+    expect(css).not.toContain("--fb-input-text-color: #0f172a");
+    expect(css).not.toContain("--fb-option-label-color: #0f172a");
+
+    // Option background should be brand-tinted, not plain white
+    expect(css).toContain("--fb-option-bg-color:");
+
+    // Headline color should be brand-derived
+    expect(css).toContain("--fb-element-headline-color:");
+  });
+
+  test("Survey Specific Styling (Survey Editor Override)", async ({ page, users }) => {
+    const user = await users.create();
+    await user.login();
+    await page.waitForURL(/\/environments\/[^/]+\/surveys/);
+
+    // Create a new survey
+    await page.getByText("Start from scratch").click();
+    await page.getByRole("button", { name: "Create survey", exact: true }).click();
+    await page.waitForURL(/\/environments\/[^/]+\/surveys\/[^/]+\/edit$/);
+
+    // Ensure Welcome Card is active so we can see it
+    await page.locator("p", { hasText: "Welcome card" }).first().click({ force: true });
+    await page.waitForTimeout(1000);
+
+    // Check toggle state for Welcome Card
+    const welcomeToggle = page.locator("#welcome-toggle");
+    if ((await welcomeToggle.getAttribute("data-state")) === "unchecked") {
+      await welcomeToggle.click();
+    }
+
+    // Set Headline Text so we can verify it
+    // The selector needs to be robust.
+    // We try looking for the input labeled "Note" or aria-labelledby="headline"
+    const headlineInput = page.locator('[aria-labelledby="headline"]').first();
+    await expect(headlineInput).toBeVisible();
+    await headlineInput.fill("My Custom Headline");
+    await headlineInput.blur(); // Trigger save
+    await expect(headlineInput).toHaveText("My Custom Headline");
+
+    // Navigate to Styling tab
+    await page.getByRole("button", { name: "Styling" }).click();
+
+    // Toggle "Enable custom styling" (Survey override)
+    // Note: The label text might be "Add custom styles" in survey editor?
+    // Checking previous file: `page.getByLabel("Add custom styles")`
+    const addCustomStyles = page
+      .locator("label")
+      .filter({ hasText: /custom styling|custom styles/i })
+      .first();
+    const toggleInput = page.locator(`button#${await addCustomStyles.getAttribute("for")}`);
+    // If we can't find by ID, try clicking the label or simple check
+    if (!(await toggleInput.isChecked())) {
+      await addCustomStyles.click();
+    }
+
+    // Apply Overrides
+    await openAccordion(page, "Form styling");
+    await openAccordion(page, "Headlines & Descriptions");
+
+    // Override Headline Color (Blue)
+    await setColor(page, "Headline Color", "0000ff");
+    await setDimension(page, "Headline Font Size", "30");
+
+    // Wait for Preview Update
+    await page.waitForTimeout(2000);
+
+    // Click Restart to be sure we are on welcome card
+    await page.getByRole("button", { name: "Restart" }).click();
+    await page.waitForTimeout(1000);
+
+    // Check Preview Computed Styles
+    const headlinePreview = page.locator("#fbjs .label-headline").first();
+    await expect(headlinePreview).toBeVisible();
+    await expect(headlinePreview).toHaveText("My Custom Headline");
+
+    // Verify color override applied (computed style)
+    await expect(headlinePreview).toHaveCSS("color", "rgb(0, 0, 255)"); // Blue
+
+    // Verify font-size override via CSS variable.
+    // The computed style can't be checked directly because Tailwind's `text-base`
+    // utility is imported with `important` (CSS layer), which outranks the
+    // unlayered `!important` from addCustomThemeToDom.  The variable IS set
+    // correctly though, proving the form → preview pipeline works.
+    const editorCss = await page.evaluate(
+      () => document.getElementById("formbricks__css__custom")?.innerHTML
+    );
+    expect(editorCss).toContain("--fb-element-headline-font-size: 30px");
+  });
+});

packages/survey-ui/src/components/elements/multi-select.tsx

@@ -318,8 +318,7 @@ function ListVariant({
                     aria-invalid={Boolean(errorMessage)}
                   />
                   <span
-                    className={cn("mx-3", optionLabelClassName)}
-                    style={{ fontSize: "var(--fb-option-font-size)" }}>
+                    className={cn("mx-3", optionLabelClassName)}>
                     {option.label}
                   </span>
                 </span>
@@ -350,8 +349,7 @@ function ListVariant({
                   aria-invalid={Boolean(errorMessage)}
                 />
                 <span
-                  className={cn("mx-3 grow", optionLabelClassName)}
-                  style={{ fontSize: "var(--fb-option-font-size)" }}>
+                  className={cn("mx-3 grow", optionLabelClassName)}>
                   {otherOptionLabel}
                 </span>
               </span>
@@ -399,8 +397,7 @@ function ListVariant({
                     aria-invalid={Boolean(errorMessage)}
                   />
                   <span
-                    className={cn("mx-3", optionLabelClassName)}
-                    style={{ fontSize: "var(--fb-option-font-size)" }}>
+                    className={cn("mx-3", optionLabelClassName)}>
                     {option.label}
                   </span>
                 </span>

packages/survey-ui/src/components/elements/single-select.tsx

@@ -129,7 +129,7 @@ function SingleSelect({
     );
 
   // Shared className for option labels
-  const optionLabelClassName = "font-option  font-option-weight text-option-label";
+  const optionLabelClassName = "font-option text-option font-option-weight text-option-label";
 
   // Get selected option label for dropdown display
   const selectedOption = options.find((opt) => opt.id === selectedValue);
@@ -260,8 +260,7 @@ function SingleSelect({
                           aria-required={required}
                         />
                         <span
-                          className={cn("mx-3 grow", optionLabelClassName)}
-                          style={{ fontSize: "var(--fb-option-font-size)" }}>
+                          className={cn("mx-3 grow", optionLabelClassName)}>
                           {option.label}
                         </span>
                       </span>
@@ -281,8 +280,7 @@ function SingleSelect({
                       aria-required={required}
                     />
                     <span
-                      className={cn("ml-3 mr-3 grow", optionLabelClassName)}
-                      style={{ fontSize: "var(--fb-option-font-size)" }}>
+                      className={cn("mr-3 ml-3 grow", optionLabelClassName)}>
                       {otherOptionLabel}
                     </span>
                   </span>
@@ -321,8 +319,7 @@ function SingleSelect({
                           aria-required={required}
                         />
                         <span
-                          className={cn("mx-3 grow", optionLabelClassName)}
-                          style={{ fontSize: "var(--fb-option-font-size)" }}>
+                          className={cn("mx-3 grow", optionLabelClassName)}>
                           {option.label}
                         </span>
                       </span>

packages/survey-ui/src/components/general/element-header.tsx

@@ -75,18 +75,14 @@ function ElementHeader({
 
       {/* Headline */}
       <div>
-        <div>
-          {required ? (
-            <span className="label-headline mb-[3px] text-xs opacity-60">{requiredLabel}</span>
-          ) : null}
-        </div>
+        <div>{required ? <span className="label-upper mb-[3px]">{requiredLabel}</span> : null}</div>
         <div className="flex">
           {isHeadlineHtml && safeHeadlineHtml ? (
             <Label htmlFor={htmlFor} variant="headline">
               {headline}
             </Label>
           ) : (
-            <Label htmlFor={htmlFor} variant="headline" className="font-semibold">
+            <Label htmlFor={htmlFor} variant="headline">
               {headline}
             </Label>
           )}

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 outline-none transition-[color,box-shadow]",
           // 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",

packages/survey-ui/src/components/general/progress.stories.tsx

@@ -126,7 +126,7 @@ export const CustomStyles: Story = {
       control: "color",
       table: {
         category: "Progress Styling",
-        defaultValue: { summary: "hsl(222.2 47.4% 11.2% / 0.2)" },
+        defaultValue: { summary: "brand color at 20% opacity" },
       },
     },
     trackBorderRadius: {
@@ -140,7 +140,7 @@ export const CustomStyles: Story = {
       control: "color",
       table: {
         category: "Progress Styling",
-        defaultValue: { summary: "hsl(222.2 47.4% 11.2%)" },
+        defaultValue: { summary: "brand color (#64748b)" },
       },
     },
     indicatorBorderRadius: {

packages/survey-ui/src/styles/globals.css

@@ -51,74 +51,82 @@
   --slate-50: rgb(248, 250, 252);
   --slate-100: rgb(241 245 249);
   --slate-200: rgb(226 232 240);
+  --slate-700: rgb(51 65 85);
+  --slate-900: rgb(15 23 42);
 
   /* ---------------------------------------------------------------------------
-     Survey general Colors
-     The primary accent color used throughout the survey. Override this to 
-     customize the brand appearance.
+     Theming Tokens (--fb-*)
+
+     Color values MUST match the output of getSuggestedColors("#64748b") in
+     apps/web/lib/styling/constants.ts.  Non-color values MUST match
+     STYLE_DEFAULTS in the same file.
+
+     At runtime styles.ts always overrides these from the JS object, but the
+     CSS values below act as the initial / fallback state so the survey looks
+     correct before JS executes.
+
+     Derived colour palette for brand #64748b:
+       questionColor  = #414b5a   (brand mixed with black @ 0.35)
+       inputBg        = #f3f4f6   (brand mixed with white @ 0.92)
+       inputBorder    = #c1c7d1   (brand mixed with white @ 0.60)
+       cardBg         = #fafbfc   (brand mixed with white @ 0.97)
+       cardBorder     = #e0e3e8   (brand mixed with white @ 0.80)
+       progressTrack  = #d9dbde   (questionColor mixed with white @ 0.80)
      --------------------------------------------------------------------------- */
+
+  /* ── Brand ─────────────────────────────────────────────────────────── */
   --fb-survey-brand-color: #64748b;
+  --fb-accent-background-color: #e2e8f0;
+  --fb-accent-background-color-selected: #f1f5f9;
 
-  --fb-accent-background-color: var(--slate-200);
-  --fb-accent-background-color-selected: var(--slate-100);
-
-
-  /* ---------------------------------------------------------------------------
-     Element Headline Tokens
-     Used for question headlines and main element titles.
-     --------------------------------------------------------------------------- */
+  /* ── Headlines ─────────────────────────────────────────────────────── */
   --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-font-weight: 600;
+  --fb-element-headline-font-size: 16px;
+  --fb-element-headline-color: #414b5a;
   --fb-element-headline-opacity: 1;
 
-  /* ---------------------------------------------------------------------------
-     Element Description Tokens
-     Used for descriptive text below headlines.
-     --------------------------------------------------------------------------- */
+  /* ── Descriptions ──────────────────────────────────────────────────── */
   --fb-element-description-font-family: inherit;
   --fb-element-description-font-weight: 400;
-  --fb-element-description-font-size: 0.875rem;
-  --fb-element-description-color: var(--input);
+  --fb-element-description-font-size: 14px;
+  --fb-element-description-color: #414b5a;
   --fb-element-description-opacity: 1;
 
-  /* ---------------------------------------------------------------------------
-     Label Tokens
-     Used for form labels and secondary text.
-     --------------------------------------------------------------------------- */
+  /* ── Upper Labels ──────────────────────────────────────────────────── */
+  --fb-element-upper-label-font-family: inherit;
+  --fb-element-upper-label-font-weight: 400;
+  --fb-element-upper-label-font-size: 12px;
+  --fb-element-upper-label-color: #414b5a;
+  --fb-element-upper-label-opacity: 0.6;
+
+  /* ── Labels ────────────────────────────────────────────────────────── */
   --fb-label-font-family: inherit;
   --fb-label-font-weight: 400;
-  --fb-label-font-size: 0.875rem;
-  --fb-label-color: var(--foreground);
+  --fb-label-font-size: 14px;
+  --fb-label-color: #414b5a;
   --fb-label-opacity: 1;
 
-  /* ---------------------------------------------------------------------------
-     Button Tokens
-     Used for the custom button variant. Standard variants use Tailwind defaults.
-     --------------------------------------------------------------------------- */
-  --fb-button-height: 2.25rem;
+  /* ── Buttons ───────────────────────────────────────────────────────── */
+  --fb-button-height: auto;
   --fb-button-width: auto;
-  --fb-button-font-size: 0.875rem;
   --fb-button-font-family: inherit;
+  --fb-button-font-size: 16px;
   --fb-button-font-weight: 500;
-  --fb-button-border-radius: var(--radius);
-  --fb-button-bg-color: hsl(222.2 47.4% 11.2%);
-  --fb-button-text-color: hsl(210 40% 98%);
-  --fb-button-padding-x: 1rem;
-  --fb-button-padding-y: 0.5rem;
+  --fb-button-border-radius: 8px;
+  --fb-button-bg-color: #414b5a;
+  --fb-button-text-color: #ffffff;
+  --fb-button-padding-x: 12px;
+  --fb-button-padding-y: 12px;
 
-  /* ---------------------------------------------------------------------------
-     Input Tokens
-     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-radius: var(--radius);
+  /* ── Inputs ────────────────────────────────────────────────────────── */
+  --fb-input-bg-color: #f3f4f6;
+  --fb-input-border-color: #c1c7d1;
+  --fb-input-border-radius: 8px;
   --fb-input-font-family: inherit;
-  --fb-input-font-size: 0.875rem !important;
+  --fb-input-font-size: 14px;
   --fb-input-font-weight: 400;
-  --fb-input-color: var(--foreground);
+  --fb-input-color: #414b5a;
   --fb-input-placeholder-color: var(--fb-input-color);
   --fb-input-placeholder-opacity: 0.5;
   --fb-input-width: 100%;
@@ -127,32 +135,25 @@
   --fb-input-padding-y: 16px;
   --fb-input-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 
-  /* ---------------------------------------------------------------------------
-     Progress Tokens
-     Used for the Progress component track and indicator.
-     --------------------------------------------------------------------------- */
-  --fb-progress-track-height: 0.5rem;
-  --fb-progress-track-bg-color: hsl(222.2 47.4% 11.2% / 0.2);
-  --fb-progress-track-border-radius: var(--radius);
-  --fb-progress-indicator-bg-color: hsl(222.2 47.4% 11.2%);
-  --fb-progress-indicator-border-radius: var(--radius);
+  /* ── Progress Bar ──────────────────────────────────────────────────── */
+  --fb-progress-track-height: 8px;
+  --fb-progress-track-bg-color: #d9dbde;
+  --fb-progress-track-border-radius: 8px;
+  --fb-progress-indicator-bg-color: #414b5a;
+  --fb-progress-indicator-border-radius: 8px;
 
-  /* ---------------------------------------------------------------------------
-     Option Tokens
-     Used for selectable options (radio, checkbox, multi-select).
-     These inherit from input tokens by default for consistency.
-     --------------------------------------------------------------------------- */
-  --fb-option-bg-color: var(--fb-input-bg-color);
-  --fb-option-label-color: var(--fb-input-color);
-  --fb-option-border-radius: var(--fb-input-border-radius);
-  --fb-option-padding-x: var(--fb-input-padding-x);
-  --fb-option-padding-y: var(--fb-input-padding-y);
-  --fb-option-font-family: var(--fb-input-font-family);
-  --fb-option-font-size: var(--fb-input-font-size);
-  --fb-option-font-weight: var(--fb-input-font-weight);
+  /* ── Options (radio / checkbox / multi-select) ─────────────────────── */
+  --fb-option-bg-color: #f3f4f6;
+  --fb-option-label-color: #414b5a;
+  --fb-option-border-radius: 8px;
+  --fb-option-padding-x: 16px;
+  --fb-option-padding-y: 16px;
+  --fb-option-font-family: inherit;
+  --fb-option-font-size: 14px;
+  --fb-option-font-weight: 400;
 }
 
-.button-custom {
+#fbjs .button-custom {
   width: var(--fb-button-width);
   height: var(--fb-button-height);
   background-color: var(--fb-button-bg-color);
@@ -167,37 +168,51 @@
   font-size: var(--fb-button-font-size);
 }
 
-.label-headline {
+#fbjs .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;
+  font-size: var(--fb-element-headline-font-size);
   color: var(--fb-element-headline-color);
   opacity: var(--fb-element-headline-opacity);
 }
 
-.label-description {
+#fbjs .label-description,
+#fbjs .label-description *,
+#fbjs .text-subheading,
+#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;
+  font-size: var(--fb-element-description-font-size);
   color: var(--fb-element-description-color);
   opacity: var(--fb-element-description-opacity);
 }
 
-.label-default {
+#fbjs .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;
+  font-size: var(--fb-label-font-size);
   color: var(--fb-label-color);
   opacity: var(--fb-label-opacity);
 }
 
-.progress-track {
+#fbjs .label-upper,
+#fbjs .label-upper * {
+  font-family: var(--fb-element-upper-label-font-family);
+  font-weight: var(--fb-element-upper-label-font-weight);
+  font-size: var(--fb-element-upper-label-font-size);
+  color: var(--fb-element-upper-label-color);
+  opacity: var(--fb-element-upper-label-opacity);
+}
+
+#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);
 }
@@ -229,4 +244,4 @@
 
 #fbjs textarea::-webkit-scrollbar-thumb:hover {
   background-color: hsl(215.4 16.3% 46.9% / 0.5);
-}
+}

packages/survey-ui/tailwind.config.ts

@@ -58,7 +58,7 @@ export default {
         // Input CSS variables (shorter names)
         "input-bg": "var(--fb-input-bg-color)",
         "input-border": "var(--fb-input-border-color, var(--fb-survey-brand-color))",
-        "input-text": "var(--fb-input-color)",
+        "input-text": "var(--fb-input-text-color)",
         "input-placeholder": "var(--fb-input-placeholder-color)",
         // Option CSS variables
         "option-bg": "var(--fb-option-bg-color)",

packages/surveys/src/components/buttons/back-button.tsx

@@ -15,7 +15,7 @@ export function BackButton({ onClick, backButtonLabel, tabIndex = 2 }: BackButto
       tabIndex={tabIndex}
       type="button"
       className={cn(
-        "hover:bg-input-bg text-heading focus:ring-focus rounded-custom mb-1 flex items-center px-3 py-3 text-base leading-4 font-medium focus:ring-2 focus:ring-offset-2 focus:outline-hidden"
+        "hover:bg-input-bg text-heading focus:ring-focus rounded-custom focus:outline-hidden mb-1 flex items-center px-3 py-3 text-base font-medium leading-4 focus:ring-2 focus:ring-offset-2"
       )}
       onClick={onClick}>
       {backButtonLabel || t("common.back")}

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,22 @@ 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(
+        "border-submit-button-border focus:ring-focus shadow-xs focus:outline-hidden mb-1 flex items-center justify-center border leading-4 hover:opacity-90 focus:ring-2 focus:ring-offset-2",
+        "button-custom"
+      )}
+      style={{
+        borderRadius: "var(--fb-button-border-radius)",
+        backgroundColor: "var(--fb-button-bg-color)",
+        color: "var(--fb-button-text-color)",
+        height: "var(--fb-button-height)",
+        fontSize: "var(--fb-button-font-size)",
+        fontWeight: "var(--fb-button-font-weight)",
+        paddingLeft: "var(--fb-button-padding-x)",
+        paddingRight: "var(--fb-button-padding-x)",
+        paddingTop: "var(--fb-button-padding-y)",
+        paddingBottom: "var(--fb-button-padding-y)",
+      }}
       onClick={onClick}
       disabled={disabled}>
       {buttonLabel || (isLastQuestion ? t("common.finish") : t("common.next"))}

packages/surveys/src/components/general/block-conditional.tsx

@@ -313,32 +313,31 @@ export function BlockConditional({
               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>

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 font-normal leading-6 opacity-60"
+          className="label-upper mb-[3px] text-xs font-normal leading-6 opacity-60"
           tabIndex={-1}
           data-testid="fb__surveys__headline-optional-text-test">
           {t("common.required")}
@@ -45,11 +45,11 @@ export function Headline({
         {isHeadlineHtml ? (
           <div
             data-testid="fb__surveys__headline-text-test"
-            className="htmlbody text-base"
+            className="label-headline htmlbody text-base"
             dangerouslySetInnerHTML={{ __html: safeHtml }}
           />
         ) : (
-          <p data-testid="fb__surveys__headline-text-test" className="text-base font-semibold">
+          <p data-testid="fb__surveys__headline-text-test" className="label-headline text-base font-semibold">
             {headline}
           </p>
         )}

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}

packages/surveys/src/components/general/progress.tsx

@@ -1,9 +1,11 @@
 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 overflow-hidden rounded-none">
       <div
-        className="transition-width bg-brand z-20 h-2 duration-500"
-        style={{ width: `${Math.floor(progress * 100).toString()}%` }}
+        className="transition-width progress-indicator z-20 h-full duration-500"
+        style={{
+          width: `${Math.floor(progress * 100).toString()}%`,
+        }}
       />
     </div>
   );

packages/surveys/src/components/general/subheader.tsx

@@ -23,7 +23,7 @@ export function Subheader({ subheader, elementId }: SubheaderProps) {
   return (
     <label
       htmlFor={elementId}
-      className="text-subheading block text-sm leading-6 font-normal wrap-break-word"
+      className="text-subheading label-description wrap-break-word block text-sm font-normal leading-6"
       data-testid="subheader"
       dir="auto">
       {isHtml ? (

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)}

packages/surveys/src/components/general/survey.tsx

@@ -849,7 +849,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")}>

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,

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-text-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

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,8 +191,231 @@ export const addCustomThemeToDom = ({ styling }: { styling: TProjectStyling | TS
     }
   }
 
-  // Close the #fbjs block
-  cssVariables += "}";
+  // 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 && styling.buttonFontWeight !== null)
+    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-background-color", styling.inputBgColor?.light ?? styling.inputColor?.light);
+  appendCssVariable("input-text-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 && styling.elementHeadlineFontWeight !== null)
+    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));
+  if (styling.elementDescriptionFontWeight !== undefined && styling.elementDescriptionFontWeight !== null)
+    appendCssVariable("element-description-font-weight", `${styling.elementDescriptionFontWeight}`);
+  appendCssVariable(
+    "element-description-color",
+    styling.elementDescriptionColor?.light ?? styling.questionColor?.light
+  );
+
+  appendCssVariable(
+    "element-upper-label-font-size",
+    formatDimension(styling.elementUpperLabelFontSize ?? 12)
+  );
+  appendCssVariable(
+    "element-upper-label-color",
+    styling.elementUpperLabelColor?.light ?? styling.questionColor?.light
+  );
+
+  if (styling.elementUpperLabelColor?.light) {
+    appendCssVariable("element-upper-label-opacity", "1");
+  }
+
+  appendCssVariable("element-upper-label-font-weight", `${styling.elementUpperLabelFontWeight ?? "normal"}`);
+
+  // Progress Bar (Advanced)
+  if (styling.progressTrackHeight !== undefined)
+    appendCssVariable("progress-track-height", formatDimension(styling.progressTrackHeight));
+
+  // Implicitly set the progress track border radius to the roundness of the card
+  appendCssVariable("progress-track-border-radius", formatDimension(roundness));
+
+  appendCssVariable("progress-track-bg-color", styling.progressTrackBgColor?.light);
+  appendCssVariable("progress-indicator-bg-color", styling.progressIndicatorBgColor?.light);
+
+  // Close the #fbjs variable block
+  cssVariables += "}\n";
+
+  // ---------------------------------------------------------------------------
+  // Conditional !important overrides
+  //
+  // Only emit rules for properties the user has *explicitly* set.  This ensures
+  // the Tailwind baseline classes are used when no custom value is provided,
+  // and prevents the brand-color change from cascading into unrelated elements
+  // (e.g. button bg, headline color) unless the user opted in.
+  // ---------------------------------------------------------------------------
+
+  const addRule = (selector: string, declarations: string) => {
+    if (declarations.trim()) {
+      cssVariables += `${selector} {\n${declarations}}\n`;
+    }
+  };
+
+  // --- Headlines ---
+  let headlineDecls = "";
+  if (styling.elementHeadlineFontSize !== undefined)
+    headlineDecls += "  font-size: var(--fb-element-headline-font-size) !important;\n";
+  if (styling.elementHeadlineFontWeight !== undefined && styling.elementHeadlineFontWeight !== null)
+    headlineDecls += "  font-weight: var(--fb-element-headline-font-weight) !important;\n";
+  if (styling.elementHeadlineColor?.light)
+    headlineDecls += "  color: var(--fb-element-headline-color) !important;\n";
+  addRule("#fbjs .label-headline,\n#fbjs .label-headline *", headlineDecls);
+
+  // --- Descriptions ---
+  let descriptionDecls = "";
+  if (styling.elementDescriptionFontSize !== undefined)
+    descriptionDecls += "  font-size: var(--fb-element-description-font-size) !important;\n";
+  if (styling.elementDescriptionFontWeight !== undefined && styling.elementDescriptionFontWeight !== null)
+    descriptionDecls += "  font-weight: var(--fb-element-description-font-weight) !important;\n";
+  if (styling.elementDescriptionColor?.light)
+    descriptionDecls += "  color: var(--fb-element-description-color) !important;\n";
+  addRule("#fbjs .label-description,\n#fbjs .label-description *", descriptionDecls);
+
+  // --- Upper labels ---
+  let upperDecls = "";
+  if (styling.elementUpperLabelFontSize !== undefined)
+    upperDecls += "  font-size: var(--fb-element-upper-label-font-size) !important;\n";
+  if (styling.elementUpperLabelFontWeight !== undefined && styling.elementUpperLabelFontWeight !== null)
+    upperDecls += "  font-weight: var(--fb-element-upper-label-font-weight) !important;\n";
+  if (styling.elementUpperLabelColor?.light) {
+    upperDecls += "  color: var(--fb-element-upper-label-color) !important;\n";
+    upperDecls += "  opacity: var(--fb-element-upper-label-opacity, 1) !important;\n";
+  }
+  addRule("#fbjs .label-upper,\n#fbjs .label-upper *", upperDecls);
+
+  // --- Buttons ---
+  let buttonDecls = "";
+  if (styling.buttonBgColor?.light)
+    buttonDecls += "  background-color: var(--fb-button-bg-color) !important;\n";
+  if (styling.buttonTextColor?.light) buttonDecls += "  color: var(--fb-button-text-color) !important;\n";
+  if (styling.buttonBorderRadius !== undefined)
+    buttonDecls += "  border-radius: var(--fb-button-border-radius) !important;\n";
+  if (styling.buttonHeight !== undefined) buttonDecls += "  height: var(--fb-button-height) !important;\n";
+  if (styling.buttonFontSize !== undefined)
+    buttonDecls += "  font-size: var(--fb-button-font-size) !important;\n";
+  if (styling.buttonFontWeight !== undefined && styling.buttonFontWeight !== null)
+    buttonDecls += "  font-weight: var(--fb-button-font-weight) !important;\n";
+  if (styling.buttonPaddingX !== undefined) {
+    buttonDecls += "  padding-left: var(--fb-button-padding-x) !important;\n";
+    buttonDecls += "  padding-right: var(--fb-button-padding-x) !important;\n";
+  }
+  if (styling.buttonPaddingY !== undefined) {
+    buttonDecls += "  padding-top: var(--fb-button-padding-y) !important;\n";
+    buttonDecls += "  padding-bottom: var(--fb-button-padding-y) !important;\n";
+  }
+  addRule("#fbjs .button-custom,\n#fbjs button.button-custom", buttonDecls);
+
+  // --- Options ---
+  if (styling.optionBorderRadius !== undefined)
+    addRule("#fbjs .rounded-option", "  border-radius: var(--fb-option-border-radius) !important;\n");
+  if (styling.optionBgColor?.light)
+    addRule("#fbjs .bg-option-bg", "  background-color: var(--fb-option-bg-color) !important;\n");
+
+  let optionLabelDecls = "";
+  if (styling.optionLabelColor?.light)
+    optionLabelDecls += "  color: var(--fb-option-label-color) !important;\n";
+  if (styling.optionFontSize !== undefined)
+    optionLabelDecls += "  font-size: var(--fb-option-font-size) !important;\n";
+  addRule("#fbjs .text-option-label", optionLabelDecls);
+
+  if (styling.optionPaddingX !== undefined)
+    addRule(
+      "#fbjs .px-option-x",
+      "  padding-left: var(--fb-option-padding-x) !important;\n  padding-right: var(--fb-option-padding-x) !important;\n"
+    );
+  if (styling.optionPaddingY !== undefined)
+    addRule(
+      "#fbjs .py-option-y",
+      "  padding-top: var(--fb-option-padding-y) !important;\n  padding-bottom: var(--fb-option-padding-y) !important;\n"
+    );
+
+  // --- Inputs ---
+  if (styling.inputBorderRadius !== undefined)
+    addRule("#fbjs .rounded-input", "  border-radius: var(--fb-input-border-radius) !important;\n");
+  if (styling.inputBgColor?.light || styling.inputColor?.light)
+    addRule("#fbjs .bg-input-bg", "  background-color: var(--fb-input-background-color) !important;\n");
+  if (styling.inputBorderColor?.light)
+    addRule("#fbjs .border-input-border", "  border-color: var(--fb-input-border-color) !important;\n");
+
+  let inputTextDecls = "";
+  if (styling.inputTextColor?.light) inputTextDecls += "  color: var(--fb-input-text-color) !important;\n";
+  if (styling.inputFontSize !== undefined)
+    inputTextDecls += "  font-size: var(--fb-input-font-size) !important;\n";
+  addRule("#fbjs .text-input-text", inputTextDecls);
+
+  if (styling.inputPaddingX !== undefined)
+    addRule(
+      "#fbjs .px-input-x",
+      "  padding-left: var(--fb-input-padding-x) !important;\n  padding-right: var(--fb-input-padding-x) !important;\n"
+    );
+  if (styling.inputPaddingY !== undefined)
+    addRule(
+      "#fbjs .py-input-y",
+      "  padding-top: var(--fb-input-padding-y) !important;\n  padding-bottom: var(--fb-input-padding-y) !important;\n"
+    );
+
+  // --- Progress bar ---
+  if (styling.progressTrackHeight !== undefined) {
+    addRule(
+      "html body #fbjs div.progress-track",
+      "  border-radius: var(--fb-progress-track-border-radius) var(--fb-progress-track-border-radius) 0 0 !important;\n" +
+        "  height: var(--fb-progress-track-height) !important;\n" +
+        "  min-height: var(--fb-progress-track-height) !important;\n" +
+        "  max-height: none !important;\n" +
+        "  overflow: hidden !important;\n"
+    );
+    addRule(
+      "html body #fbjs div.progress-indicator",
+      "  height: 100% !important;\n  border-radius: 0 !important;\n"
+    );
+  }
 
   // Set the innerHTML of the style element
   styleElement.innerHTML = cssVariables;

packages/types/common.ts

@@ -37,7 +37,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"]);
 

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>;

packages/types/styling.ts

@@ -42,14 +42,64 @@ 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
+  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.union([z.string(), z.number()]).nullish(),
+  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.union([z.string(), z.number()]).nullish(),
+  elementHeadlineColor: ZStylingColor.nullish(),
+  elementDescriptionFontSize: z.union([z.number(), z.string()]).nullish(),
+  elementDescriptionFontWeight: z.union([z.string(), z.number()]).nullish(),
+  elementDescriptionColor: ZStylingColor.nullish(),
+  elementUpperLabelFontSize: z.union([z.number(), z.string()]).nullish(),
+  elementUpperLabelColor: ZStylingColor.nullish(),
+  elementUpperLabelFontWeight: z.union([z.string(), z.number()]).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(),