CSS variables

Adapting colours, typeface, corner radius and spacing to your brand with CSS variables.

The default component does not hard-code its colour, typeface or corner values; it reads all of them from CSS variables. When you define the variables in your own CSS file, the component uses those values. For variables you do not define, the values of the channel’s built-in design apply.

Variables

The default values in the table are those of the Warm design; for the values that differ in the other designs, see Built-in designs.

Variable	Default	Where it is used
`--review-font`	`inherit`	All text. By default, your page’s typeface is used.
`--review-text`	`#1F1B16`	Main text colour
`--review-text-muted`	`#6B6258`	Secondary text: the badge and date line under the author’s name, the “Helpful?” label and the vote buttons, information notes
`--review-surface`	`#FFFFFF`	The background of cards, buttons, form fields and the review writing area
`--review-surface-sunken`	`#FAF6EF`	The background of filter buttons and image placeholders, the background of buttons on hover, the background of the notice in the review form
`--review-border`	`#ECE5DA`	Lines and borders
`--review-border-width`	`1px`	Line width
`--review-accent`	`#1F1B16`	Primary buttons (for example “Search” and “Send”), selected filter buttons and the focus outline
`--review-accent-text`	`#FFFFFF`	The text colour of primary buttons and selected filter buttons
`--review-star`	`#F2A516`	The filled part of the stars and the rating bars, the scale marker in a review
`--review-track`	`#EFE4D2`	The empty part of the stars, the track of the rating bars and stepped scales
`--review-verified`	`#1F7A4D`	The verification badge and the verified review count
`--review-summary`	`#FBF5EB`	The background of the summary panel, the seller response and the resolution; the background of the selected “Yes” or “No” button
`--review-summary-text`	`#5B3A0E`	The text in the summary panel, the seller response and the resolution; the scale marker in the summary; the text of the selected vote button
`--review-avatar`, `--review-avatar-text`	Varies by name	The background and letter colour of the initials circle. When not defined, the colour is one of six colours chosen by the author’s name; when defined, the same colour is used for every review.
`--review-radius`	`14px`	The corner radius of cards, the summary panel and the review writing area
`--review-radius-sm`	`10px`	The corner radius of buttons, form fields and images
`--review-space-unit`	`4px`	The spacing unit. All spacing is a multiple of this value; when it is increased, all spacing grows proportionally.
`--review-label-transform`	`none`	The letter case of labels such as “Verified buyer”; for example `uppercase`
`--review-label-tracking`	`normal`	The letter spacing of the same labels; for example `0.08em`

Built-in designs

The default component has eight built-in designs: Warm, Trust, Editorial, Minimal, Blush, Sport, Natural and Night. The channel’s design is chosen in the panel on the Store appearance screen (Store appearance); the data-review-theme attribute on the container overrides this choice (Layout and CSS selectors).

The design sets the starting values of the variables. The --review-* values you define yourself take precedence in every design; for example, if you have defined --review-accent, your colour is used in every design. The values of the other designs that differ from Warm are in the two tables below; a value shown as “—” is the same as in Warm.

Variable	Trust	Editorial	Minimal	Blush
`--review-text`	`#17201D`	`#111111`	`#1A1A1A`	`#3A2A33`
`--review-text-muted`	`#56625E`	`#666666`	`#6B6B6B`	`#7E6874`
`--review-surface-sunken`	`#F2F7F5`	`#F4F4F4`	`#F6F6F6`	`#FFF4F7`
`--review-border`	`#DCE7E2`	`#E4E4E4`	`#E6E6E6`	`#F4DCE4`
`--review-accent`	`#0F6E56`	`#111111`	`#1A1A1A`	`#B83E68`
`--review-star`	`#EF9F27`	`#111111`	`#F5A623`	`#E56F96`
`--review-track`	`#E3ECE8`	`#DADADA`	`#EBEBEB`	`#F7E2EA`
`--review-verified`	`#0F6E56`	`#3D3D3D`	`#2E7D4F`	`#A0365C`
`--review-summary`	`#FFFFFF`	`transparent`	`#FFFFFF`	`#FFF0F4`
`--review-summary-text`	`#17201D`	`#111111`	`#1A1A1A`	`#7A2848`
`--review-radius`	`12px`	`2px`	`8px`	`22px`
`--review-radius-sm`	`8px`	`2px`	`6px`	`14px`

Variable	Sport	Natural	Night
`--review-text`	`#0E0E10`	`#2E3326`	`#F3F3F1`
`--review-text-muted`	`#55555C`	`#686D5C`	`#A9A9A4`
`--review-surface`	—	—	`#17181A`
`--review-surface-sunken`	`#F2F2F4`	`#F4F1E8`	`#222326`
`--review-border`	`#DADADF`	`#E3DDCB`	`#323438`
`--review-accent`	`#0E0E10`	`#4F6136`	`#F3F3F1`
`--review-accent-text`	—	—	`#111214`
`--review-star`	`#FF6A00`	`#C98F2E`	`#F5C451`
`--review-track`	`#E4E4E9`	`#EAE4D3`	`#3A3C41`
`--review-verified`	`#0E0E10`	`#4F6136`	`#7FD1A8`
`--review-summary`	`#FFFFFF`	`#F1EDDF`	`#222326`
`--review-summary-text`	`#0E0E10`	`#3B4529`	`#F3F3F1`
`--review-radius`	`4px`	`12px`	`12px`
`--review-radius-sm`	`2px`	`8px`	`8px`
`--review-label-transform`	`uppercase`	—	—
`--review-label-tracking`	`.08em`	—	—

The designs also change how some elements look:

In the Trust and Sport designs the average rating is shown in a box in the --review-accent colour, and the “Helpful?” vote buttons have a border.
In the Trust and Minimal designs the summary panel has a thin frame.
In the Trust and Natural designs the filled part of the rating bars and the scale marker are in the --review-accent colour, and the seller response and the resolution record have a line in this colour on their left edge. In the Trust design, in the cards layout, the line on the left edge of the cards is in this colour too.
In the Editorial design the initials circle is not shown, review titles are set in quotation marks and the summary is separated by a bottom line instead of a panel.
In the Sport design the summary has a thick frame in the --review-text colour, the average rating is set in bold italics, and review titles and labels such as “Verified buyer” are shown in upper case; the filter buttons, the vote buttons and the “More reviews” button have square corners instead of rounded ends.
In the Minimal design no shadow appears when the pointer is over a card.
The Night design is for dark websites: the review section brings its own dark background (--review-surface), padding and rounded corners, so it looks dark even if your page background is not.

These differences are also written with rules that add no specificity, so your own CSS rules can override them. The background, padding and corner radius that the Night design gives the root element are the one exception: for details, see Layout and CSS selectors › CSS selectors.

Where to define them

Define the variables on the :root selector. The review form, the order verification and the photo viewer are shown in a dialog that opens on top of the page and is added to the body element. When the dialog opens, the current values of the variables are read from the element that opens it (the review writing area or the review list) and passed to the dialog. If you show the review writing area outside the container with data-review-gate and define the variables only on the container, that area and the dialog opened from it do not receive the values.

:root {
  --review-font: "Inter", system-ui, sans-serif;
  --review-text: #111418;
  --review-text-muted: #5b626b;
  --review-accent: #0b4f9c;
  --review-accent-text: #ffffff;
  --review-star: #e0a100;
  --review-radius: 0;
  --review-radius-sm: 0;
  --review-space-unit: 5px;
  --review-label-transform: uppercase;
  --review-label-tracking: 0.06em;
}

If you want a different look on different pages, you can redefine the same variables on a narrower selector; the review section uses the nearest definition, and the dialog takes the values from where it was opened.

The component does not define the --review-* variables itself; the default and design values are only used inside its own rules. If you use a variable such as var(--review-accent) in your own CSS rules, define the variable or give a fallback value: var(--review-accent, #1f1b16).

Dark theme

If your site is only dark, you can choose the Night design for the channel instead of defining the variables (Built-in designs). If your site switches between a light and a dark theme, redefine the variables inside your dark theme rule. Because the summary panel and the seller response use --review-summary and --review-summary-text, define these two as well:

@media (prefers-color-scheme: dark) {
  :root {
    --review-text: #eceef0;
    --review-text-muted: #a3aab3;
    --review-surface: #15181c;
    --review-surface-sunken: #1d2126;
    --review-border: #2e343b;
    --review-accent: #7fb2ff;
    --review-accent-text: #0b1320;
    --review-track: #2e343b;
    --review-verified: #5cc08a;
    --review-summary: #1d2126;
    --review-summary-text: #eceef0;
  }
}

Accessibility

There must be a contrast ratio of at least 4.5:1 between --review-text and --review-surface, between --review-verified and --review-surface, between --review-summary-text and --review-summary, and between --review-accent-text and --review-accent.
The focus outline is shown in the --review-accent colour and must not be removed; visitors navigating with a keyboard use it to see which element they are on.
Stars are also provided as text for screen readers (for example “4 out of 5”); changing only the colour is sufficient.

Style scope

The component’s style rules apply only to its own elements and do not affect other elements on your page. The component resets inherited styles on its root element (all: initial); as a result, general rules on your page that use tag selectors, such as button, p or li, do not change the component’s appearance. More specific rules of yours that include a class or an ID may, however, also apply to elements inside the component.

For changes that cannot be made with variables, see Layout and CSS selectors.