> ## Documentation Index
> Fetch the complete documentation index at: https://vr-it-services-pro.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> What theme.json gives the block editor, and how to build pages with blocks.

# Block editor

# Block editor

Vara SaaS is designed to work well with Gutenberg. You can build an entire site without installing a page builder.

![Screenshot: a page built entirely with Gutenberg blocks in Vara SaaS](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro/images/screenshots/block-editor-page.png)

## What the theme gives the editor

`theme.json` supplies the block editor with the same design vocabulary the front end uses, so blocks look native to the theme rather than bolted on.

> **Color palette**
>
> Nine theme colors, available on every block that offers color controls.

> **Fonts**
>
> Inter and JetBrains Mono as global font options.

> **Type scale**
>
> Ten named sizes from `display-lg` down to `overline`.

> **Layout widths**
>
> 1280 px content width, 1440 px wide width.

## The palette

| Swatch | Matches theme setting |
| - | - |
| Primary | Primary |
| Secondary | Secondary |
| Tertiary | Tertiary |
| Background | Background |
| Surface | Surface / Card BG |
| Text | Text |
| Text Light | Muted Text |
| Border | Borders |
| Primary Muted | A soft tint of Primary |

![Screenshot: the block editor color palette showing all nine theme colors](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro/images/screenshots/block-editor-palette.png)

> [!WARNING]
>
> **The block palette and your Customizer colors are independent.** `theme.json` declares fixed palette entries for the editor. Changing your brand colors in the Customizer does **not** automatically change the palette swatches you see in the block editor — those are static values from `theme.json`.
>
> In practice: use the palette for editor convenience, and if you need the exact brand color on a block, enter the hex value directly in **Custom → Color**. To change the palette itself, edit `theme.json` in a child theme.

## Type sizes

| Token | Use |
| - | - |
| `display-lg` | Hero headlines |
| `display-md` | Page titles |
| `heading-lg` | Section headings |
| `heading-md` | Subsection headings |
| `heading-sm` | Card headings |
| `body-lg` | Lead paragraphs |
| `body-md` | Default body copy |
| `body-sm` | Secondary text |
| `caption` | Captions and footnotes |
| `overline` | Eyebrow and label text |

## Extra block features

| Feature | What it gives you |
| - | - |
| **Hero pattern** | A structured hero group under the Vara SaaS pattern category |
| **Lead paragraph style** | A larger intro style on the Paragraph block's Styles tab |
| **Wide alignment** | Blocks can span the 1440 px wide width |
| **Editor styles** | The editor canvas renders in your theme's typography |

See [Block patterns and styles](/templates/block-patterns.md).

## Building a page with blocks

**1. Create the page**

**Pages → Add New**, give it a title, and **Publish**.

**2. Leave the template on Default**

Block-built pages render inside the theme container, which is what you want for a content page. Use **Page Builder Full Width** only if you want a full-bleed canvas.

**3. Add blocks**

Use the pattern inserter for the hero, then compose the rest. Set **Template → Full width** on a Group block to span the wide layout.

**4. Style with the palette**

Apply theme colors and named type sizes rather than arbitrary values, so your pages stay consistent.

**5. Check the front end**

The editor approximates the front end, but always verify the published page.

## Blocks or builder?

Both are supported. A practical decision guide.

> **Use blocks when**
>
> You are comfortable in Gutenberg. Your content is mostly text, images, and standard sections. You want fewer plugins and faster pages.

> **Use Elementor when**
>
> You want the four imported demo layouts. Your team is used to visual builders. You need complex marketing sections like pricing tables and testimonial grids.

**Mixing is fine**

The theme detects builders per page. A marketing homepage in Elementor and documentation pages in
Gutenberg on the same site works perfectly well — each page gets the layout appropriate to how it
was built.

## Performance

Block-built pages are lighter than builder-built pages, because the theme loads almost no page-specific assets for them.

| Page type | Theme assets loaded |
| - | - |
| Elementor page | Theme chrome plus Elementor's own CSS |
| Block-built page | Theme chrome only |
| Blog index | Theme chrome plus blog styles |
| Single post | Theme chrome plus single-post styles and TOC script |

The theme's own CSS is roughly 61 KB uncompressed and compressed with gzip or brotli. There is no per-page CSS generation, and no external font request.

## Editor vs front end differences

> [!WARNING]
>
> **The editor is an approximation, not a preview.** Expect small differences:
>
> * Container and padding can shift slightly
> * Elementor's global colors do not appear in the editor if you have not visited the Customizer this session
> * Dark mode is a front-end feature — the editor always shows light
>
> Always check the published page before calling something done.

## Related

> **[Block patterns and styles](/templates/block-patterns.md)**
>
> The hero pattern and lead style.

> **[Typography reference](/customization/typography-reference.md)**
>
> The editor's type scale in full.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.