---
title: Styles, colours and fonts
description: Pick a style variation, change colours and fonts, and adjust product grid density.
url: "https://wpruby.com/knowledgebase/cartavera-styles/"
updated: "2026-11-04"
category: WPRuby Themes / Cartavera
---

# Styles, colours and fonts

All of Cartavera's look is set in **Appearance → Editor → Styles**. There's no separate theme options panel.

Table of Contents

 [Toggle](#)

- [Style variations](#Style_variations)
  - [Midnight and light images](#Midnight_and_light_images)
- [Change colours](#Change_colours)
- [Change fonts](#Change_fonts)
- [Product grid density](#Product_grid_density)
- [Block styles](#Block_styles)
- [Custom CSS](#Custom_CSS)

## Style variations

A style variation changes the whole palette (and, for some, the fonts) in one click. Go to **Appearance → Editor → Styles** and pick one under **Browse styles**.

Cartavera has eight:

[![The eight style variations, as previewed on Appearance → Cartavera](https://cdn.wpruby.com/wp-content/uploads/2026/11/04082752/cartavera-docs-admin-style-variations.png)](https://cdn.wpruby.com/wp-content/uploads/2026/11/04082752/cartavera-docs-admin-style-variations.png)

| Variation | Notes |
| --- | --- |
| Default | Dark header, white page |
| Harbor |  |
| Graphite |  |
| Plum |  |
| Fresh Market |  |
| Midnight (dark) | Dark page and header. Used by the Electronics starter |
| Atelier | Used by the Fashion starter |
| Orchard | Used by the Grocery starter |

Every variation was checked against WCAG 2.2 AA contrast for text, form fields, icons, star ratings and focus rings, on the storefront pages and every pattern, at desktop and phone widths. If you change colours yourself, check the contrast of your new palette. The [WebAIM contrast checker](https://webaim.org/resources/contrastchecker/) is a quick way to do it: aim for at least 4.5:1 for text.

### Midnight and light images

In Midnight, light Cover images behind dark-on-light text are shown at 30 % brightness so the light text stays readable. If one of your banner images looks too dark, give that Cover block its own overlay colour in the editor; banners with an overlay set keep it.

## Change colours

**Styles → Colors → Palette** lists the theme's colours. Each one has a job, so changing it changes every place that uses it:

| Colour | Used for |
| --- | --- |
| Base | Page and card background |
| Canvas, Subtle | Section and panel backgrounds |
| Line | Borders and dividers |
| Contrast | Main text |
| Muted | Secondary text |
| Header, Header alt | Header and footer backgrounds |
| On header | Text and icons in the header and footer |
| Accent, Accent strong, Accent soft | Buttons, the cart badge, highlights |
| On accent | Text on accent buttons |
| Hyperlink, Hyperlink hover | Links |
| Deal | Discount badges and sale prices |
| Success | In-stock text and confirmations |
| Rating | Star ratings |

Your changes are saved to your site, not to the theme files, so theme updates don't overwrite them. To go back to a variation's colours, pick the variation again, or use **Reset** in the Styles panel.

## Change fonts

Cartavera uses **Manrope**, which is stored in the theme, so no font is loaded from Google or another server. To change it, go to **Styles → Typography** and pick another font for text and headings. With WordPress's Font Library you can add fonts from your computer or from Google Fonts.

If you switch font, Cartavera stops preloading Manrope, so you don't pay for a font you don't use.

## Product grid density

Product grids are WooCommerce's **Product Collection** block. To change how many products a row shows, select the block and change **Columns** in its settings. Each grid has its own setting.

## Block styles

Cartavera adds a few styles to WordPress blocks. Select a block and look under **Styles** in its settings:

| Block | Style | What it does |
| --- | --- | --- |
| Product Collection | **Carousel row** | One scrolling row with previous and next buttons |
| Product Collection | **Image tiles** | Large image tiles |
| Group (the header's outer group) | **Sticky compact header** | Keeps the header at the top. See [Headers and footers](https://wpruby.com/knowledgebase/cartavera-headers-and-footers/#sticky-compact-header) |
| Columns | **Card grid** | Each column becomes a card |
| List | **Checklist** | Ticks instead of bullets |
| Heading | **Section title** | The section heading style used on the homepage |

## Custom CSS

For small changes, use **Styles → ⋮ → Additional CSS**. For larger changes, or anything you want to keep under version control, use a [child theme](https://wpruby.com/knowledgebase/cartavera-child-themes/).

Cartavera's colours are available as CSS variables, for example `var(--wp--preset--color--accent)`, so your CSS can follow the palette and still work when you switch variation.