> ## Documentation Index > Fetch the complete documentation index at: https://docs.inploi.com/llms.txt > Use this file to discover all available pages before exploring further. # Naming conventions > Best practice for naming pages, sections, assets, and other CMS items # 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 item | Who sees it | Recommended format | Example | | ----------------------------- | ---------------------------- | ------------------------------ | ---------------------------------------------------------------------- | | Theme name | Internal | Brand name in Title Case | `Domino's`, `Superdrug` | | Swatch name | Internal | `bg_` prefix, `snake_case` | `bg_primary`, `bg_overlay_dark` | | Page display name | Internal | Title Case | `Head Office`, `Why Work With Us` | | Page slug | Public URL | `kebab-case` | `/head-office`, `/why-work-with-us` | | Page title | Public search result | `{Page topic} \| {Brand name}` | `Head Office Roles \| Superdrug` | | Meta description | Public search result | One or two complete sentences | `Discover careers at Superdrug Head Office in Croydon.` | | Section ID | Public anchor link | `kebab-case` | `hero`, `our-roles` | | Column or block label | Internal, plus CSS targeting | Short, functional label | `hero-cta`, `jobs-filter` | | Prefab name | Internal | Descriptive Title Case | `Three-up Department Cards` | | Template name | Internal | Generic Title Case | `Two-column Hero` | | Search parameter ID | Public URL | `kebab-case` | `tab`, `view`, `filter` | | Search parameter value | Public URL | `kebab-case` | `work-with-us`, `grid` | | Upload folder path | Internal | `kebab-case` paths | `/pages/head-office/hero/` | | Upload file name | Internal | `kebab-case`, descriptive | `hero-team-photo` | | Asset description or alt text | Public accessibility text | Complete sentence | `Three 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: ```text theme={null} 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 ID | Use | | ------------ | ----------------------------------------------------- | | `tab` | Tabbed content | | `view` | Switching between display modes, such as grid or list | | `filter` | Filter selection | | `sort` | Sort 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: ```text theme={null} /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. ## Related articles * [CMS glossary](/studio/cms/glossary) * [Managing pages](/studio/cms/pages/managing-pages) * [The page editor](/studio/cms/pages/page-editor) * [Themes](/studio/cms/themes) * [Uploads](/studio/cms/uploads)