Vocabularies

Use these names so memos of different brands read the same way. If nothing fits, write a short plain descriptive name; never force a wrong one. 1 PAGE TYPES (family [fallback]) Wording: "landing" -> home or landing-campaign; "catalog" -> category-listing; "product page" -> product-marketing (marketing site) or product-detail (store); "blog" -> blog-index or article. Marketing [home]: home, landing-campaign, product-marketing, feature, solutions, pricing, compare, customers, case-study, about, careers, contact, events, download Commerce [category-listing]: store-home, category-listing, search-results, product-detail, configurator, cart, checkout, order-confirmation, account Content [article]: blog-index, article, magazine-home, author, gallery-portfolio Docs & Support [docs-article]: docs-home, docs-article, api-reference, changelog, help-center, help-article, status App [dashboard]: login, signup, onboarding, dashboard, list-view, detail-view, settings, editor, inbox Utility [legal]: 404, maintenance, legal, sitemap, coming-soon Experimental [landing-campaign]: immersive-portfolio, campaign-microsite, webgl-experience Typical section order (use to check that nothing is missed, not as a rule): home: header, hero, proof (logos or stats), 2-6 feature sections, testimonial, CTA band, footer landing-campaign: minimal header, hero, logos or testimonial, features, CTA band, footer product-marketing: header, sub-nav, hero, highlights, scroll story or alternating rows, specs or compare, CTA band pricing: hero, plan cards, comparison table, FAQ, CTA band category-listing: breadcrumb, heading, filters, sort bar, product grid, pagination. States: filters open, no results, loading product-detail: breadcrumb, gallery, buy box, details and specs, reviews, cross-sell. States: variant selected, out of stock, added to cart cart and checkout: line items or form, order summary. States: empty, validation error article: article header, body, author, related docs-article: side nav, content, table of contents, prev/next dashboard: app shell, page heading, KPI cards, chart or table. States: empty, loading login: centered form or split screen with media 404: message, visual, links back or search 2 SECTION TYPES (variants) chrome: announcement-bar; header (simple, centered-logo, transparent-over-hero, sticky, sticky-shrink, hide-on-scroll, mega-menu, flyout); sub-nav (sticky local nav); breadcrumb; footer (sitemap-columns, minimal, big-type, newsletter); cookie-banner; chat-launcher hero: centered-text, split-media-left, split-media-right, full-bleed-image, full-bleed-video, product-render-centered, 3d-scene, scroll-sequence, carousel, kinetic-type, search-hero, form-hero, app-screenshot, collage proof: logo-cloud (grid, marquee), testimonial (single, grid, carousel, wall), stats (inline, cards, counters), press-awards, case-study-teaser features: feature-grid (2, 3, 4 cols), bento, alternating-rows, sticky-scroll-story, horizontal-gallery, tabs-feature, accordion-feature, video-feature, hotspots-tour, comparison-table, spec-sheet, timeline, integrations-grid, code-sample conversion: cta-band (simple, split, image-bg, gradient), pricing (tiers, toggle, table), newsletter, contact-form, lead-form content: rich-text, article-header, article-body, pull-quote, image-gallery, blog-grid, team-grid, faq (accordion, two-col), related, author-bio, toc-sidebar commerce: category-tiles, product-carousel, product-grid, filters (sidebar, top-bar, drawer, chips), sort-bar, pagination (numbered, load-more, infinite), pdp-gallery (thumbs, grid, carousel, sticky), buy-box, reviews, cross-sell, cart-lines, order-summary, checkout-form, promo-banner, store-locator app: app-shell (sidebar, top-bar), page-heading, kpi-cards, data-table, list, chart-panel, settings-form, empty-state, kanban, calendar experimental: preloader, intro-animation, fullscreen-canvas, draggable-gallery, cursor-media, page-transition legacy: frameset-nav, splash-enter, flash-intro, table-portal, guestbook-counter, badges-88x31 3 STYLE TAGS (typical years): signature traits Pick 1-3 for the Overview. Traits fill gaps only when the brand memo is silent. web1-text (1991-95): grey or white page, Times, blue underlined links, hr rules web1-geocities (1995-2000): tiled backgrounds, animated GIFs, marquee, counters, Comic Sans table-portal (1996-2004): fixed 640-800px tables, spacer GIFs, dense links, Verdana 10-11px, bevel buttons frames (1995-2002): nav frame + content frame flash (1998-2009): Flash intro with Skip, full-Flash sites, preloaders, sound, pixel fonts web2-glossy (2004-10): glossy gradient buttons, reflections, beta badges, big friendly type, pastel and lime skeuomorphic (2007-13): leather, linen, paper, stitching, embossed text grid-960 (2007-13): 960px 12-col grid, jQuery sliders, lightboxes metro (2010-15): flat colored tiles, Segoe, typography first flat (2013-16): flat icons, thin type, bright colors, no textures material-1 (2014-18): paper elevation shadows, FAB, Roboto, bold primaries card-ui (2015-20): flat with soft shadows, card grids, stock-photo hero, Corporate Memphis neo-brutalist (2021-): thick black borders, hard offset shadows, clashing flat colors dark-first (2019-): dark canvas by default neumorphism (2020-21): extruded soft surfaces, dual light/dark shadows, low contrast glassmorphism (2020-23): frosted panels over vivid blobs, thin light borders soft-3d (2021-23): clay 3D illustrations, pastels, large radii material-you (2021-25): dynamic tonal color, large radii y2k-revival (2021-24): chrome, iridescence, bitmap fonts, stickers aurora-gradient (2020-24): blurred mesh gradients, glow, often dark webgl-hero (2019-): interactive 3D scene in hero, scroll-driven 3D bento-grid (2023-): modular rounded tiles of mixed sizes editorial (any): big serif or grotesk headlines, generous whitespace, magazine layout ai-minimal (2023-): dark or cream canvas, one accent, Inter or Geist, soft glows, chat motifs m3-expressive (2025-): springy motion, shape morphing, bold type and color liquid-glass (2025-): refracting translucent layers, floating controls; only if the site itself shows it Reference viewport by year: 1990-97 640x480; 1997-2003 800x600; 2003-10 1024x768; 2010-16 1280 or 1366; 2016+ 1440 desktop and 390 mobile.