---
title: "Build a company site"
description: "Build a small company site with the Payload starter, a token-driven design and an editor handover."
requested_language: hu
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/hu/next/guides/build-a-site
version: unreleased (main)
docs_index: https://docs.systhema.app/hu/next/llms.txt
---
> This page isn't translated yet. Showing English.


## Goal

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](https://docs.systhema.app/hu/next/getting-started/templates/nextjs.md); the token and component rules still apply.

## 1. Agree on the site brief

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.

```md title="site-brief.md"
# 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 order

| Page                                              | Result                                               |
| ------------------------------------------------- | ---------------------------------------------------- |
| [Setup](setup.md)                                 | A running Payload starter                            |
| [Design system](design-system.md)                 | Brand tokens, fonts and generated references         |
| [Layout and pages](layout-and-pages.md)           | Shared navigation and the first published page       |
| [Content model](content-model.md)                 | Editor-friendly fields and block choices             |
| [Components and blocks](components-and-blocks.md) | Reusable site sections built from shipped components |
| [Custom block](custom-block.md)                   | A schema, converter and preview registration         |
| [Forms and SEO](forms-and-seo.md)                 | A working enquiry flow and search metadata           |
| [Launch](launch.md)                               | A production deployment with health checks           |
| [Handover](handover.md)                           | Client accounts, roles and the Editor guide          |

## 3. Keep changes in project-owned files

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](https://docs.systhema.app/hu/next/getting-started/project-structure.md) explains the boundary.

```text title="Project-owned files used in this tutorial"
systhema.config.ts
src/payload.config.ts
src/seo-defaults.ts
src/app/(site)/template.tsx
src/blocks/CompanyNote/
src/components/
src/payload/previewClientSetup.tsx
```

## Check your work

- 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](setup.md).