Your first site

You create a website by choosing its workspace, its address, a design and a starting point. Libretto builds the pages of the starting point and opens the editor. You then set the brand once, in Brand setup, and the whole design system follows from it.

Before you start #

• You can create a website in a workspace you own (the one your access request created) or as a Super admin. Other people cannot: the workspace owner or a Super admin creates the site and assigns it to them.
• If the site uses its own fonts, upload them first (see Typography and fonts): Brand setup offers the fonts the site already has.
• Have the brand's colours as hex values (for example #1e3d4f).

Create the website #

1. Open the form in one of these ways:
   • in the sidebar, open the Website picker and choose New site;
   • in Platform > Websites, choose Add website;
   • press ⌘ K (Ctrl K on Windows and Linux), type "new site" and choose New site.
2. The form Create a website opens. Check the Workspace.
3. Type the Website name. The Site address is filled in from it, using lowercase letters, numbers and hyphens only. Below it you see the platform address the site will have, <address>--<workspace>.<platform domain>.
4. Under Website design, choose the design. There is one today, Standalone Theme.
5. Under Starting point, choose what the site starts with:
   • General starter: a neutral four-page site with navigation, typography and editable placeholder content. It is preselected.
   • Blank site: one empty home page with a minimal header and footer.
6. Choose the Main language: the language visitors see first. You can add more languages later in Site settings > Languages.
7. Leave Publish under another website (optional) on No, use its own address, unless this site lives inside another one (for example a shop at parent-address/shop/); then pick the parent and type the Path on parent website.
8. Choose Create website.

The editor opens on the new site's home page.

Set the brand #

1. In the sidebar, open Design system > Brand setup.
2. Under Colours, enter Primary, Secondary and Neutral as hex values. Each colour becomes a ramp of eleven steps; the primary stays exactly as you entered it.
3. Under Type, pick the fonts for Headings and Body text, the Scale (Compact, Balanced, Generous or Dramatic) and the Body size on desktop.
4. Under Space and corners, set the Spacing unit and the Corners: Sharp, Soft, Round or Pill.
5. Read the status line under the form. When it says Every contrast pair passes. Ready to save., choose Save brand.

The preview on the right redraws as you type: Colour ramps, Roles and contrast for light and dark, a Type specimen and Components drawn with the stylesheet this brand would save.

What you see #

• In the editor, the starting point's pages are listed in Layers and the preview shows the site with the starter's placeholder text.
• The site is a draft. Visitors see nothing until you publish (see Publish and versions).
• After Save brand, the status reads Brand saved., and every page and component uses the new colours, type and corners.

Pitfalls #

• Save anyway. For some failures the form offers Save anyway, for when you accept hard-to-read pairs. Use it only for pairs no text will sit on; the site's accessibility depends on them.
• The address is taken. Each site address must be unique in its workspace. Pick another; the address is part of the URL and is hard to change later.
• Your font is not in the list. The fonts list shows the site's fonts, then System sans-serif, System serif and System monospace. Upload or import the font first, then come back.
• Brand setup rewrites the design system. Run it at the start. Each save replaces the colour palettes, the colour roles of the light and dark themes, the text sizes, the heading and body families, the text styles, the spacing steps and the corner radii, including any you tuned by hand. Component settings and font weights stay as they are. If you change your mind, choose Undo next to Save brand right after the save.
• Only one main language. The main language decides the address without a prefix and the text shown when a translation is missing. Choose the one most visitors read.

Related #

• Your workspace
• Build a page
• Colours, space and themes
• Typography and fonts
• Site languages