# Your theme — colours, fonts and shape

> Set your store's colours, typography and shape once, and every page, button and card follows — with a live preview.

Product: NijeesWeb online store builder · Source: https://www.nijeesweb.com/docs/ecommerce/design/theme · Updated 2026-10-06

**Theme → Theme** holds your store's design tokens — the colours, type and shape every page uses. Change a colour here and every button, link and card that uses it changes with it.

![The theme editor](https://www.nijeesweb.com/marketing/img/docs/ecommerce/admin/theme-1200.webp "Theme: brand colours and surfaces on the left, a live preview on the right")

## Brand colours

| Token | Used for |
| --- | --- |
| **Primary** / **Primary (hover)** | Main buttons — *Add to cart*, *Checkout* — and their hover colour. |
| **On primary (text)** | Text on primary buttons. Make sure it contrasts. |
| **Secondary** / **Secondary (hover)** / **On secondary** | Second-level buttons. |
| **Accent** / **On accent** | Highlights, badges and offers. |

## Surfaces and text

**Page background**, **Surface / cards**, **Alt surface**, **Body text**, **Muted text**, **Headings** and **Borders**.

## Status colours

**Success**, **Danger**, **Warning** and **Info** — messages such as *Added to cart* or *Out of stock*.

## Typography

**Body font**, **Heading font**, **Base size** and **Line height**. Type a font name; the list suggests ones that work.

## Shape and depth

**Radius (small / medium / large)** — how rounded corners are — and **Shadow (small / medium)**.

## Buttons

The default button: **Background**, **Text**, **Hover background**, **Hover text**, **Border colour**, **Border width**, **Border style**, **Corner radius**, **Font size**, **Font weight** and **Letter spacing**.

## Preview and save

The **Live preview** on the right shows sample text, a themed link, every button style (*Primary*, *Secondary*, *Outline*, *Ghost*, *Danger*), status colours and a product card as you change things. Select **Save theme** to apply it to your store, or **Cancel**. **Reset to defaults** restores the starting values.

> [!TIP]
> Start with one strong **Primary** colour from your logo, keep backgrounds light and text dark, and check that white text on your primary colour is easy to read. Good contrast sells more than any number of colours.

## The quick way: a ready-made theme

**Theme → Theme Library** applies a complete theme — colours, buttons and custom CSS — in one click. See [Theme library](https://www.nijeesweb.com/docs/ecommerce/design/theme-library). Your site's **font** can also be set in **Settings → Branding**.