Source: dev-uiux-design/references/design-trends.md
Dated Design Trends
This skill uses three layers, each with one job:
- Isms —
design-isms.md owns visual and aesthetic direction.
- Compositional patterns —
compositional-patterns.md owns reusable hero, layout, navigation, motion, continuation, and content-structure families, including their canonical frequency, maturity, gates, and examples.
- Dated trends — this file owns time-stamped axis prevalence and implementation-sensitive signals that may change on a later crawl.
Do not promote a dated signal into an ism or duplicate a compositional-pattern count here. Use design-award-sources.md for source selection and domain/type retrieval.
Axis-frequency snapshot
observed_at: 2026-07-14
corpus: 45 live sites / 8 galleries
interpretation: Rows on one axis may overlap and do not sum to 45. These are design-prior observations, not market-share estimates. Pattern-family rows are omitted and linked in the final row of each relevant table.
Hero composition
Aggregate finding: 30/45 heroes are primarily a stage, proof object, poster, or entry state rather than a conventional headline-copy-button block.
| Axis value without a pattern home | Count | Galleries | Status | Retrieval note |
|---|
| Full-viewport cinematic/media stage | 18/45 | 8 | Established | Axis value; do not equate fullscreen with a viewport lock |
| Type-led/editorial hero | 15/45 | 8 | Established | Combine Editorial parent with the actual hero pattern/trait |
| Image/video overlay hero | 6/45 | 5 | Established | Media-overlay composition, not automatically Liquid Glass |
| Utility-overlay hero | 3/45 | 3 | Established | Axis row only; mixed examples, no normalized family recipe |
| Pattern-family homes | — | — | Cross-link only | See compositional-patterns.md Hero Patterns; do not copy their counts here |
Motion approach
| Axis value without a pattern-count home | Count | Galleries | Status | Retrieval note |
|---|
| Scroll-linked reveal/transform/choreography | 27/45 | 8 | Established | Umbrella row; includes transformed-scroll and native-document choreography |
| Persistent video/canvas/WebGL atmosphere | 17/45 | 7 | Established | Atmosphere is a role, not permission for unbounded media |
| Hover/pointer-reactive reveal | 8/45 | 6 | Established | Requires keyboard/touch-visible alternatives |
| Kinetic/character-level typography | 8/45 | 6 | Established | Retrieval alias kinetic-type; pattern selection remains separate |
| Ambient continuous motion | 5/45 | 4 | Established | Retrieval alias ambient-continuous; honor reduced motion |
| Carousel/index transition | 5/45 | 5 | Established | Axis value; use an existing content/navigation family when it matches |
| Low-motion/static editorial reading | 4/45 | 4 | Established | A valid deliberate motion stance, not an absence of design |
| Interaction-state/product-demo motion | 4/45 | 4 | Established | Motion must communicate product state |
| Pattern-family homes | — | — | Cross-link only | See compositional-patterns.md Motion Patterns; do not copy their counts here |
Navigation pattern
| Axis value without a pattern-count home | Count | Galleries | Status | Retrieval note |
|---|
| Conventional/full-width top bar | 10/45 | 6 | Established | Common in product and B2B landing surfaces |
| Hidden or no conventional navigation | 9/45 | 5 | Established | Less chrome must retain orientation and alternate routes |
| Hamburger/overlay menu | 7/45 | 5 | Established | Often paired with persistent utility controls |
| Floating pill/capsule navigation | 5/45 | 5 | Established | A geometry, not permission for detached pill slop |
| Side-rail/vertical typographic navigation | 3/45 | 3 | Established | Axis value; Edge-Rail is a full family only when its recipe matches |
| Split/balanced navigation around center mark | 3/45 | 3 | Established | Preserve predictable keyboard and mobile order |
| Pattern-family homes | — | — | Cross-link only | See compositional-patterns.md Navigation Patterns; do not copy their counts here |
Typography stance
| Axis value | Count | Galleries | Status | Retrieval note |
|---|
| Oversized type used as spatial architecture | 20/45 | 8 | Established | Display behavior: scale, crop, orientation, fragmentation |
| Custom/brand display face | 19/45 | 8 | Established | Authored identity, not a substitute for hierarchy |
| Grotesk/sans-led system | 18/45 | 8 | Established | Often one family spans heading and body |
| Editorial serif + neutral sans/mono contrast | 8/45 | 6 | Established | Three-role contrast, not “make everything serif” |
| Mono/technical utility layer | 7/45 | 6 | Established | Use for real metadata, never fake diagnostics |
| Condensed/display typography | 5/45 | 4 | Established | Verify localization and narrow-width legibility |
| Kinetic/specimen typography | 4/45 | 4 | Established | Axis stance; see relevant pattern family without copying its count |
| Tiny microtype framing large media/type | 7/45 | 5 | Established | Must still meet readability and target requirements |
Color mode
| Axis value | Count | Galleries | Status | Retrieval note |
|---|
| Dark/near-black primary | 19/45 | 8 | Established | Often supports media or white type |
| Light/warm-neutral primary | 16/45 | 8 | Established | White, ivory, warm paper, or pale cool neutral |
| Constrained palette (two hue families or fewer) | 36/45 | 8 | Established | Strongest overall color finding |
| Monochrome/near-monochrome | 15/45 | 7 | Established | Includes black/white, greyscale, and one-hue tonal fields |
| Single saturated brand field | 6/45 | 4 | Established | Use the single-saturated-field palette modifier |
| Media/material supplies the accent | 11/45 | 7 | Established | Neutral chrome plus real media/material |
| Mixed dark/light chaptering | 6/45 | 5 | Established | Palette changes can mark narrative state |
| Pastel/editorial warmth | 5/45 | 4 | Established | A color mode, not automatically an ism |
| Multi-color/gradient-led | 2/45 | 2 | Local signal | Rare in this winner sample |
Layout structure
| Axis value | Count | Galleries | Status | Retrieval note |
|---|
| Linear long-scroll chapters | 22/45 | 8 | Established | Narrative sequence, not interchangeable section stacks |
| Fullscreen/viewport-locked scene sequence | 13/45 | 6 | Established | Requires direct controls and a linear fallback |
| Editorial/index/list structure | 10/45 | 7 | Established | Axis row; see Editorial Index / Roster without copying its count |
| Full-bleed media chapters | 10/45 | 7 | Established | Media fields reset rhythm |
| Rigid/modular technical grid | 6/45 | 5 | Established | Structure must express real technical content |
| Asymmetric/offset composition | 6/45 | 5 | Established | Offset, edge rails, anchors, and negative-space imbalance |
| Conversion/persuasion sequence | 7/45 | 4 | Established | Most visible in landing/product galleries |
| Single-screen utility/canvas | 7/45 | 4 | Established | Preserve core task access and responsive behavior |
| Repeated project/archive rows | 5/45 | 4 | Established | Sequence and metadata replace generic cards |
| Bento grid | 1/45 | 1 | Local signal | Common taxonomy label, locally observed once in this corpus |
| Horizontal/spatial browsing | 3/45 | 2 | Established | Meets threshold narrowly; requires accessibility/mobile gates |
Technique-level trend signals
These rows track implementation-sensitive signals, not reusable pattern-family frequency. not separately coded means the 2026-07-14 synthesis named the technique but did not provide an independent count or gallery mix; a future crawl must code it before threshold-based promotion.
<!-- SIGNAL_ROWS_START -->
| Signal | observed_at | Gallery mix | Count | Maturity | Accessibility / performance risk |
|---|
| Fixed-canvas WebGL implementation wave | 2026-07-14 | see family | see family | see family | Scroll capture, vestibular load, keyboard/assistive-tech exclusion, GPU/battery cost. Count/gallery/maturity are canonical at compositional-patterns.md § Fixed-Canvas Wheel Navigation; this row tracks only the WebGL implementation technique and its risks |
| Cinematic WebGL intros | 2026-07-14 | not separately coded | not separately coded | Signature pending recode | Delayed access, heavy startup transfer, no skip/pause, reduced-motion failure, LCP/interaction cost |
| Adaptive overlay chrome technique | 2026-07-14 | see family | see family | see family | Contrast flicker across media, state desynchronization, compositing cost. Count/gallery/maturity are canonical at compositional-patterns.md § Adaptive Overlay Chrome; this row tracks only the tone-adaptation technique and its risks |
| Fluorescent single-color fields | 2026-07-14 | 4 galleries | 6/45 | Emerging | Contrast, glare, one-note theming, OLED energy; count uses the broader coded single saturated brand field axis and must be narrowed on re-crawl |
| Soft-focus future-health imagery | 2026-07-14 | not separately coded | not separately coded | Signature pending recode | Stock-image sameness, low text contrast, large media transfer, meaning lost without imagery; cross-link only when compositional-patterns.md Atmospheric Product Portrait fully matches |
<!-- SIGNAL_ROWS_END -->
Signature ledger
Signatures stay examples beneath a parent family until independent evidence clears promotion thresholds.
| Signature | observed_at | Parent family | Disposition |
|---|
| Vero color-adaptive CTA | 2026-07-14 | Adaptive Overlay Chrome | Keep as a contrast-adaptation example; no standalone vocabulary |
| Benjamin Hoang media slit | 2026-07-14 | Poster Hero / Edge-Rail Navigation Frame | Keep as a thin-aperture composition example |
| RISK accelerated virtual offset | 2026-07-14 | Fixed-Canvas Wheel Navigation | Keep as an implementation signature |
| Don't Board Me ball gate | 2026-07-14 | Experiential Gate Hero | Keep as an entry-interaction example |
- Signature → Emerging: require independently coded evidence from 3+ sites across 2+ galleries, a reusable definition, and named accessibility/performance risks. A gallery label alone is not evidence.
- Emerging → Core: require persistence across later crawls and source mixes, usefulness independent of a transient rendering technology, and stable gates/fallbacks. Clearing one crawl's numeric threshold is necessary but not sufficient.
- Core retention or demotion: if later evidence no longer persists or the apparent family collapses into a technology-specific signature, retain the dated record and demote current guidance rather than rewriting history.
Pattern-family promotion is applied in compositional-patterns.md; this file records the dated evidence and proposed transition only.
Re-crawl protocol
- Freeze the source list: record crawl date, corpus size, gallery names, per-gallery sample counts, and selection bias notes in
design-award-sources.md-compatible form.
- Recode every site per axis: independently code hero composition, motion approach, navigation pattern, typography stance, color mode, and layout structure. Add explicit technique fields for every signal whose current count says
not separately coded.
- Aggregate without flattening: count sites and distinct galleries per axis value and technique; preserve overlap and do not force an axis to sum to corpus size.
- Re-check thresholds: test each candidate against 3+ sites / 2+ galleries, then evaluate persistence, source concentration, accessibility/performance risk, and technology dependence.
- Apply maturity transitions: record Signature→Emerging, Emerging→Core, retention, or demotion with old and new dates/counts. Update this dated snapshot or append a newly dated snapshot; never silently replace prior evidence.
- Synchronize authorities: pattern-level transitions update
compositional-patterns.md; aesthetic implications update design-isms.md only when they are genuinely visual lineages; this file retains the dated technique evidence and cross-links.