Content_Display_Style

v 3.4

Conversations (v2 Display): Review Fonts

Fonts

1. Review Titles

2. Section Header

3. Section Header Controls

4. Review Text

Affects font family but does not always affect

font sizing.

5. Review Dates

6. Reviewer Name

7. Links

8. Buttons - Primary

Hover color of sort and filter dropdown text

can be modified in Buttons - Primary.

9. Default Filters

Reviews display example

v 3.4

Conversations (v2 Display): Regional Review Fonts

Fonts

1. Section Header

2. Review Dates

Regional reviews display example

v 3.4

Conversations (v2 Display): Comments Display and Submission

Fonts

1. Form Fieldset Label

2. Section Header

3. Review Text

4. Review Dates

5. Reviewer Name

6. Field Placeholder Text

7. Links*

• Note: Font-weight, font-style, text

decoration from Review Text styling.

Font-size, font-transform, font-family,

color from Links styling.

8. Links

9. Buttons - Primary

Backgrounds

9. Section Header Controls

Borders

10. Content Header

Comments Display

Comments Submission

v 3.4

Conversations (v2 Display): Review Icons

Icons

16. Review Stars

• For the v2 display, the Icon Size of review stars is not exact in

pixels. To calculate the Review Stars’ size, the Icon Size value in

the Icons menu is multiplied by 0.75 to determine the final size

of the stars. For example, a font size value of 16px would result

in a star width and height of 12px (16 * 0.75 = 12).

• ‘Full’ color changes outlines and fill of display submission stars

under “Review this Product”

• ‘Empty’ state affects empty star backgrounds in submission

form stars.

18. Bars

• The badge icon colors can be configured from Icons: Bars: Full.

Backgrounds

19. Buttons – Primary

The “button” option sets the color of the Helpfulness

voting icons.

Reviews display example

v 3.4

Conversations (v2 Display): Q&A Fonts

Fonts

1. Review Titles

2. Section Header

3. Review Text

4. Review Dates

5. Reviewer Name

6. Links

7. Buttons - Primary

8. Buttons – Secondary

9. Default Filters

Questions & Answers display example

v 3.4

Conversations (v2 Display): Submission (main section)

Fonts

1. Form Fieldset Label

2. Section Header

3. Section Header Controls

4. Labels

5. Dimension Values

• Note: The default setting has a transparent

background, with the font and border color being

the same as the applied color. When a pill is

selected, the colors invert, resulting in the

background taking on the applied color while the

font color changes to a default white.

6. Links

7. Buttons - Primary

8. Buttons - Secondary

Icons

9. Review Stars

• ‘Full’ color changes outlines and fill of full submission

stars.

• ‘Empty’ color affects empty star backgrounds in

submission stars.

Backgrounds

10. Buttons - Primary

Any changes outside of the list above cannot be done.

Submission form example

v 3.4

Conversations (v2 Display): Submission (other sections)

Fonts

1. Form Fieldset Label

2. Section Header

3. Section Header Controls

4. Labels

5. Dimension Values

• Note: The default setting has a transparent

background, with the font and border color being

the same as the applied color. When a pill is

selected, the colors invert, resulting in the

background taking on the applied color while the

font color changes to a default white.

6. Links

7. Buttons - Primary

8. Buttons - Secondary

Icons

9. Review Stars

• ‘Full’ color changes outlines and fill of full submission

stars.

• ‘Empty’ color affects empty star backgrounds in

submission stars.

Backgrounds

10. Buttons - Primary

11. Buttons – Secondary

Any changes outside of the list above cannot be done.

Submission form examples

v 3.4

Conversations (v2 Display): Content Coach

Fonts

1. Form Fieldset Label

2. Section Header

Note: If Section Header is set to transparent, then

background color will be set as #F2F2F2.

3. Section Header Controls

4. Labels

5. Review Text

6. Dimension Values

7. Links

Backgrounds

8. Buttons - Primary

Any changes outside of the list above cannot be

done.

Content Coach example

v 3.4

Conversations (v2 Display): Q&A Submission

Fonts

1. Section Header

2. Form Fieldset Label

3. Review Text

4. Links

Note: Outline of the focused inputs use the Links color.

5. Buttons – Primary

6. Labels

Backgrounds

7. Primary Button

Affects the background color of submission form

buttons, which will have 50% opacity until form

sections are completed.

Note for Cancel button: The Cancel button uses Fonts:

Buttons - Primary as its font family, Backgrounds:

Primary Button as the button color and border color and

a transparent color as the background color.

8. Lightbox

Borders

9. Primary Button

Any changes outside of the list above cannot be done.

Question submission form example

Answer submission form example

v 3.4

Conversations: Fonts and Icons Menu Options

Fonts Menu Options

Fonts

• Font Family: Limited to what is displayed in the drop down

menu.

• Font Color: Select from palette or enter the desired hex code.

• Font Size: In pixels

• Line Height: In pixels

• Character Style: Limited to Bold, Underline, Italic

• Capitalization: Limited to Default, Capitalize Words, ALL CAPS,

lowercase

Link States

• All: Changes will be applied to all link states.

• Link: Changes will be applied to default link state only.

• Active: Changes will be applied to the active link state only.

• Hover: Changes will be applied to the hover link state only.

• Visited: Changes will be applied to the visited link state only.

Button States

• All: Changes will be applied to all button states.

• Button: Changes will be applied to default button state only.

• Active: Changes will be applied to the active button state only.

• Hover: Changes will be applied to the hover button state only.

Custom Fonts

To use custom fonts, they can either be detected from your site’s

stylesheet using the Style Detector or added using the

Manage Styles palette.

Icons Menu Options

Stars and Bars

• Icon Color: Hex code can be specified for full and empty stars if

not already in the palette.

• Icon Image: Limited to 1 of 2 options, rounded stars or sharp

stars.

• Icon Size: In pixels.

Any changes outside of the list above cannot be done.

Fonts menu: Default Fonts menu: Links

Fonts menu: Buttons

Icons menu: Stars and Bars

v 3.4

Conversations: Background and Border Menu Options

Backgrounds Menu Options

• Background Color: Select a background color from the palette

or enter the hex code of the desired color.

• Gradient: Adds a gradient from Gradient Color to Background

Color. Select whether the gradient should start at the Top or

Bottom.

• Gradient Color: Select a color from the palette or enter the hex

code of the desired color.

• Gradient Opacity: Set the opacity for the gradient.

Form Fieldset States

• All: Changes will be applied to all form fieldset states

• Normal: Changes will be applied to default form fieldset state

only.

• Selected: Changes will be applied to the active form fieldset

state only.

Button States

• All: Changes will be applied to all button states.

• Button: Changes will be applied to default button state only.

• Hover: Changes will be applied to the hover button state only.

Borders Menu Options

• Select borders to edit: Specify and enable/disable the top,

bottom, left and/or right borders.

• Color: Select a border color from the palette or enter the hex

code of the desired color.

• Width: Select a border width in pixels.

• Style: Select a border style from the dropdown: None, Hidden,

Dotted, Dashed, Solid, Double, Groove, Ridge or Inset.

• Border Radius: Specify a border radius in pixels to add rounded

corners to an object. Each corner can have different settings, or

one setting can be applied for all corners.

Any changes outside of the list above cannot be done.

Backgrounds menu Backgrounds menu: Form Fieldset

Backgrounds menu: Buttons

Borders menu

v 3.4

Conversations (v2 Display): Review Backgrounds and Borders

Backgrounds

19. Rating Summary

20. Section Header

21. Section Header Controls

22. Content Item

23. Content Header

24. Content Summary

25. Buttons - Primary

The “button” option sets the color of the Helpfulness voting icons.

26. Default Filters

The filter and sort menu buttons both take background colors from

this. The selected option also uses the Default Filters background.

The hover option inverts the Default Filters background and Default

Filters font colors.

Borders

31. Content Header

32. Content Summary

35. Section Header

Reviews display example

v 3.4

Conversations (v2 Display): Q&A Backgrounds and Borders

Backgrounds

1. Section Header

2. Section Header Controls

3. Buttons - Primary

4. Buttons – Secondary

5. Default Filters

Borders

6. Content Header

7. Content Summary

8. Primary Button

9. Secondary Button

Questions & Answers v2 display example

v 3.4

Conversations (v2 Display): Review Margins and Padding

Margins and Padding

To style the background settings for margin and padding:

• Expand the Margin & Padding section of the style editor to

customize how margins and paddings are displayed for rating

summaries and content elements.

• Select the element you want to customize from the drop-down

list.

• Enable Uniform margins or Uniform padding to automatically

apply the latest value you enter into a margin or padding field to

the remaining fields.

• Specify the top, bottom, left, and right margin and padding

values (in pixels) within the appropriate field.

36. Rating Summary

37. Content Item

38. Content Header

39. Content Summary

Reviews display example

v 3.4

Conversations (v2 Display): Q&A Margins and Padding

Margins and Padding

To style the background settings for margin and padding:

• Expand the Margin & Padding section of the style editor to

customize how margins and paddings are displayed for rating

summaries and content elements.

• Select the element you want to customize from the drop-down

list.

• Enable Uniform margins or Uniform padding to automatically

apply the latest value you enter into a margin or padding field to

the remaining fields.

• Specify the top, bottom, left, and right margin and padding

values (in pixels) within the appropriate field.

36. Rating Summary

37. Content Item

38. Content Header

39. Content Summary

Any changes outside of the list above cannot be done.

Questions & Answers display example

v 3.4

Conversations: Multi-Product Submission

Icons

40. Review Stars

• Full: The full star fill color, used for both product ratings and

secondary ratings, is measured against the app background of

#FFF (white).

• Empty: The star empty color is measured against the star fill and

app background colors.

Fonts

41. Links

Link color is measured against the app background color.

42. Buttons – Primary

Backgrounds

43. Buttons - Primary

This color is the background of the OK button as well as the border

and font color of the Cancel button.

Main ratings page

Terms and conditions agreement

v 3.4

Conversations: Multi-Product Submission

Fonts

42. Buttons - Primary

This color is used for the text color for the buttons on the form,

such as the “Finish” button shown.

Backgrounds

43. Buttons - Primary

This color is used in many different places.

• It is used as the active question number color.

• It is used for the Slider handle as well as the tooltip border.

• It is also used for the Submit button background.

Form page

v 3.4

Conversations: Multi-Product Submission

Backgrounds

43. Buttons - Primary

This color is used in many different places.

• It is used as the text color for the message to either add text to

your rating or to finish editing.

• It is used for the active border color for text inputs.

• It is more importantly used as the brand color, so most styles

default to whatever is provided in this field. This includes the

other question types, such as the single and multi-select.

• It is also used for the CTA button at the bottom of the page.

Add text to your rating

Active border color for text inputs

Multi-select inactive border, text and active background colors

Bottom of page CTA button text color and border color

v 3.4

Conversations: In-Mail Submission Email Template

Icons

44. Review Stars

• Full: The full star fill color is measured against the email background.

For the stars next to the radio buttons, a slightly lighter version of the

full star color is used on the filled stars. On hover and click, the filled

stars are full color. For the clickable stars in the “Rate your other

purchases” section, the full star color is used for stars when hovered

over and clicked on.

Note: To meet accessibility standards and accommodate a broader range of brand colors,

we allow a low contrast ratio (1.2:1) for the review stars full color. If the contrast ratio is

lower than 1.2:1, or if an element is transparent, the fallback color #444 (dark gray) is used.

• Empty: The empty star color is used for the star color outline in the

stars next to the radio buttons. The empty star outline color is also

used in the “Rate your other purchases” section.

Note: To meet accessibility standards and accommodate a broader range of brand colors,

we allow a low contrast ratio (1.2:1) for the review stars outline color. This helps prevent

white-on-white and transparency issues while still accepting common, low-contrast color

combinations if desired. If the contrast ratio is lower than 1.2:1, or if an element is

transparent, the fallback color #CCC (light gray) is used.

Fonts

45. Review Text

This color is used for the main text colors in the email.

A slightly lighter version of this color is used for the following text.

• “Can’t enter text?” message under “Your review.”

• “Quality insights are...” text under the review text field.

• “If you are unable to submit...” text under the Submit button.

• “Start rating” text under the clickable stars.

• Non-linked text in the footer.

46. Links

Link: This color is used for the link colors in the email.

Note: To avoid color combinations that do not meet accessibility standards, we allow for a

contrast ratio of 4.5:1 for all elements. If the contrast ratio is lower than 4.5:1, or if an element

is transparent, the fallback color #0066B4 (blue) is used.

47. Buttons - Primary

Primary Button: This color is used for the text color of the buttons. For

example, the “WRITE A REVIEW” button.

Note: To avoid color combinations that do not meet accessibility standards, we allow for a

contrast ratio of 4.5:1 for all elements. If the contrast ratio is lower than 4.5:1, or if an element

is transparent, the fallback color #fff (very light gray) is used.

Backgrounds

47. Buttons - Primary

This color is used for the button backgrounds.

• On some iOS devices, a disabled button is indicated using a slightly

lighter background color based on the primary button color.

Borders

49. Primary Button

The top left border radius determines the border radius of the buttons.

In-Mail Submission Email Template

v 3.4

Conversations: Review Highlights

Icons

50. Review Highlight Stars

Fonts

51. Links

52. Application Title

53. Review Title

54. Pro/Con Container Title

55. Review/Highlight Text

56. Highlight Title

Review Highlights examples