Build a company site
Build a small company site with the Payload starter, a token-driven design and an editor handover.
On this page
GoalLink to this section
Build a company website that the client can edit after launch. The example company, Northline, needs a home page, services, about, contact and privacy pages. Use Next.js, Tailwind CSS v4 and the Systhema Payload integration.
The tutorial starts with the Payload starter. For a site without a CMS, use the Next.js starter; the token and component rules still apply.
1. Agree on the site briefLink to this section
Record the page purpose, content owner and action before writing components. A short brief prevents a custom collection becoming a substitute for a page editor.
# Northline website
Audience: companies looking for workplace planning services.
Primary action: submit an enquiry.
Pages: Home, Services, About, Contact, Privacy.
Languages: English at launch.
Editors: the office manager edits copy; the owner approves publishing.
Content: services and team copy live in page blocks.
Design inputs: brand color, licensed fonts, logo and approved photos.
Launch: production domain, database backups and working enquiry emails.Add languages now if the brief needs them. Localizing an empty project is easier than migrating published content later.
2. Follow the tutorial in orderLink to this section
| Page | Result |
|---|---|
| Setup | A running Payload starter |
| Design system | Brand tokens, fonts and generated references |
| Layout and pages | Shared navigation and the first published page |
| Content model | Editor-friendly fields and block choices |
| Components and blocks | Reusable site sections built from shipped components |
| Custom block | A schema, converter and preview registration |
| Forms and SEO | A working enquiry flow and search metadata |
| Launch | A production deployment with health checks |
| Handover | Client accounts, roles and the Editor guide |
3. Keep changes in project-owned filesLink to this section
Your layout, config, blocks and components belong in project-owned files. The CMS routing inside (systhema) and the Payload admin route group are managed by Systhema. The project structure explains the boundary.
systhema.config.ts
src/payload.config.ts
src/seo-defaults.ts
src/app/(site)/template.tsx
src/blocks/CompanyNote/
src/components/
src/payload/previewClientSetup.tsxCheck your workLink to this section
- You have approved page purposes and a content owner.
- You know the language, form, email and deployment requirements.
- You have registry access and permission to use the supplied brand assets.
- You know which parts of the starter are managed.
Next: Set up the project.