Design
Everything visitors see is built in the CMS — pages, templates, header and footer, styles, scripts and animations. No theme files, no build step.
2 min readView as Markdown
On this page
In Lettern a site's design is content. Pages, the templates around them, the header and the footer are all block documents you edit in the shared block editor. Colors, type and spacing live in a design system you edit in the admin. Scripts and animations are settings on blocks, not files. People design it in the builder; developers and their agents change the same files through abilities, MCP or git.
#Where things live
| What | Where | Edited in |
|---|---|---|
| Design system — tokens, fonts, element styles, buttons, page transitions | content/design/tokens.json | Design system (tokens), the design/update ability |
| Extra CSS and JavaScript | content/design/custom.css, custom.js | The files, or the design/code ability |
| Fonts | content/design/fonts/*.woff2 | The design/fonts-import and design/fonts-upload abilities |
| Page templates (header, Page content, footer…) | content/collections/templates/*.md | Templates — opens in the block workspace |
| Components and sections | content/collections/components/*.md | Components — opens in the block workspace |
| Pages and other entries | Their collection | The shared block editor |
Templates and components are ordinary collections, so they have drafts, publishing, history, comments and the entries/* abilities like everything else.
#How a page is built
- The entry picks a template: its own choice, its collection's, or
default. - Lettern renders the template's blocks. Components inside it — the header, the footer — render in place.
- The Page content block in the template renders the entry's own blocks.
- Every block's styles become small, shared CSS classes; scripts and animations add only the JavaScript the page uses.
- The page is written to
public/as HTML — see Static builds.
#In this section
- Design system — tokens, fonts, element styles, buttons, page transitions, custom code
- Styles — CSS on any block, per screen size and state
- Templates — the frame around every page
- Components — reusable designs with properties
- Data and Repeat — show entries, menus and fields
- Interactions — state, events and actions
- Animations — appear, scroll, hover and timelines
- Static builds — how pages are published
- SEO and GEO — search engines and AI answers