Template guide
Make Onyx Atelier yours.
Everything you need to edit the content, colours, projects and motion. Most changes take a few minutes and need no code.
Version 1.0
Built for Framer · Desktop, tablet and phone
1. Start here
Onyx Atelier is a dark, image-led template for architecture studios, interior practices and other design-led firms. It has a home page, a project page driven by the CMS, a 404 page and this guide. It also includes a Day / Night switch in the header.
Remix the template, then publish once so you can test it on a real URL.
Replace the content in this order: site settings, projects, home page sections, footer.
Delete this guide page before you connect your domain. Nothing links to it except the footer link labelled “Template guide”, which you should delete too.
2. Pages
Home (/) — every section of the studio site. Each section has a scroll ID (work, studio, process, faq, contact) that the menu and footer link to.
Project (/work/:Projects) — one page per item in the Projects collection.
404 (/404) — shown for any address that doesn’t exist.
Guide (/guide) — this page. It is hidden from search engines.
3. Edit projects
Open CMS → Projects. Each project has a title, index (01 / 04), year, location, typology, area, status, cover image, summary, body text, a gallery list and a photography credit. The project page, its browser title and its share image update automatically.
Add a project to the home page
The four plates in Selected Work are designed by hand so each one can stack and scale on scroll. To add a fifth, duplicate a Plate Row, change the image, title and meta in the Project Plate controls, and set the row’s link to the new project.
4. Colours and Day / Night
Night is the default for every visitor. The header switch turns on Day, and the browser remembers the choice.
Night colours are the colour styles in Assets → Colors. Change them there as usual.
Day colours live in Site Settings → General → Custom Code → Start of <head>. Each line redefines one colour style for Day mode. If you change a colour style, change its Day value there as well.
To make Day the default, change “dark” to “light” in the first line of that script.
To remove the switch, delete the Theme Toggle inside the Navigation component and delete the custom code.
Keep photos dark in Day mode
Sections that sit on photography use the code override withNightTone, so their text stays light on the image in both modes. If you build a new photo section, select it, open Code Overrides in the right panel and choose OnyxTheme → withNightTone. You only see Day mode on the published site or in Preview, not on the canvas.
5. Type
Bodoni Moda for display, Hanken Grotesk for text and Fragment Mono for labels. All three are free Google Fonts. Every text on the site uses a text style (Display, Heading, Body, Mono and Prose), so changing a style updates the whole site.
6. Motion and code
OnyxLoader — the opening counter. Select Loader in the Main Layout to change the brand name, caption, duration and Once / Session.
OnyxHeroScroll — the hero window that opens on scroll.
OnyxHorizontalScroll — the sideways Tactile Monographs strip.
OnyxReveal, OnyxPhases, OnyxCounter — image reveals, the Process steps and the counting numbers.
OnyxTheme — the Day / Night switch and the photo overrides.
All motion respects the visitor’s Reduce Motion setting.
7. Forms
The contact form and the newsletter field use Framer forms. Select a form and set where submissions go (email, Google Sheets or a webhook) in the right panel. The contact button has Sending, Sent and Error states that switch automatically.
8. Before you publish
Site Settings → General: title, description, favicon and social image.
Replace every photo with your own, or with images you have the rights to use. Preview photos are placeholders.
Replace the studio name, addresses, phone and email in the navigation menu and the footer.
Point the social links to your own profiles.
Test the contact form on the published site.
9. Support
For questions about this template, contact the creator through its Framer Marketplace page.