Website pages
Home, about, services, pricing, contact, portfolio, case studies, team, careers, resources, events, docs and more. Each one is on this site, running.
Features
What the theme does, by the job you have.
Studio Nope Official is a HubSpot CMS theme. Website page, landing page, blog and system templates, drag-and-drop modules and reusable sections, all reading from one set of theme settings.
Build pages
Start from a template, not a blank area.
Every template is a drag-and-drop area, so the layout that ships is a starting arrangement rather than a fixed one.
ads_click
Landing pages
Webinar, ebook, free trial and conversion layouts, on a layout with no site header or footer so the page has one exit.
article
Blog
A listing template and a post template, with the post header and related articles kept as partials so both stay in step.
dns
System pages
Error pages, password prompt, search results, subscription preferences and confirmation, and the backup unsubscribe page.
drag_indicator
Modules
Banners, tabs, accordions, comparison tables, timelines, steps, pricing cards, galleries, maps, listings and the rest, each with its own fields.
dashboard_customize
Sections
Prebuilt rows you include with a context, so a hero, a stats band or an FAQ can be shared by several templates and changed in one place.
A preset is a whole look: colours, type pairing, spacing and radii together. Dark Mode, Light Mode, Midnight Blue, Warm Neutral and Forest Green each ship their own. Custom starts from a neutral base and is driven entirely by the settings.
How a preset and a setting get along
Every setting still applies on top of whichever preset is selected. Change one and it overrides that preset. Leave it alone and the preset value stands. Switching presets keeps the edits you made and drops the ones you never touched.
What switching costs you
Nothing on the pages. Presets carry no content, so moving from Warm Neutral to Forest Green changes the paint and leaves every module, field and word where it was.
Colour is a named set rather than a list of hexes scattered through the CSS: primary, secondary, accent and its hover and wash, background, text, muted, borders, overlay, and the state colours for error, success, info and warning.
Type is set per element
Heading and body fonts are picked once. H1 through H6, paragraphs, links, blockquotes, list items, inline code and code blocks each have their own size, weight, line height and letter spacing, so a heading scale can be tuned without touching body copy.
Contrast pairs stay together
Colours whose correctness is a relationship rather than a value, text against its input, border against its surface, are handled as pairs so a change to one half cannot leave the other unreadable.
The spacing scale, the rhythm between an eyebrow, a heading and its buttons, and the seam sizes between sections are all numbers in the panel, with separate mobile values.
Shape
Border radii, shadows and gradient presets are set once and read by every card, button, input and image in the theme.
Frame
Container width, side padding, header height, reading widths, hero heights and the tablet and mobile breakpoints all live in the panel as numbers you can change.
The icon library is one field. Material Symbols, Font Awesome, Phosphor, Lucide, Bootstrap, Remix, Tabler and HugeIcons are wired as webfonts, and every module uses the same icon partial, so switching library re-draws the whole site rather than one section. Heroicons and HubSpot Icons are listed but are not webfonts, so both fall back to Material Symbols.
Weight and fill
On Material Symbols the fill, stroke weight, grade and optical size axes are exposed as settings, so icons can be matched to the weight of the type rather than left at the default.
The change
Theme settings
Once, for the site
Page editor
Per page, no code
Template file
A developer
Brand colour across every page
info
One field
Not needed
Not needed
Heading and body typefaces
Font pickers
Not needed
Not needed
The whole palette and type pairing at once
Pick a preset
Not needed
Not needed
Wording inside a section
cancel
Not included
Edit the fields
cancel
Not included
Order of the sections on a page
cancel
Not included
Drag the module
cancel
Not included
A new page on an existing layout
cancel
Not included
Create from the template
cancel
Not included
Card padding, radius and shadow
info
Site-wide default
Override per module
cancel
Not included
Which header and footer render
info
Pick one
Fields on the module
cancel
Not included
Icon library for the site
One field
cancel
Not included
cancel
Not included
A section shape that does not exist yet
cancel
Not included
cancel
Not included
A new module
Theme settings
Once, for the site
- Brand colour across every page One field
- Heading and body typefaces Font pickers
- The whole palette and type pairing at once Pick a preset
- Wording inside a section cancel
- Order of the sections on a page cancel
- A new page on an existing layout cancel
- Card padding, radius and shadow Site-wide default
- Which header and footer render Pick one
- Icon library for the site One field
- A section shape that does not exist yet cancel
Page editor
Per page, no code
- Brand colour across every page Not needed
- Heading and body typefaces Not needed
- The whole palette and type pairing at once Not needed
- Wording inside a section Edit the fields
- Order of the sections on a page Drag the module
- A new page on an existing layout Create from the template
- Card padding, radius and shadow Override per module
- Which header and footer render Fields on the module
- Icon library for the site cancel
- A section shape that does not exist yet cancel
Template file
A developer
- Brand colour across every page Not needed
- Heading and body typefaces Not needed
- The whole palette and type pairing at once Not needed
- Wording inside a section cancel
- Order of the sections on a page cancel
- A new page on an existing layout cancel
- Card padding, radius and shadow cancel
- Which header and footer render cancel
- Icon library for the site cancel
- A section shape that does not exist yet A new module
Inside a module
Every row in that table is a field.
Columns, rows, the raised column and the tooltips are all editable without opening a file. The same is true of the timeline, the pricing cards and the accordion below them.
Comments that say why, not what
The partial that wires theme settings into CSS opens with the reasoning behind its own selector and what breaks without it. That is the house style: the parts that are easy to get wrong carry the explanation, and the parts that are obvious carry nothing.
A comment that says sets the padding above a line setting padding is noise. A comment that says why the padding is declared once and never again is the difference between a file you can change and a file you work around.
Partials, not copies
Header, footer, blog post header, related articles and the icon renderer are partials. The header and footer are global partials, so one edit lands on every page rather than on the page you happened to open.
A shared section is included with its heading, columns and alignment passed in as a context, so several templates use one block without any of them forking it. When the block changes, all of them change.
One source for every token
Colour, type, spacing, radius and shadow live as CSS custom properties written once from theme settings. Modules read the variables. Nothing holds its own copy, so nothing drifts out of step with the rest of the site when a setting moves.
This is also why a value typed into one module is a defect rather than a shortcut: it is the one thing on the page that will not follow the next palette change.
Chrome you can swap
Navigation and footer are theme settings. Pick the built-in one, the fuller one, or a drag-and-drop area you build yourself. None of the three requires touching a template.
No build step
Plain HubL, CSS and JavaScript in the folder you upload. Nothing compiles, nothing is minified into something you cannot read, and there is no toolchain to install before you can change a line. What you read in the file is what runs in the browser.
No. Colour, type, spacing, radius and the icon library are theme settings. They are edited in the theme editor and take effect across every page.
Yes. Every module exposes its settings as fields, so the section is edited in the page editor: heading, body, links, layout choice and colour scheme. Nothing about that opens a file.
No. A setting you have changed overrides whichever preset is selected. A setting you never touched follows the preset. Switching moves the second group and leaves the first alone.
The typefaces come from Google Fonts, and the icon library you picked comes from its own CDN. Heroicons and HubSpot Icons are not webfonts, so selecting either falls back to Material Symbols and still loads that stylesheet. The map module carries its own copy of Leaflet in the theme. jQuery is requested only when the portal is not already including it.
Yes. Once the theme is in the portal its modules appear in the module list for any drag-and-drop page in the portal, and they still read the theme settings.
Yes, and it is a page in the theme rather than a PDF: settings, modules, templates and the animation rules, all searchable in the browser.
In the theme
See how it is put together.
The product page walks the stack from tokens to templates and says where the limits are.
Templates, modules, sections and settings in one folder This site runs on it. Every page in the menu is one of the templates.
- web Website, landing page, blog and system templates
- tune Presets, colour, type and spacing in theme settings
- drag_indicator Drag-and-drop modules, each with its own fields
- code Commented HubL, CSS and JavaScript you can read
The product page lists what the theme does not do, in full.