Web

The Visualist website is a brand surface before it is a marketing tool. Every page a visitor opens is an expression of what Visualist is and who it is for. This chapter covers the full web system: site architecture, page types, shared mechanics, and how to brief and build any page correctly.

The web as a brand surface

The website is where most people encounter Visualist for the first time, and where serious prospects go to evaluate it. It carries more brand weight than any other channel: it is always on, always accessible, and it has to work for every persona simultaneously. Getting it wrong is expensive in a way that a bad social post is not.

Brand on the web means the same things it means everywhere else in C'est La V: the right colors, the right type, the right voice, the right assets, in the right register for the surface. But the web adds a dimension the other chapters do not address: structure. How a page is built, what it is for, who it is serving, and how it converts are as much a brand decision as what it looks like. A page that is visually correct but structurally wrong still represents Visualist badly.

This chapter covers both dimensions: the brand rules that apply specifically to web surfaces, and the structural rules that govern how each type of page is built and briefed.

On-nav and off-nav

Every Visualist page is either on-nav or off-nav. This is a property of how the page exists within the site, not a category of page type. The same page type can be on-nav in one instance and off-nav in another.

On-nav

Always-on. Nav-accessible. Built for depth.

Reachable by browsing the Visualist site. A visitor can find these pages by clicking through the navigation without arriving from an external source. They are built once and maintained indefinitely. Their job is to serve any visitor at any stage of awareness, at their own pace.

Off-nav

Traffic-driven. Campaign and discovery. Built for conversion.

Not reachable by browsing the site. Visitors arrive from outside via search, paid, email, referral, social, or events. May be always-on (a Tips page that ranks organically) or time-bound (a post-event page). Built for a specific audience arriving with a specific intent.

Nav status affects how a page is built and briefed, but it does not define the page type. A By field page can be on-nav (the evergreen Solutions page) or off-nav (a paid campaign version targeting the same vertical). A Report can be linked from the Resources nav or distributed exclusively through press and email. The taxonomy defines the type. The brief specifies the nav status for that instance.

Page taxonomy

Every page Visualist builds has a type. The type defines the page's job, its structural logic, and how to brief it. Nav status is a property of a specific page instance, not of the type itself: the same type can be on-nav in one context and off-nav in another. The taxonomy below lists all types, their group, their typical nav status, and their primary job.

Ref	Page type	Group	Nav status	Primary job
Company
A0	Homepage	Company	On-nav	Brand entry point, routes visitors to Products or Solutions
A1	About	Company	On-nav	Company story, mission, team
A2	Careers	Company	On-nav	Culture-first talent page, interest capture when no roles are open
A3	Press / Newsroom	Company	On-nav	Media kit and press contact
A4	Changelog	Company	On-nav	Primary AEO source for current product state. Agent-maintained, machine-readable
A5	Merch	Company	On-nav	Tangible brand expression for the Visualist community.
Product
B1	Pillar	Product	On-nav	Orient visitors to a product pillar and its features
B2	Feature	Product	On-nav	Explain one feature in depth; earn trial consideration and AEO citation
B3	Integrations	Product	On-nav	Show tool compatibility; answer "does Visualist integrate with X"
Solutions
C1	By field	Solutions	On-nav	Identity-match a specific vertical; build brand trust with the ICP
C2	By use case	Solutions	On-nav	Show how Visualist handles a specific workflow job
C3	By stage	Solutions	On-nav	Address a studio at a specific growth stage
Sales
D1	Pricing	Sales	On-nav	Present plans and pricing; convert warm evaluators
D2	Book a demo	Sales	On-nav	Capture high-intent leads for a guided product walkthrough
D3	Special offer	Sales	Off-nav	Convert warm, incentive-responsive visitors
D4	Referral / Partner	Sales	Off-nav	Convert warm traffic with trust transferred from a partner
Discovery and acquisition
E1	Field x Use case	Discovery	Off-nav	SEO and AEO for identity-matched, problem-aware visitors
E2	Field	Discovery	Off-nav	Convert visitors arriving with a specific vertical identity
E3	Use case	Discovery	Off-nav	Convert visitors with a specific job-to-be-done
E4	Problem statement	Discovery	Off-nav	Convert pain-aware visitors
E5	Comparison	Discovery	Off-nav	Convert visitors evaluating or switching from a competitor
E6	Hero moment	Discovery	Off-nav	Brand moment and conversion for a defined campaign window
E7	Category / Best X for Y	Discovery	Off-nav	AEO and SEO for research-intent visitors
E8	Tips / How-to	Discovery	Off-nav	AEO and SEO for task-aware visitors
E9	Event	Discovery	On-nav Off-nav	Pre-event: awareness. During: lead capture. Post-event: conversion
Resources
F1	Blog / Editorial	Resources	On-nav Off-nav	SEO, community, and brand voice expression
F2	Via Visualist (case study)	Resources	On-nav Off-nav	Build trust through specific customer outcomes
F3	Report	Resources	On-nav Off-nav	Build category authority; generate press and earned media
F4	Knowledge Base	Resources	On-nav	Reduce support load; improve product adoption
F5	Visualist Academy	Resources	On-nav	Education, community, and brand authority
E10	Lead magnet / Download	Resources	On-nav Off-nav	Individual gated download (off-nav) plus /downloads hub (on-nav)
E11	Webinar	Resources	On-nav Off-nav	Individual webinar page (off-nav) plus /webinars hub (on-nav)
Product-led
G1	Product-led microsite	Product-led	Off-nav	Top-of-funnel acquisition via a standalone product experience
G2	Community directory	Product-led	Off-nav	Community directory serving the ICP; featured tier converts to Visualist
Utility
H1	Legal	Utility	On-nav	Privacy policy, Terms of service, Cookie policy. Legal compliance with minimum brand standards applied.
H2	Systems	Utility	Off-nav	sitemap.xml, robots.txt, llms.txt. Not visitor-facing. Governs crawling and AI discoverability.
H3	404 error page	Utility	Off-nav	Recovery surface, brand moment, and product demonstration. Soft icons, mini Vai prompt, recovery links.

Web-specific brand rules

The visual identity system (Chapter 05, 06, 07) and voice rules (Chapter 09) apply in full to every web surface. The following rules are additional constraints specific to the web context.

One core color per page composition. The web is not social media. Campaign pages may use a stronger color statement above the fold, but the one-core-color rule applies across the full page composition. Neutral backgrounds (Cotton, Parchment) are the default. Core colors (Picardy, Wolfe, Gretna) are for emphasis, not backgrounds.

Typography follows the marketing register. Tartuffo for display headlines (H1, large section headings). Roobert for body copy and subheadings. Roboto Mono for labels, metadata, and technical contexts. The product register (Instrument Sans throughout) does not apply to marketing pages. On the marketing site, Roobert is the primary working typeface.

Asset selection is surface-aware. Core pages can carry illustrations and photography. Campaign pages lean toward product surfaces (Simplifieds, Recordings, Translations) to show the product directly. Microsites follow their own rules. No Q1 and Q4 assets in the same composition.

Mobile-first, always. The ICP lives on their phone: between client meetings, on a jobsite, in a showroom. Every web page must be fully functional and fully persuasive on a 390px screen. If a design decision only works on desktop, it is a constraint, not a design decision.

Navigation is not a design element. The site nav is a wayfinding tool. It should not compete with the primary message of the page. On campaign pages, full site navigation is removed or reduced to avoid distracting from the conversion target.

No placeholder content in production. Unnamed projects, generic library photography, filler text, and empty states that do not reflect real product use are not acceptable on any live Visualist web page. Every piece of content on a live page must represent Visualist at its actual quality level.

How to use this chapter

For humans commissioning pages: identify which of the 22 page types applies using the taxonomy above. Read the relevant sub-chapter to understand visitor state, primary target, content structure, and required brief fields. Complete the brief format in 13.09 before handing to an executing agent. Do not ask an agent to build a page without a completed brief.

For agents building pages: this chapter defines what type of page you are building and how to approach it structurally. It does not contain product information. Before starting, load: product truth from the product overview file; tone and voice from Chapter 09; visual identity from Chapters 04 through 08; positioning from the positioning statement; ICP definition from the ICP file. Read the brief in full before starting. If a required field is missing, flag it and return the brief.

As Visualist pages go live: update the example field in each sub-chapter entry with the live URL. This chapter is the single source of truth for the web system. Keep it current.