{"id":28566,"date":"2026-05-27T16:12:45","date_gmt":"2026-05-27T16:12:45","guid":{"rendered":"https:\/\/refiner.io\/docs\/?post_type=knowledgebase&p=28566"},"modified":"2026-05-27T16:12:46","modified_gmt":"2026-05-27T16:12:46","slug":"branding","status":"publish","type":"knowledgebase","link":"https:\/\/refiner.io\/docs\/kb\/design\/branding\/","title":{"rendered":"Branding"},"content":{"rendered":"\n\n\n

Branding options let you adapt the look and feel of your survey to match your product and brand. You can customize colors, add a banner image or avatar, and choose a font style that fits your user experience. This is especially important for in-app surveys, where a consistent design helps the survey feel like a natural part of your product instead of a disconnected third-party widget.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Color scheme<\/h2>\n\n\n\n

Refiner allows you to choose an Accent Color and Background Color for your surveys. <\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Both, the Accent and Background Colors, are used in different shades in your surveys for input fields and buttons.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Depending on the brightness of background colors, Refiner will automatically set the text color either to Black or White. This mechanism ensures that your survey widget has enough contrast between text and background elements and that your survey is easy to read.<\/p>\n\n\n\n

Banner images<\/h2>\n\n\n\n

Banner images are a great way to mirror you brand inside a Refiner survey. The option to upload custom banner images is available for In-product surveys on web and mobile.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

You can upload one banner image per survey in the Design tab. You can also choose to upload specific banner images for each question individually.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

As an alternative to banner images you can also include images in the body text of your survey using Markdown syntax<\/a>.<\/p>\n\n\n\n

Avatar image<\/h3>\n\n\n\n

Adding an avatar, name and job-title to the top section of your survey widget will instantly give it a personal touch and make it more relatable. This usually results in higher response rates and overal better response data quality.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Upload logo<\/h3>\n\n\n\n

Survey Pages and Email Surveys let you upload a logo that is displayed in the top section of the survey page. You can also upload a page icon which used by web browsers.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Font style<\/h3>\n\n\n\n

The default font of our surveys blend in nicely with most user interfaces and was optimized for high readability. By default, we are using the Roboto with a base font size of 16px. <\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

You can choose to use other popular fonts provided by Google Fonts<\/a>, such as Inter, Poppins, Montserrat etc. You can also choose a smaller or bigger base font size. If you can’t find your preferred font in our list, please don’t hesitate to reach out to us.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

You can also switch the text direction from Left-to-Right (LTR) to Right-to-left (RTL). This setting might get overwritten for specific languages when using our Translations<\/a> feature.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>","protected":false},"excerpt":{"rendered":"

Branding options let you adapt the look and feel of your survey to match your product and brand. You can customize colors, add a banner image or avatar, and choose a font style that fits your user experience. This is especially important for in-app surveys, where a consistent design helps the survey feel like a […]<\/p>\n

Read More…<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","template":"","knowledgebase_tag":[],"class_list":["post-28566","knowledgebase","type-knowledgebase","status-publish","hentry","knowledgebase_cat-design"],"acf":[],"featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","ab-block-post-grid-landscape":"","ab-block-post-grid-square":"","gb-block-post-grid-landscape":"","gb-block-post-grid-square":""},"post_excerpt_stackable_v2":"

Branding options let you adapt the look and feel of your survey to match your product and brand. You can customize colors, add a banner image or avatar, and choose a font style that fits your user experience. This is especially important for in-app surveys, where a consistent design helps the survey feel like a natural part of your product instead of a disconnected third-party widget. Color scheme Refiner allows you to choose an Accent Color and Background Color for your surveys. Both, the Accent and Background Colors, are used in different shades in your surveys for input fields and…<\/p>\n","category_list_v2":"","author_info_v2":{"name":"Moritz Dausinger","url":"https:\/\/refiner.io\/docs\/author\/user\/"},"comments_num_v2":"0 comments","yoast_head":"\nBranding<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/refiner.io\/docs\/kb\/design\/branding\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Branding\" \/>\n<meta property=\"og:description\" content=\"Branding options let you adapt the look and feel of your survey to match your product and brand. You can customize colors, add a banner image or avatar, and choose a font style that fits your user experience. This is especially important for in-app surveys, where a consistent design helps the survey feel like a [...]Read More...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/refiner.io\/docs\/kb\/design\/branding\/\" \/>\n<meta property=\"og:site_name\" content=\"Refiner Documentation\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-27T16:12:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-27-at-18.04.29-1024x372.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/refiner.io\/docs\/kb\/design\/branding\/\",\"url\":\"https:\/\/refiner.io\/docs\/kb\/design\/branding\/\",\"name\":\"Branding\",\"isPartOf\":{\"@id\":\"https:\/\/refiner.io\/docs\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/refiner.io\/docs\/kb\/design\/branding\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/refiner.io\/docs\/kb\/design\/branding\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-27-at-18.04.29-1024x372.png\",\"datePublished\":\"2026-05-27T16:12:45+00:00\",\"dateModified\":\"2026-05-27T16:12:46+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/refiner.io\/docs\/kb\/design\/branding\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/refiner.io\/docs\/kb\/design\/branding\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/refiner.io\/docs\/kb\/design\/branding\/#primaryimage\",\"url\":\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-27-at-18.04.29.png\",\"contentUrl\":\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-27-at-18.04.29.png\",\"width\":1516,\"height\":550},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/refiner.io\/docs\/kb\/design\/branding\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/refiner.io\/docs\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Branding\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/refiner.io\/docs\/#website\",\"url\":\"https:\/\/refiner.io\/docs\/\",\"name\":\"Refiner Documentation\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/refiner.io\/docs\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/refiner.io\/docs\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/refiner.io\/docs\/#organization\",\"name\":\"Refiner Documentation\",\"url\":\"https:\/\/refiner.io\/docs\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/refiner.io\/docs\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/11\/cropped-Group-8.png\",\"contentUrl\":\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/11\/cropped-Group-8.png\",\"width\":400,\"height\":61,\"caption\":\"Refiner Documentation\"},\"image\":{\"@id\":\"https:\/\/refiner.io\/docs\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Branding","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/refiner.io\/docs\/kb\/design\/branding\/","og_locale":"en_US","og_type":"article","og_title":"Branding","og_description":"Branding options let you adapt the look and feel of your survey to match your product and brand. You can customize colors, add a banner image or avatar, and choose a font style that fits your user experience. This is especially important for in-app surveys, where a consistent design helps the survey feel like a [...]Read More...","og_url":"https:\/\/refiner.io\/docs\/kb\/design\/branding\/","og_site_name":"Refiner Documentation","article_modified_time":"2026-05-27T16:12:46+00:00","og_image":[{"url":"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-27-at-18.04.29-1024x372.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/refiner.io\/docs\/kb\/design\/branding\/","url":"https:\/\/refiner.io\/docs\/kb\/design\/branding\/","name":"Branding","isPartOf":{"@id":"https:\/\/refiner.io\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/refiner.io\/docs\/kb\/design\/branding\/#primaryimage"},"image":{"@id":"https:\/\/refiner.io\/docs\/kb\/design\/branding\/#primaryimage"},"thumbnailUrl":"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-27-at-18.04.29-1024x372.png","datePublished":"2026-05-27T16:12:45+00:00","dateModified":"2026-05-27T16:12:46+00:00","breadcrumb":{"@id":"https:\/\/refiner.io\/docs\/kb\/design\/branding\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/refiner.io\/docs\/kb\/design\/branding\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/refiner.io\/docs\/kb\/design\/branding\/#primaryimage","url":"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-27-at-18.04.29.png","contentUrl":"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-27-at-18.04.29.png","width":1516,"height":550},{"@type":"BreadcrumbList","@id":"https:\/\/refiner.io\/docs\/kb\/design\/branding\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/refiner.io\/docs\/"},{"@type":"ListItem","position":2,"name":"Branding"}]},{"@type":"WebSite","@id":"https:\/\/refiner.io\/docs\/#website","url":"https:\/\/refiner.io\/docs\/","name":"Refiner Documentation","description":"","publisher":{"@id":"https:\/\/refiner.io\/docs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/refiner.io\/docs\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/refiner.io\/docs\/#organization","name":"Refiner Documentation","url":"https:\/\/refiner.io\/docs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/refiner.io\/docs\/#\/schema\/logo\/image\/","url":"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/11\/cropped-Group-8.png","contentUrl":"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/11\/cropped-Group-8.png","width":400,"height":61,"caption":"Refiner Documentation"},"image":{"@id":"https:\/\/refiner.io\/docs\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/refiner.io\/docs\/wp-json\/wp\/v2\/knowledgebase\/28566","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/refiner.io\/docs\/wp-json\/wp\/v2\/knowledgebase"}],"about":[{"href":"https:\/\/refiner.io\/docs\/wp-json\/wp\/v2\/types\/knowledgebase"}],"author":[{"embeddable":true,"href":"https:\/\/refiner.io\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/refiner.io\/docs\/wp-json\/wp\/v2\/comments?post=28566"}],"version-history":[{"count":1,"href":"https:\/\/refiner.io\/docs\/wp-json\/wp\/v2\/knowledgebase\/28566\/revisions"}],"predecessor-version":[{"id":28571,"href":"https:\/\/refiner.io\/docs\/wp-json\/wp\/v2\/knowledgebase\/28566\/revisions\/28571"}],"wp:attachment":[{"href":"https:\/\/refiner.io\/docs\/wp-json\/wp\/v2\/media?parent=28566"}],"wp:term":[{"taxonomy":"knowledgebase_tag","embeddable":true,"href":"https:\/\/refiner.io\/docs\/wp-json\/wp\/v2\/knowledgebase_tag?post=28566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}