13.01

Site Architecture

How the Visualist site is structured: what lives in the nav, how pages are organized, and the conventions that govern URLs, internal linking, and redirects.

Top navigation

The top nav is the primary wayfinding surface of the Visualist marketing site. It is not a design element. Its job is to get the right visitor to the right page as efficiently as possible. Every item in the nav earns its place by serving a distinct visitor need.

The nav has two zones. The left zone contains navigation items: logo, then Product, Solutions, Resources, and Pricing. The right zone contains conversion actions: Book a demo, Sign in, and Start free trial. The conversion actions are always visible. They do not collapse or hide at any breakpoint where the nav is shown.

On mobile, the nav collapses to a hamburger. The conversion actions (Book a demo, Start free trial) remain accessible within the mobile menu. Sign in moves to the bottom of the mobile menu.

Nav mock: click the nav items to see each dropdown
Mobile nav mock: tap the sections to expand
Visualist
Page content
Pattern

Slide-in drawer from the right. A semi-transparent scrim covers the page behind it. Tap the scrim or the close button to dismiss.

Accordions

Product, Solutions, and Resources expand inline. Only one section can be open at a time. Pricing and Sign in are flat links with no expansion.

Fixed CTAs

Start free trial and Book a demo are pinned to the bottom of the drawer at all times, regardless of scroll position within the nav. The visitor never loses access to the primary conversion actions.

Breakpoint

The hamburger replaces the desktop nav at 768px and below. The drawer width is 80vw, maximum 320px. Below 375px, the drawer is full width.

Nav structure rules
Five top-level items, fixed. Product, Solutions, Resources, Pricing, and the three conversion actions (Book a demo, Sign in, Start free trial). No new top-level items are added without Founder approval. The nav is not a content index; it is a routing layer.
Product dropdown: Platform first, then pillars. Visualist AI, Studio, and Taste memory appear at the top of the Product dropdown under a "Platform" header, in that order. Visualist AI leads because it is the primary differentiator. The three pillars (Relationships, Projects, Growth) follow, each with their features listed beneath. A thin footer row at the bottom of the dropdown carries Integrations and Changelog as cross-pillar links that do not belong under any single pillar. Pillar headers use their respective brand color (Picardy, Wolfe, Gretna) as the only color departure in the nav. Features are listed as plain text links, no descriptions.
Roadmap items are shown at reduced opacity with a "Coming soon" label. They are not hidden. Showing the roadmap builds confidence in the product direction. They are never linked.
Solutions dropdown: three sections. By field (Personal stylist, Interior designer, Wedding and event planner), By use case, By stage. No persona names (Peyton, Indigo, Emery) in the nav.
Resources dropdown: seven items, three groups, no headers. Editorial (Blog, Via Visualist, Reports), Assets (Downloads, Webinars), Learning (Knowledge Base, Visualist Academy). Groups are separated by divider lines, not labeled headers. The items are self-describing.
Pricing is a direct link, no dropdown. It is the highest-intent nav item after the conversion actions. It does not need a dropdown.
Conversion actions are always visible. Book a demo and Start free trial are present at every scroll position on desktop. They are the primary conversion mechanism of the nav and are never hidden, collapsed, or deprioritized.
Footer

The footer is a secondary navigation layer, not a design statement. It carries links that do not belong in the primary nav: legal pages, secondary product links, company information, and social channels. It is Parchment background, Roboto Mono for column labels, Roobert for links.

Footer mock
Product
Platform
Visualist AI
Studio
Taste memory
Relationships
CRM
Concierge
Bookings
Projects
Hub
Invoicing
Integrations
Pricing
Solutions
By field
Personal stylist
Interior designer
Wedding and event planner
By use case
Client management
Project delivery
Proposals and pitches
By stage
Starting out
Growing studio
Scaling up
Resources
Blog
Case studies
Reports
Knowledge Base
Visualist Academy
Company
About
Careers
Press
Changelog
Merch
Visualist
Privacy policy
Terms of service
Cookie policy
© 2026 Visualist
Instagram
LinkedIn
TikTok
Four columns. Product (platform, pillar, and feature links plus Integrations and Pricing), Solutions (by field, by use case, by stage), Resources (Blog, Via Visualist, Reports, Knowledge Base, Academy), Company (About, Careers, Press, Changelog).
Footer base. Wordmark left-aligned alongside legal links and copyright. Social channels (Instagram, LinkedIn, TikTok) right-aligned. The legal links are plain text, not styled as buttons.
No CTAs in the footer. Start free trial does not appear here. The nav handles conversion.
URL conventions
All lowercase, hyphen-separated. No underscores, no camelCase, no special characters. /personal-stylist not /PersonalStylist. No trailing slashes: /pricing not /pricing/.
Every URL is self-describing. The slug tells anyone who reads it what the page is about. There are no generic prefixes (/lp/, /p/) that strip meaning from the URL. A visitor, a developer, and a search engine should all be able to infer the page's purpose from the URL alone.
On-nav pages mirror the nav hierarchy. Product pages: /product/[pillar]/[feature]. Solutions pages: /for/[field] or /use-case/[job]. Resources: /blog/[slug], /case-studies/[slug], /reports/[slug], /resources/[slug] (lead magnets and webinars), /events/[slug] (pre- and during-event), /events/[event-name]-post (post-event).
Off-nav pages use descriptive root or category slugs. All off-nav page types (organic, paid, or campaign) use self-describing slugs. Pages with a natural content category use that directory: /offers/[slug] for special offers, /partners/[slug] for referral and partner pages. Pages without a natural category (E1, E2, E3, E4, E5, E6, E7, E8) use clean root-level slugs. The robots directive is set per page, not per directory.
Microsites live on their own domains. color.new, moodboard.new and future microsites are standalone. They are not subpaths of visualistapp.com.
Internal linking

Internal links move visitors deeper into the site and signal content relationships to search engines and AI crawlers. Every page should have a clear next step.

Every page links to at least one related page. A Feature page links to its parent Pillar page and to related Feature pages. A By field page links to relevant Use case pages and Feature pages. A Blog post links to the most relevant Product or Solutions page.
Off-nav pages link back into the main site. Every off-nav page has at least one link to a related on-nav page. The exit path from a campaign page leads deeper into the product, not to an external destination.
Anchor text is descriptive. "See how Hub works" not "click here." "Read the Boutique Economy Report" not "learn more." Descriptive anchors serve both visitors and AEO extraction.
No orphan pages. Every page on the Visualist site is reachable from at least one other page. Orphan pages do not exist in the sitemap and are not indexed.
Redirects
301 for permanent moves. When a page is renamed or restructured, the old URL redirects permanently to the new one. This preserves SEO equity. Never leave an old URL returning a 404.
Redirect chains are not acceptable. A redirects to B which redirects to C is a redirect chain. Resolve to a single hop: A redirects directly to C.
Retired campaign pages redirect to the most relevant on-nav page. A post-event page that is no longer current redirects to the Events section or the most relevant Solutions page, not to the homepage.
The sitemap is updated with every redirect. sitemap.xml reflects the current live URL structure at all times. Retired URLs are removed. New URLs are added on launch.
Global meta and SEO standards

These standards apply to every page on visualistapp.com without exception. They govern how the site appears in search results, AI-generated answers, social previews, and browser tabs. They are set globally and overridden at the page level where needed.

Favicon. The Visualist V logomark in two sizes: 32x32px (browser tab) and 180x180px (Apple touch icon). SVG format preferred for the primary favicon; PNG fallback required. The favicon uses Leather (#1F1F1F) on a transparent background. Never use the full wordmark as a favicon at small sizes.
Meta title format. Every page has a unique meta title following the pattern: [Page title] · Visualist. The separator is a middle dot (·), not a pipe or hyphen. Homepage exception: Visualist: The OS that remembers your taste. Maximum 60 characters including the brand suffix. Titles that exceed this are truncated in search results.
Meta description. Every page has a unique meta description between 140 and 160 characters. The description must summarize the page's primary value in plain language and include a natural instance of the target keyword where applicable. It is not a CTA. It does not repeat the title. It is written in Visualist's voice.
Open Graph. Every page declares: og:title, og:description, og:image, og:url, og:type. The OG title and description may differ from the meta title and description where a more social-friendly version performs better. The OG image is 1200x630px, always uses the Visualist visual identity (no placeholder images, no generic stock), and includes the Visualist wordmark. A default OG image is defined at the global level; pages with campaign-specific imagery override it.
Twitter / X card. twitter:card is set to summary_large_image globally. twitter:site is set to the Visualist Twitter handle. The Twitter image follows the same brand standards as the OG image.
Canonical URL. Every page declares a canonical URL. The canonical always uses the non-www, HTTPS version of the URL. Off-nav campaign pages that share similar content must declare their own canonical, not point to the on-nav equivalent. This prevents cannibalization.
Robots directives. On-nav pages and evergreen off-nav pages: index, follow. Time-bound campaign pages (special offers, event pages with expiry): noindex, follow after the campaign window closes. Thank-you and confirmation pages: noindex, nofollow always.
Structured data (JSON-LD). The homepage declares Organization schema with name, URL, logo, social profiles, and contact information. Product and Feature pages declare SoftwareApplication schema. Tips / How-to pages declare HowTo schema. Via Visualist case studies declare Review or CaseStudy schema. Blog posts declare Article schema with author, date, and headline. All structured data is validated before deployment.
llms.txt. Visualist maintains an llms.txt file at the root of visualistapp.com. This file describes what Visualist is, who it is for, and which pages are most authoritative, in plain language that AI systems can read directly. It is updated whenever the site structure or positioning changes significantly. Full rules in 13.11 Systems.
Hreflang. Not required at launch. To be implemented when Visualist publishes content in multiple languages.