Goal driven naming conventions

Most corperate websites are about massive amounts of information. Public facing pages like marketing, interaction, information, documentation, education, and internal information and interaction points for employees. It’s fair to say that these are mostly practical. There may be some one-off immersive pages – but most things are being managed from a CMS.

Like a book, we have a big-impact book cover, the back (synopsis, praise), maybe some inner sleeve with author info, publishing info, dedication, praise, table of contents, forward, preface, introduction, the sections or chapters and the pages, glossary, index,

Let’s walk through it:

To start — there are a few ways you might see a book. It might be sitting on the featured table – prominently with the covered displayed like a poster to attract you and pull you into it’s world. But it also might be on a shelf in context with many other books and you’ll see only it’s spine. So, each of these are their own entry points. We could consider the web search result as a “spine” or a social media or text share of rich metadata the spine. These give you an opportunity to share a little of the feeling and purpose of the book (as well as a way to organize). You might have heard about the book on the radio or a podcast. You might have seen a link or something with some reference to it visually. But now that you’re looking for it – it’s a chance to connect. Is it a book about code or science fiction? It might use a visual language to connect. Is it a serious book? It might forgo any style and stick to something very sterile. Some things are flowery and bursting with images and graphics and other things let the book be it’s bound stack of papers with just a little note so you don’t get them mixed up. The people marketing them might have a clear idea of what they’re target would need to see / and might put more into that – than the real meaning of the work. There are plenting of great books that have terrible covers – so, that’s why we’re always reminded not to judge them, right?

So, the book cover — we can see that as the book’s “Home page” or main “landing page”. This is where we’re doing a few things. It seems obvious – but making sure that whatever visual language and voice people expect (the ad, the search result etc) — is tied together. People want to know they’re in the right place before they’ll give you some of their time. If your ads look totally different than your landing page – you’re having a confusing conversation for no good reason.

We can say that “the cover is the cover” and the “regular pages are the regular pages.” That would be true. But it seems useful to consider the goal of those things. The book cover can look however it wants… but it’s goal is to help you find it it and to get you to pick it up, right? That’s it’s goal. For web, that might mean — “stay on the page” and “read” and “scroll to learn more.” It’s not a “hero.” It doesn’t have to have an image. It doesn’t have to follow the landing page conventions. But it needs to accomplish it’s job. You need to know: where you are, have a shared conversation, know what this is, and if it’s something you want to spend time with. That might be about getting you excited. It might be about grabbing your attention. It might be about making you feel uncomfortable or pushing boundaries. It might be trying to stand out by being different – or blending in by being the same. If you’re not working through some process that attends to this and can be explained, then the effectiveness of your design can’t really be measured.

We can’t list out everything… but let’s just contrast the cover and your average page. What is the goal of the average book page? It’s the content. It might be tinted a bit by the marketing, but it’s the core of what you came to engage with. You don’t want distractions. You want a neutral, calm, steady place to sit with the text. You might have page numbers to help keep you aware of where you are. Maybe a chapter name. And you have some opportunities to use typefaces to carry a little of the feel. Serifs, san serifs. It’s core goal is to be readable. Hopefully you’ve got that down. A period drama might benefit from a slighly more contrast and serifs. Another subject might benefit from a more shapely sans-serif. These areas are mostly neutral so that the reader can take in the data and create their own flourishes in their imagination. But the little bit of style does create a communication / and when returning to a book that familiar type can help you lock back into to where you left off. If your constantly thinking about the font or the size or the indents, well – it’s distracting you from the true goal / and that’s not good!

Books are made up of chapters. So, there’s a distinction. But not as much as magazines. A magazine like wired might have every article styled completely differently. There might be some long-term visual language in place. There might be some (insert single release/edition/cant thinkof the name) -specific styles. And there might be article specific styles. Maybe most of the articles are a more calm setting and then there’s a few featured articles with illustrations or more avante guard direction. Of course magazines have to play the game of (hopefully) trying to deliver meaningful conversation and storytelling — with ad revenue. So, just like websites – they might have a bunch of totally unmatching “stuff” inserted in the middle. So, let’s ignore that and think about how the articles are each changing the mood and context. Like a book of stories that are all different and might have different tone and illustrations and type and layout choices. Some might follow a default neutral patter and some might have very unique creative direction – that serves the goal of the article. (I imagine that sometimes they just really want you to read that article that cost a lot more money and time to produce too!). In theory, each of these themes is there to encourage you to experience the content in a way that is best for you. This is likely measurable to some extent.

So, then – in the world of the never ending scrollable window that is the medium of a web browser, we have these slabs of page section content. Just like the articles, a way to help you engage appropriately – is to style them differently. There might be this same storytelling at the site level, page level, or even section level. A landing page might have “the hook” and then some relaxed outline or how the product they’re selling works, then some bright energetic call to action. A documentation page might have an interactive example, then an introduction, and then trickle down to more and more detail as needed (getting nerdier and nerdier). A long article might have callouts to break things up, slighlty more subdued areas just to keep things fresh bouncing from neutral to alternate neutral. And maybe there’s a reason to have a more immersive area like your friend is leaning in to tell you a secret. We don’t need to decide how those situations “look” yet. But we can decide their goal and let that lead us to practical options.

If you know us, well – you’ll know we think that the design for “Dark mode” is often because it’s “cool” and “different” — more than useful / and maybe got turned into a fad? Well, it does seem like people are adding it less. BUT if you’ve every been in bed late trying to read that last bit of an article while somone else is sleeping… you can see how some form dark mode can be very useful. Things need to be done for reasons. So, given that — when you have a section of your page with “dark” background — well, what about when everything is dark? What do the words mean then? People will often use “knock out” to describe a page section that flips from dark on light to light on dark. That’s a term that come from real life printing, where you’d have a plate (or screen or whatever printing tool) and you’d punch out the characters. That way the big block would get inked up and printed, but where the letters were – would show the paper beneath (vs trying to prink white letters on top of black) (and of course could apply to any combination of layers). So, it’s always fun to connect the meaning to real things. Why do we call things “headlines” Who knows! So, it also – just doesn’t matter too. But “knockout” sounds like a technical implementation. Maybe that’s a very real visual trick you’re using in your visual language – and it’s specific to that technique. But also – maybe the real intention is to create a different mood for that section. A mood that could be created in many different ways. And maybe the ideal way to describe and discuss this area is to give it a name that means something – more. Something that describes the goal.

So, we can look up what all the design systems and page terminology is. But before that – let’s just outline it with a fresh view. We know we have these areas where we get that chance to set the stage. That “splash” or “landing” or “Welcome” area where we can set the vibe and give people a feel for what is to come so they can decide if they’re in the right place. For big complex corperate websites, that might just be a little color flourish. Orange highlights mean your in the HR area, while blue highlights mean your in internal wiki area. For online magazines or product detail pages – this intro area might be a one-off custom layout that’s specific to this content. There might be differen types of page headers per section and even their navigation can help you understand where you are.

Then , there the neutral areas. The areas that just let you take in the content at it’s most raw. That might seem never ending so their might be some breaks in the page with blockquotes or callouts. And if sections are too long, maybe we flip to a secondary alternate neutral – just to help people with a sense of progress and time passing. We’ve made it to part 2! It’s very practical. It might be a just a slightly different paper color. Just enough. Just enough to alternate between. Then we might want to really get someone’s attention for a key point in the story.

Front cover → Homepage hero / brand moment

Big emotional impact. Primary “first impression” moment.

Theme: elevated.

Back cover → Social proof, testimonials, case studies

Summarizes value and builds trust with evidence.

Theme: elevated but calmer.

Spine → Global navigation

Persistent site identity and structure. Always visible, always orienting.

Theme: neutral.

Dust jacket → Marketing overlays, announcements

Temporary promotional or informational layer on top of the core experience.

Theme: elevated and time-bound.

Front matter → Top-level navigation & introduction zones

• Table of contents → Global navigation / main IA
• Preface → Company story / “why we exist”
• Author’s note → Founder/leadership note or vision statement
• Introduction → “What this product is and why it matters” overview pages
• List of illustrations → Product overview / feature overview pages
• List of tables → Pricing overview / plan comparison pages
• Copyright page → Footer, legal, ownership, policies
• Acknowledgements → Leadership, team, partners, contributors

All of this is mostly neutral or muted. It orients without selling hard.

Main body → Product pages, documentation, workflows

This is the CMS-driven core of the site.

• Parts → Product suites / major product categories
• Chapters → Individual product pages or major content sections
• Sections → Feature explanations or key concepts on a page
• Subsections → How-tos, implementation details, deeper dives
• Sidebars → Related links, warnings, tips, secondary information
• Callouts → “Key idea” / “Why this matters” emphasis blocks
• Figures → Diagrams, UI screenshots, charts
• Appendices → API reference, specs, detailed configuration docs

Most of this is neutral or muted for readability.

Occasional elevated moments: CTAs, key conceptual highlights.

Immersive pages: special guided stories, demos, longform launches.

Back matter → Support, legal, meta

• Glossary → Terms glossary / domain language
• Bibliography → Legal references, compliance pages, standards
• Index → Site search and filtered navigation tools
• Notes → Release notes, changelogs, version history
• About the author → Company page / leadership bios / origin story
• Colophon → Design system credits, tools used, accessibility statement

Mostly muted or neutral. Functional, referential, low emotional intensity.

neutral +

This isn’t just “default” = although, we might decide to default to it / but it’s important that it’s the calm readable default for your specific use case. On your average site, you might have a lot of neutral reading, but it’s also useful to alternate between slightly different versions of neutral to give a sense of time passing (depending). That might result in a white and then slightly darker gray (for one example) just to bounce between sections of the longer reads. Just “alternate.”

• direct
• relaxed
• scholarly
• conversational

elevated (not literally) or focused+  

Maybe there’s a better name for this. The goal being to pop and draw attention compared to neutral

• bright
• urgent
• bold
• celebratory

muted +

Something we want to make available / but subtle – as an option to read…

• gentle
• minimal
• supportive
• transitional

immersive +

This might be “dark” but the goal is to not imply color as much as how it feels (really depends on the project)

• cinematic
• intimate
• expansive
• dreamlike