# tr-new-site — Build a New Site

Source: [tr-new-site — Build a New Site](https://typeroll.com/docs/skills/tr-new-site/)

> Full site setup from scratch — settings, header/footer, homepage, inner pages and deploy.

**Triggers on:** “create a new site”, “bootstrap a site for…”, “build a site for \[client name]”

## What it does

[Section titled “What it does”](https://typeroll.com/docs/skills/tr-new-site/#what-it-does)

The AI agent runs through a complete site setup in one session:

1. Reads the current site state
2. Updates site settings (name, language, fonts, colour palette)
3. Creates the header partial (logo + navigation)
4. Creates the footer partial (contact info, social links, copyright)
5. Creates the homepage (hero + sections)
6. Creates inner pages (About, Services, Contact, etc.)
7. Gets a preview link for review
8. Deploys after your approval

## Example prompt

[Section titled “Example prompt”](https://typeroll.com/docs/skills/tr-new-site/#example-prompt)

```plaintext
Create a site for Björk & Partners — a law firm in Gothenburg.
Professional look: dark navy, gold accent, serif headings (Playfair Display),
clean sans-serif body (Inter). Pages: Start, Om oss, Tjänster, Kontakt.
Swedish. The contact page should have a form.
```

## Design conventions the AI agent follows

[Section titled “Design conventions the AI agent follows”](https://typeroll.com/docs/skills/tr-new-site/#design-conventions-the-ai-agent-follows)

* **One `<h1>` per page** — the page title. Sections use `<h2>`.
* **CSS variables for all colours and fonts** — `var(--color-primary)`, `var(--font-heading)`, etc. Never hardcoded hex values in content HTML.
* **Responsive layout** — CSS grid with `auto-fill` and `minmax()`. No fixed pixel widths.
* **Navigation in the header partial** — not duplicated in page bodies.
* **Footer in the footer partial** — not in page bodies.

## The 7 colour tokens

[Section titled “The 7 colour tokens”](https://typeroll.com/docs/skills/tr-new-site/#the-7-colour-tokens)

| Token                | Purpose                                                     |
| -------------------- | ----------------------------------------------------------- |
| `--color-primary`    | Main brand colour. Buttons, links, key highlights.          |
| `--color-secondary`  | Supporting colour. Section backgrounds, cards.              |
| `--color-accent`     | Pop colour. CTAs, hover states, badges.                     |
| `--color-background` | Page background (usually near-white or very light).         |
| `--color-surface`    | Card/panel background — slightly different from background. |
| `--color-text`       | Main body text.                                             |
| `--color-text-light` | Muted text: captions, metadata, placeholders.               |

## Tips

[Section titled “Tips”](https://typeroll.com/docs/skills/tr-new-site/#tips)

Tip

Give the AI agent a reference site or describe the “mood” (Nordic minimal, warm artisan, modern tech) and it will pick a coherent palette. You can always say “make it warmer” or “change the accent to terracotta” afterwards.

Tip

Mention the target language upfront (Swedish, English, etc.) — the AI agent sets `language` on the site and writes all copy in that language from the start.

## Related skills

[Section titled “Related skills”](https://typeroll.com/docs/skills/tr-new-site/#related-skills)

* [tr-brand](https://typeroll.com/docs/skills/tr-brand/) — refine the colour palette and typography after initial setup
* [tr-blog](https://typeroll.com/docs/skills/tr-blog/) — add a blog section
* [tr-forms](https://typeroll.com/docs/skills/tr-forms/) — add a contact or booking form