---
title: Styles, colors and fonts
description: Choose one of three style variations, then change colors and fonts in the Site Editor.
url: "https://wpruby.com/knowledgebase/pawtani-styles/"
updated: "2026-11-04"
category: WPRuby Themes / Pawtani
---

# Styles, colors and fonts

Table of Contents

 [Toggle](#)

- [Style variations](#Style_variations)
- [Change colors and fonts](#Change_colors_and_fonts)
- [Shapes](#Shapes)
- [Images](#Images)
- [Motion](#Motion)

## Style variations

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

| Variation | Look | Headings | Used by the starter |
| --- | --- | --- | --- |
| **Playful** (default) | Cream, coral, sage, sunshine and lavender with forest-green text; rounded shapes and pill buttons | Fredoka | Everyday Pet Store |
| **Natural** | Warm beige, forest green and terracotta; smaller corners | Fraunces | Treat Kitchen |
| **Modern Pet Studio** | White, charcoal and lavender; small corners and uppercase buttons | DM Sans | Cat Studio |

Body text uses **DM Sans** in every variation.

| Playful | Natural | Modern Pet Studio |
| --- | --- | --- |
| ![The Playful style](https://cdn.wpruby.com/wp-content/uploads/2026/11/04204509/pawtani-docs-homepage-everyday.jpg) | ![The Natural style](https://cdn.wpruby.com/wp-content/uploads/2026/11/04204516/pawtani-docs-homepage-kitchen.jpg) | ![The Modern Pet Studio style](https://cdn.wpruby.com/wp-content/uploads/2026/11/04204517/pawtani-docs-homepage-studio.jpg) |

## Change colors and fonts

Go to **Appearance → Editor → Styles → Colors** or **Typography**. Every block that uses a palette color or font updates across the store.

All the fonts are bundled with the theme, so nothing loads from font services.

If you change colors, check that text stays easy to read on its background.

## Shapes

Pawtani adds a few block styles of its own. Select a block and pick one under **Styles** in the sidebar:

| Block | Styles |
| --- | --- |
| Image | **Arch**, **Pebble**, **Soft frame** |
| Group | **Rounded panel**, **Scalloped edge** |
| Paragraph | **Eyebrow label** |
| Heading | **Underline accent** |
| Button | **Text with arrow** |

## Images

The homepage photographs are ordinary Image blocks. In the Site Editor, select one and choose **Replace** to use your own.

## Motion

Sections rising into view as you scroll, the hero sticker and hover effects switch off for visitors who have asked their device to reduce motion.