Atelier Noire is a HubSpot CMS theme built specifically for studios and brands that lead with atmosphere. Interior design firms, architecture practices, creative agencies, and luxury brands often need a website that communicates restraint, craft, and intention from the first scroll. That is the design brief Atelier Noire was made to answer.
Available on the HubSpot Marketplace and detailed further on the Studio Nope product page, the theme ships with 19 page templates, 25 drag-and-drop modules, full color control through theme settings, a GSAP animation system, and built-in documentation. This article walks through what each of those pieces means in practice.
Atelier Noire is a single theme with full color control through theme settings. Out of the box, it comes configured with a dark palette: near-black background at #0b0b0b, warm gold accents at #d4a853, and off-white text at #f2ede8. The result is a palette that reads as considered and editorial rather than simply dark. The gold accent carries warmth and keeps the contrast from feeling cold.
If you prefer a lighter direction, the theme settings let you switch to a warm off-white background at #f5f1ec, a deeper gold at #b8942e, and dark brown text at #1a1715. Or you can set your own colors entirely. The typographic system, layout structures, and animation behaviors stay the same regardless of which color direction you take.
The type pairing in Atelier Noire was chosen to reflect the studios it serves. Cormorant Garamond handles all headings. It is a high-contrast serif with roots in classical French typography, and it carries the kind of editorial weight that works well for portfolio headers, project titles, and section introductions. DM Sans handles body copy. It is a geometric sans-serif that reads cleanly at small sizes and does not compete with the headings for attention.
Typography across the theme is implemented using fluid clamp() functions rather than fixed pixel sizes or breakpoint-based overrides. This means type scales smoothly between viewport sizes rather than jumping between defined breakpoints. Headlines, subheadings, body text, and captions all respond continuously to the available screen width, which keeps layouts proportional across devices without the need for manual size adjustments at each breakpoint.
Atelier Noire uses GSAP with the ScrollTrigger plugin as its primary animation engine. Animations are controlled through data attributes on HTML elements, which means content editors can apply and adjust animation behavior directly in the HubSpot page editor without writing any JavaScript.
The available reveal styles cover the range of motion patterns useful for editorial and portfolio work:
Beyond entrance animations, the system also includes parallax scrolling for layered depth on hero sections and image backgrounds, scroll-triggered counters for stats and numbers, and text splitting that can animate individual characters or words rather than whole blocks of text. All of these behaviors are triggered through scroll position using IntersectionObserver for the lighter reveal logic and ScrollTrigger for the more complex sequenced animations.
The theme also includes two important safeguards. First, it fully respects the prefers-reduced-motion media query. Users who have set their operating system to reduce motion will see no GSAP animations, and the layouts remain fully functional and visually complete without them. Second, the theme includes a CSS fallback that activates if GSAP fails to load within four seconds. In that case, elements that would have animated are simply displayed in their final visible state. The site never shows a blank or broken layout while waiting for a script.
Atelier Noire includes 19 page templates covering the full range of pages a studio or agency website typically requires. The template list includes:
The headerless and footerless variants are particularly useful for paid campaigns where removing navigation reduces distraction and keeps visitors focused on a single conversion action.
Every layout section in Atelier Noire is built as a configurable drag-and-drop module. There are 25 modules in total, and they cover both structural page needs and the more specialized content types that creative studio websites require. Here is a rundown of what each module handles:
Carousels and sliders across the theme are powered by Swiper 11, which provides touch and drag support for mobile users and smooth rendering across devices.
Atelier Noire includes a full documentation SPA built directly into the theme. It contains 33 articles organized across 8 categories. This is not external documentation that links away to a separate site. It renders inside the Documentation page template as an interactive single-page application, meaning it can be published to a HubSpot site and browsed without page reloads between articles.
For studios managing their own site or handing off to a client team, having setup guides, module references, and configuration instructions accessible from within the theme itself reduces the friction of getting started and managing ongoing updates. The documentation covers the animation system, theme settings, module usage, and template structure.
The theme is designed around a specific type of client and site. It suits studios and firms where the work itself is the product and the website needs to present that work without visual clutter or generic page layouts. Interior design studios benefit from the image-forward modules, the parallax behaviors, and the Before After slider for renovation comparisons. Architecture firms get structured project detail templates and editorial grids suited to photography-heavy case studies. Creative agencies can use the full portfolio and service template stack to communicate positioning and process. Luxury brands find the dark palette and serif typography consistent with the level of craft their audience expects.
That said, the theme's structure is general enough that any business wanting a polished, content-rich HubSpot website will find the template and module set covers most page types they need.
Atelier Noire is available through the HubSpot Marketplace. You can view it, preview it, and purchase it at the official marketplace listing. If you want to review full feature details, see template previews, and read more about the design decisions behind the theme, the Studio Nope product page has that information.
Installation follows the standard HubSpot theme process. Once installed, adjusting your theme settings, populating your modules, and publishing your first pages requires no custom code. The animation system, typography, and layout structures are all ready to use from the moment the theme is active on your portal.