### Channels — Templates & Design

**Template categories**: `layout` (page wrapper with `{{ content_for_layout }}`), `custom_snippet` (reusable via `{% snippet 'name' %}`), `system_snippet` (built-in head/header/footer — editable, NOT deletable), `stylesheet`/`javascript` (static CDN assets).

**System snippets**: ALWAYS customize `header`/`footer` via `channels-templates-upsert` with `category: "system_snippet"`. NEVER create custom_snippets for the same purpose.

**Snippet naming convention**: Use `_css` or `_js` suffix when snippet content is exclusively CSS or JavaScript (e.g. `my_widget_css`, `analytics_js`). For HTML/Liquid snippets — including system_snippets like `header`, `footer`, `head` — use no suffix.

**Layout HTML structure**: Use `{% html5 %}/{% endhtml5 %}` and `{% body %}/{% endbody %}` block tags — NEVER `{{ html5.open_tag }}`/`{{ html5.close_tag }}`. Include `{% snippet 'shared/general/body_tag_manager' %}` right after `{% body %}`.

**Snippet path derivation**: To reference a snippet via `{% snippet 'path' %}`, derive the path from the template's `path` field (from `channels-templates-find`): (1) remove the `site/` prefix, (2) remove the leading `_` and `.html.liquid` suffix from the filename. Example: `site/shared/general/_head.html.liquid` → `shared/general/head`. NEVER guess snippet paths.

**CSS token-first approach**: Read `root.css` first (Bootstrap design tokens). Override `-rgb` tokens only (`--bs-primary-rgb`, etc.). Use `base.css` for custom rules. Never use hex values directly — use `rgb(var(--bs-*-rgb))`. Prefer Bootstrap utility classes in HTML.

**CSS inclusion**: Stylesheet templates (`root.css`, `base.css`) are static CDN assets — include them in the `head` system_snippet via `{{ 'root' | asset_url: 'css' | stylesheet_tag: media: 'screen', nonce: csp_nonce }}`. NEVER use `{% stylesheet 'name' %}` in layouts — that tag does not exist in Modyo Liquid.

**New site structure**: A freshly created site already has a home page (type `home_layout_page`, path `''`) and an about page (path `'about'`), system_snippets (`head`, `header`, `footer`, etc.), and empty `root.css`/`base.css`. Customize them — do NOT recreate. New widget pages auto-use `site/base` layout; update to custom layout via `channels-pages-widget layout` param.

### Channels — Page Content Strategy

- **Widget Definitions**: Interactive components, business logic, JS, or reusable across pages. Create → publish → reference via `nameOrUuid`.
- **Content Pages**: Pages that primarily display entries from a content type (listings, indexes).
- **HTML Blocks**: Simple static content only (banners, CTAs). <30 lines; if larger, use a widget.

### Channels — Liquid Quick Reference

**Navigation**: `{% for item in menus['slug'].visible_items %}` → `item.label`, `item.url`, `item.child_items`
**Session**: `{% if user %}` (NOT `user.logged_in`). Props: `user.name`, `user.email`, `user.avatar.url`. URLs: `{{ site.url }}/login`, `{{ site.url }}/logout`.
**Search**: `<form action="{{ site.url }}/search" method="get"><input name="query"></form>`