Template guide
Everything you need to change is in the right panel. Select a section on the canvas and edit its fields: text, photos, links, colours and motion speed.
01 Start here
Every page uses the Site layout, which holds the navigation and the footer. Edit them once in Assets > Layouts > Site and every page follows. Each page section is a code component: select it and its fields appear in the right panel.
02 The signature moment
Home opens with the Aperture section: the film plays through the letters of the word, and scrolling flies into the first letter until the film fills the screen. Change the Film still, the Word, the Headline and the Intro. Scroll length sets how long the moment lasts (in screen heights, 340 by default): more is slower. Zoom sets how deep it flies. With reduced motion turned on, visitors see the finished state at once.
03 Colours
The palette lives in Assets > Colours: Oyster, Pearl, Sea, Sea 2 and Nacre. Every section uses these colour styles, so changing one changes the whole site. You can also set a different colour per section in its fields.
04 Fonts
Canvas text uses the text styles in Assets (Display, Heading 2, Heading 3, Body large, Body, Label). Each has a phone size that applies under 600px. Code sections have Display font and Body font fields: type the name of any Google font, for example Syne, Karla, Inter or Fraunces.
05 Projects (CMS)
Projects live in CMS > Projects. Add one with its title, client, year, discipline, result, cover, summary and body, and it gets a card on the Work page and its own page at /work/your-project. The Selected work grid on Home is chosen by hand: open its Projects list to pick photos, titles, links and the size of each card (Normal, Tall or Wide).
06 Contact form
The form on Contact sends to the address you choose: select the form, then add your email or a webhook under Send To. The Submit button component has Sending, Sent and Error variants that show while the form sends.
07 Motion
Smooth scroll is on in the Nav fields (turn it off or change Smoothness). The intro words light up as you read, the clients marquee speeds up while you scroll (Speed and Scroll boost), and the studio photo moves at its own speed (Parallax). Headings rise in word by word.
08 Sample content
Ostra, its clients, people, addresses and figures are made up for this template. The photos are AI-generated samples. Replace them all with your own before you publish.