Skip to main content

​
Naming conventions

Clear names make the CMS easier to search, review, and maintain. They also protect public surfaces such as URLs, search results, anchor links, and image alt text. Use these conventions whenever Studio asks you to type a name, slug, ID, label, or description.

​
Quick reference

CMS itemWho sees itRecommended formatExample
Theme nameInternalBrand name in Title CaseDomino's, Superdrug
Swatch nameInternalbg_ prefix, snake_casebg_primary, bg_overlay_dark
Page display nameInternalTitle CaseHead Office, Why Work With Us
Page slugPublic URLkebab-case/head-office, /why-work-with-us
Page titlePublic search result{Page topic} | {Brand name}Head Office Roles | Superdrug
Meta descriptionPublic search resultOne or two complete sentencesDiscover careers at Superdrug Head Office in Croydon.
Section IDPublic anchor linkkebab-casehero, our-roles
Column or block labelInternal, plus CSS targetingShort, functional labelhero-cta, jobs-filter
Prefab nameInternalDescriptive Title CaseThree-up Department Cards
Template nameInternalGeneric Title CaseTwo-column Hero
Search parameter IDPublic URLkebab-casetab, view, filter
Search parameter valuePublic URLkebab-casework-with-us, grid
Upload folder pathInternalkebab-case paths/pages/head-office/hero/
Upload file nameInternalkebab-case, descriptivehero-team-photo
Asset description or alt textPublic accessibility textComplete sentenceThree colleagues laughing at a desk with a laptop open between them.

​
Naming principles

  • Describe the purpose, not the position. Use our-roles rather than section-2, because page sections move over time.
  • Use one format per surface. Slugs, Section IDs, search parameters, and upload paths should all be lowercase kebab-case.
  • Keep public names especially clean. URLs, SEO titles, meta descriptions, anchor links, and alt text can be seen by candidates and search engines.
  • Make internal names searchable. Someone should be able to find the right page, prefab, template, or upload from the CMS search bar.
  • Match upstream structures. Page slugs should match the sitemap, and upload folders should mirror page slugs where possible.

​
Pages and SEO

A page has several related naming fields. The page display name is the internal name shown in Studio. The slug is the public URL path. The page title and meta description are used in search results and link previews. Use Title Case for page display names:
  • Home
  • Head Office
  • Job Listings
  • Why Work With Us
Use lowercase kebab-case for page slugs:
  • /head-office
  • /job-listings
  • /why-work-with-us
Use / for the home page. Do not create a home page slug such as /home. For SEO, use a page title that combines the topic and brand name: 
Head Office Roles | Superdrug
About Us | Domino's UK
Careers in Hospitality | Haven
Write the meta description as one or two complete sentences. Aim for a specific, useful summary rather than a keyword list.
Studio can generate a meta description suggestion from page content, but you should still review it before publishing.

​
Sections and labels

Section IDs are used for anchor links and scroll navigation. They should be unique within the page, lowercase, and purpose-led:
  • hero
  • why-work-with-us
  • our-roles
  • testimonials
  • cta-apply
Avoid position-based IDs such as section-1, top, or bottom. They become confusing as soon as the page is reordered. Column and block labels are internal labels that help you navigate complex pages. They do not appear as visible text on the live page, but they are applied as data-cms-label attributes that developers can target in CSS overrides. Good labels describe the element’s role:
  • hero-cta
  • jobs-filter
  • benefits-card
Avoid labels that describe a temporary visual state, such as blue-button or left-column.

​
Themes and swatches

Theme names should match the brand’s preferred spelling, capitalisation, and punctuation. If a brand has more than one theme, append the variant clearly, such as Domino's - Dark. Swatches are reusable background fills, including colours and gradients. Name them with a bg_ prefix so it is clear they are intended for backgrounds:
  • bg_primary
  • bg_overlay_dark
  • bg_gradient_hero
  • bg_card_subtle
Avoid names that bake in a temporary colour, such as dominos_red, if the swatch is really serving a functional role.

​
Prefabs and templates

Name prefabs for what they are, not where they first appear. A prefab may be reused across many pages, so names such as Homepage Hero can become misleading. Good prefab names:
  • Hero with Video
  • Three-up Department Cards
  • FAQ Accordion
  • Job Listings Carousel
Template names should be generic and brand-agnostic because templates are starting points that can be used across sites:
  • Two-column Hero
  • Job Listings Grid
  • Image-left Feature Block

​
Search parameters

Search parameter button groups can drive interactive page states, such as tabs or display modes. The parameter ID and value appear in the URL, so use readable lowercase kebab-case. Use standard parameter IDs for common patterns:
Parameter IDUse
tabTabbed content
viewSwitching between display modes, such as grid or list
filterFilter selection
sortSort order
Use semantic values:
  • ?tab=work-with-us
  • ?tab=our-people
  • ?view=grid
  • ?filter=full-time
Avoid values such as btn1, value-a, or selectedTab.

​
Uploads and alt text

Upload folders are for CMS organisation. Mirror the page structure where possible so files are easy to find: 
/brand/logos/
/brand/favicons/
/brand/typefaces/
/pages/home/
/pages/head-office/
/pages/head-office/hero/
/locations/london/
Use the same slug in the upload path as the page URL. For example, assets for /head-office should live under /pages/head-office/. File names should be lowercase, descriptive, and written in kebab-case:
  • hero-team-photo
  • dominos-logo-primary
  • dominos-logo-white
  • icon-arrow-right
  • headshot-jane-doe
Avoid camera defaults, version clutter, and placeholder names such as IMG_4521, final_FINAL_v2, or image. Asset descriptions are public alt text. Write them as complete sentences that describe the image for someone who cannot see it:
  • Woman with blonde wavy hair smiles while wearing a cream blazer in front of a white brick wall.
  • Domino's red and blue logo on a white background.
  • Three colleagues laughing at a desk with a laptop open between them.
Do not start alt text with “image of” or “picture of”. Screen readers already announce that the content is an image.

​
Before publishing

Before publishing a page or reusable CMS item, check:
  • Page display names are descriptive and easy to search.
  • Public slugs, Section IDs, and search parameters use lowercase kebab-case.
  • Section IDs are unique within the page.
  • SEO titles and meta descriptions are specific to the page.
  • Uploads have descriptive filenames and useful alt text.
  • Prefabs and templates have names that will still make sense when reused.