> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wpbevel.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Rules and looks

> The house rules the server enforces and the twenty looks a page can be built to.

## The rules are the product

An element tree is valid when Elementor accepts it. It is good when it follows the rules a designer would. The server enforces the second kind.

### Hard rules (rejected on save)

* Header navigation is the `bvl-nav-menu` widget beside `bvl-site-logo`, never icon lists, headings or button rows.
* No `flex_wrap: "wrap"`. Stack with `flex_direction_mobile: "column"` or a grid container.
* No `html`, `shortcode`, `price-table` or `menu-anchor` widgets.
* Testimonial cards are a card container holding a rating, a text editor with the review, and an icon box holding only the reviewer.
* Image marquees need real images.
* Three centred-intro card grids in a row.
* A hero with no visual device: no photo pane, cover photo, animated background or composed product UI.
* A single-post template without the post body; an archive without a posts loop; a product template without the add-to-cart widget; a product archive without the products grid.

### Repairs (fixed on save, reported)

Mobile twins for inline icon positions, button hover colours, 1.3em line-heights on sized titles, inner padding on containers that paint a surface, zero padding on plain layout containers, `text_align` on icon boxes and `align` on buttons from their siblings, the light logo variant on dark surfaces, frosted-glass sticky surfaces on transparent headers, chip widths on phones, split panes around bare photos with 50/30/20 gaps, photo heights capped in card grids, image crops to the declared box, the closing band moved off the footer's colour, faint labels re-bound for contrast, unknown icon names resolved or replaced, retired fonts swapped for one the site has.

### Notes (reported, not changed)

Two card grids back to back, every intro centred, a repeated band device, a second animated band, an unused signature widget.

## Looks

A look is the page-level design DNA every band inherits: intro alignment, card treatment, corner radius, eyebrow and icon style, band density, h2 scale, button shape. The site gets one seeded from its address; the assistant sets another once with `update_design_system {look}` when the brief wants it.

| Look      | Intros | Cards          | Radius | Fit                        |
| --------- | ------ | -------------- | ------ | -------------------------- |
| classic   | centre | soft shadow    | 16     | friendly local trust       |
| editorial | left   | hairline rules | 0      | studio, magazine           |
| soft      | centre | tinted         | 24     | wellness, food, kids       |
| bold      | left   | flat           | 4      | trades, sport              |
| minimal   | centre | none           | 10     | architects, one product    |
| luxe      | centre | none           | 2      | luxury, jewellery, hotels  |
| boutique  | centre | tinted         | 18     | tasteful shops, salons     |
| gallery   | centre | none           | 0      | photographers, galleries   |
| playful   | centre | chunky shadow  | 28     | kids, camps, pets          |
| retro     | centre | flat           | 12     | diners, barbers, heritage  |
| organic   | left   | tinted         | 20     | garden, eco, warm food     |
| craft     | left   | hairline rules | 8      | artisans, makers           |
| corporate | centre | flat           | 8      | B2B, finance, insurance    |
| civic     | centre | flat           | 10     | non-profits, education     |
| friendly  | left   | soft shadow    | 16     | polished local services    |
| sharp     | centre | flat           | 2      | consultancies, legal       |
| tech      | left   | flat           | 6      | SaaS, developer tools      |
| dense     | left   | flat           | 6      | data-heavy, marketplaces   |
| relaxed   | left   | none           | 14     | coaches, therapists        |
| brutalist | left   | flat           | 0      | statement agencies, events |

The twenty-first, `reference`, means the brief carries a reference design and the assistant extracts that design's own tokens instead.

## Variety

Beyond the look, the server reads the page's shape and asks for variety: a hero with a device, band shapes that alternate down the page (split, numbered rows, stats bar, spotlight quote, timeline, grid), a share of left-aligned intros, one animated background per page, one or two signature widgets where the content is shaped for them, never sprinkled.

## The optional page generator

`build_page` composes a whole page from a plan of section types, applies the look and every rule, and saves it. It is off by default because a tree the assistant writes itself makes a better page. The `bevel_mcp_features` filter turns it on:

```php theme={null}
add_filter( 'bevel_mcp_features', fn( $f ) => array_merge( $f, [ 'plan_build' => true ] ) );
```