---
title: "Vocabularies"
url: https://memocore.ai/memos/6ab4a2a2af51aac421da8779
project: "Brand Styles"
tags: "design-system"
updated_at: "2026-09-25T05:41:59.521Z"
---

# 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.