@polymorphism-tech/morph-spec 4.11.1 → 4.12.0

package/framework/standards/STANDARDS.json

@@ -1359,6 +1359,37 @@
         "*"
       ]
     },
+    {
+      "id": "frontend-design-system-design-trends",
+      "name": "design trends",
+      "path": "frontend/design-system/design-trends.md",
+      "category": "frontend",
+      "subcategory": "design-system",
+      "tags": [
+        "frontend",
+        "design-system",
+        "trends",
+        "modern"
+      ],
+      "aliases": [
+        "design trends",
+        "modern design",
+        "ui trends",
+        "visual trends",
+        "design patterns"
+      ],
+      "anchors": {
+        "layout": "#layout-patterns",
+        "effects": "#visual-effects",
+        "typography": "#typography-techniques",
+        "animation": "#animation-patterns",
+        "dark-mode": "#dark-mode-patterns-dark-first"
+      },
+      "digest": "Curated catalog of modern design techniques (2025-2026). Agents consult during UI/UX phase Step 1.3 before choosing aesthetic direction. Covers: Bento Grid, Glassmorphism, Aurora Gradients, Variable Fonts, Scroll-driven Animations, Dark-first design, domain-specific patterns.",
+      "stacks": [
+        "*"
+      ]
+    },
     {
       "id": "frontend-nextjs-app-router",
       "name": "app router",

package/framework/standards/frontend/design-system/aesthetic-direction.md

@@ -43,13 +43,13 @@ na seção `## Aesthetic Direction` usando o template no final deste standard.
 
 ### Font Pairs por Direção
 
-| Direction | Display | Body | Fonte |
-|-----------|---------|------|-------|
-| Minimal Refined | Cormorant Garamond | DM Sans | Google Fonts |
-| Editorial | Playfair Display | Source Sans 3 | Google Fonts |
-| Soft Professional | Nunito | Inter | Google Fonts |
-| Industrial | JetBrains Mono | IBM Plex Sans | Google Fonts |
-| Modern Luxury | Bodoni Moda | Sora | Google Fonts |
+| Direction | Display | Body | Variable Alternative |
+|-----------|---------|------|---------------------|
+| Minimal Refined | Cormorant Garamond | DM Sans | Cormorant Variable + DM Sans Variable |
+| Editorial | Playfair Display | Source Sans 3 | Playfair Display Variable + Source Sans 3 Variable |
+| Soft Professional | Nunito | Inter | Nunito Variable + Inter Variable |
+| Industrial | JetBrains Mono | IBM Plex Sans | JetBrains Mono Variable + IBM Plex Sans Variable |
+| Modern Luxury | Bodoni Moda | Sora | Bodoni Moda Variable + Sora Variable |
 
 ### Anti-padrões
 
@@ -192,6 +192,59 @@ Técnicas por direção para criar profundidade e caráter:
 
 ---
 
+## Modern Techniques by Direction
+
+Cross-reference with `design-trends.md` catalog. For each aesthetic direction, these are the most effective modern techniques:
+
+| Direction | Layout | Effects | Animation | Typography |
+|-----------|--------|---------|-----------|------------|
+| **Minimal Refined** | Asymmetric split, generous whitespace | Noise texture, subtle colored shadows | Entry stagger (slow), hover lift | Variable fonts (weight transitions on hover) |
+| **Editorial** | Asymmetric layouts, overlapping layers | Dramatic type shadows, kinetic backgrounds | Scroll-driven reveals, word-by-word entry | Kinetic typography, fluid clamp() sizing |
+| **Soft Professional** | Container query cards, balanced grid | Glassmorphism cards, aurora gradient backgrounds | Spring animations, gentle micro-interactions | Rounded sans variable, generous line-height |
+| **Industrial** | Dense bento grid, hard grid lines | Minimal — border-only cards, no shadows | No animation or minimal loading states | Monospace variable, condensed headings |
+| **Modern Luxury** | Overlapping layers, asymmetric hero | Gradient mesh backgrounds, perspective cards, colored shadows + lift | Parallax + hover lift, shine effect, gold/copper accents | Display italic variable, premium tracking |
+
+### Technique Pairing Rules
+
+1. **Max 3 visual effects per project** — more creates visual noise
+2. **Aurora gradients + glassmorphism** = strong pairing (both use translucency)
+3. **Noise texture + glassmorphism** = conflicting (noise reduces glass clarity)
+4. **Bento grid + container queries** = ideal pairing (responsive cells)
+5. **Scroll-driven + spring physics** = pair for dynamic feel, avoid for Industrial
+
+---
+
+## Domain Adaptation
+
+Adaptar a direção estética ao domínio do projeto. A direção define o *feel*, o domínio define os *patterns*.
+
+### SaaS Dashboard
+- **Preferred directions:** Industrial, Minimal Refined
+- **Key patterns:** Dense bento grid KPIs, skeleton loaders para data fetch, sidebar glassmorphism
+- **Avoid:** Aurora gradients (distrai de dados), kinetic typography (conflita com data density)
+
+### E-commerce / Product
+- **Preferred directions:** Modern Luxury, Soft Professional
+- **Key patterns:** Product card hover lift, CTA colored shadows, image-first asymmetric layouts
+- **Avoid:** Industrial (cold for buying), monospace fonts (breaks trust)
+
+### Landing / Marketing
+- **Preferred directions:** Editorial, Modern Luxury
+- **Key patterns:** Hero aurora gradient, scroll-driven narrative, fluid typography, overlapping layers
+- **Avoid:** Dense layouts (landing needs breathing room), Industrial (too technical)
+
+### Internal Tool / Admin
+- **Preferred directions:** Industrial, Minimal Refined
+- **Key patterns:** Compact forms, dense data tables, status chips, monospace data
+- **Avoid:** Aurora gradients, parallax, any non-functional animation
+
+### Social / Community
+- **Preferred directions:** Soft Professional, Editorial
+- **Key patterns:** Card feed layout, notification badges, avatar systems, drawer navigation
+- **Avoid:** Modern Luxury (too formal), Industrial (too cold)
+
+---
+
 ## Template de Documentação
 
 Usar no `ui-design-system.md` de cada feature (seção `## Aesthetic Direction`):

package/framework/standards/frontend/design-system/design-trends.md

@@ -0,0 +1,171 @@
+# Design Trends — Active Catalog
+
+> **Scope:** universal
+> **Layer:** 0 (always load)
+> **Keywords:** design, trends, modern, ui, visual, glassmorphism, bento, aurora, variable-font
+> **Load When:** phase-uiux
+
+Curated catalog of modern design techniques. Agents MUST consult this during Step 1.3 (Trend Research) of the UI/UX phase. Updated quarterly.
+
+---
+
+## Layout Patterns
+
+### Bento Grid
+- Grid assimétrico com cells de tamanhos variados (2x1, 1x2, 2x2 mixed)
+- Implementação: CSS Grid com `grid-template-areas` nomeadas ou `grid-auto-flow: dense`
+- Quando: dashboards, landing pages, portfolios, feature showcases
+- Ref: Apple.com product pages, Linear.app dashboard
+
+### Asymmetric Split
+- Layouts 60/40 ou 70/30 em vez de 50/50 simétrico
+- Implementação: `grid-template-columns: 1.4fr 1fr` ou `3fr 2fr`
+- Quando: hero sections, feature showcases, about pages
+
+### Overlapping Layers
+- Elementos que se sobrepõem criando profundidade (z-index composition)
+- Implementação: `position: relative` + negative margins ou CSS Grid `grid-row: 1 / -1` overlap
+- Quando: cards com imagem + texto, testimonials, feature highlights
+
+### Container Query Layouts
+- Componentes responsivos baseados no container, não no viewport
+- Implementação: `container-type: inline-size` + `@container (min-width: 400px)`
+- Quando: cards reutilizáveis, sidebar/main content, dashboards
+
+---
+
+## Visual Effects
+
+### Glassmorphism / Frosted Glass
+- `backdrop-filter: blur(12px) saturate(180%)`
+- `background: rgba(255, 255, 255, 0.15)` (light) ou `rgba(0, 0, 0, 0.25)` (dark)
+- `border: 1px solid rgba(255, 255, 255, 0.18)`
+- Quando: overlays, floating sidebars, navigation, modals, floating cards
+
+### Aurora Gradients
+- Multi-stop radial/conic gradients com animação lenta
+- `background: conic-gradient(from 0deg at 50% 50%, #0ff, #f0f, #ff0, #0ff)`
+- `animation: aurora 15s ease infinite` (rotate hue)
+- Quando: hero backgrounds, empty states, loading screens
+
+### Noise Texture
+- SVG filter com `<feTurbulence>` para textura orgânica
+- Adiciona profundidade tátil sem peso visual
+- Implementação: `filter: url(#noise)` ou CSS `background-image` com tiny SVG data URI
+- Quando: surfaces, backgrounds (especialmente Minimal Refined direction)
+
+### Gradient Mesh
+- Multiple `radial-gradient` sobrepostos em posições diferentes
+- Cria efeito de malha de cores fluida
+- Quando: backgrounds premium, Modern Luxury direction
+
+### Colored Shadows
+- `box-shadow` que usa a cor do elemento (não apenas preto/rgba)
+- `box-shadow: 0 8px 32px rgba(var(--color-primary-rgb), 0.3)`
+- Quando: CTAs, cards destacados, hover states
+
+### 3D CSS Transforms / Perspective Cards
+- `transform: perspective(1000px) rotateY(5deg)` para profundidade sutil
+- Hover: `rotateX(-2deg) rotateY(3deg) translateZ(10px)` com `transition: transform 0.4s ease`
+- `transform-style: preserve-3d` no container para depth real
+- Quando: product cards, pricing tables, feature showcases (Modern Luxury direction)
+- **Performance:** Use `will-change: transform` apenas em hover, remover após transition end
+
+---
+
+## Typography Techniques
+
+### Variable Fonts
+- `font-variation-settings` para weight, width, slant dinâmicos
+- Hover: transição suave de weight (`font-variation-settings: 'wght' 700` com transition)
+- Fontes recomendadas: Inter Variable, Plus Jakarta Sans Variable, Sora Variable, DM Sans Variable
+- Quando: headings interativos, emphasis dinâmico, responsive weight
+
+### Fluid Typography
+- `clamp()` para escala responsiva sem breakpoints
+- `font-size: clamp(1rem, 0.5rem + 2vw, 2.5rem)`
+- Quando: headings, hero text, qualquer texto que precisa escalar com viewport
+
+### Kinetic Typography
+- Texto com movimento: letter-spacing em hover, word-by-word reveal
+- `@keyframes typeReveal` com `clip-path: inset(0 100% 0 0)` por palavra
+- Quando: hero sections, landing pages (Editorial direction)
+
+---
+
+## Animation Patterns
+
+### Scroll-Driven Animations (CSS Native)
+- `animation-timeline: scroll()` — sem JavaScript
+- `animation-range: entry 0% entry 100%`
+- Performance nativa do browser, sem Intersection Observer
+- Quando: progress bars, parallax, reveal on scroll, sticky headers
+- **Browser support:** Chrome 115+, Firefox 110+ (com flag), Safari 16+ (parcial)
+
+### View Transitions API
+- `document.startViewTransition()` para page transitions
+- Transições suaves entre estados sem framework adicional
+- `::view-transition-old(root)` / `::view-transition-new(root)` para customizar
+- Quando: navegação SPA, state changes, list reordering
+
+### Spring Physics
+- `cubic-bezier(0.34, 1.56, 0.64, 1)` (bounce)
+- `cubic-bezier(0.68, -0.55, 0.265, 1.55)` (elastic)
+- Quando: button press, modal enter, toast notifications
+
+### Micro-Interactions Catalog
+
+| Interaction | Implementação | Timing |
+|-------------|--------------|--------|
+| Button press | `transform: scale(0.97)` → `scale(1)` | 150ms spring |
+| Toggle morph | `clip-path` transition entre estados | 300ms ease |
+| Skeleton shimmer | `background: linear-gradient(90deg, ...)` animado | 1.5s infinite |
+| Success checkmark | `stroke-dasharray` + `stroke-dashoffset` animation | 500ms ease |
+| Card hover lift | `translateY(-4px)` + `box-shadow` colored | 200ms decelerate |
+| Loading dots | Scale sequence com `animation-delay: 0.1s * n` | 1.4s infinite |
+| Drawer slide | `translateX(-100%)` → `translateX(0)` | 300ms decelerate |
+| Notification badge | `scale(0)` → `scale(1)` com bounce | 400ms spring |
+
+---
+
+## Dark Mode Patterns (Dark-First)
+
+### Princípios
+- Designar dark primeiro, adaptar para light (não o contrário)
+- **Elevated surfaces**: layers mais claras = mais elevadas (não apenas inverter cores)
+- **Luminance hierarchy**: usar luminância para hierarquia em vez de peso de fonte
+- Background base: `#0a0a0a` a `#121212` (não `#000000` puro — muito harsh)
+
+### Token Structure (Dark-First)
+
+```css
+:root {
+  /* Surfaces (elevation via luminance) */
+  --surface-0: #0a0a0f;        /* Base */
+  --surface-1: #12121a;        /* Cards */
+  --surface-2: #1a1a24;        /* Elevated cards, dropdowns */
+  --surface-3: #22222e;        /* Modals, popovers */
+  --surface-4: #2a2a38;        /* Hover states */
+
+  /* Text (luminance hierarchy) */
+  --text-primary: #f0f0f5;     /* 95% luminance */
+  --text-secondary: #a0a0b0;   /* 65% luminance */
+  --text-muted: #606070;       /* 40% luminance */
+}
+```
+
+---
+
+## Domain-Specific Trends
+
+| Domain | Layout | Effects | Animation | Typography |
+|--------|--------|---------|-----------|------------|
+| **SaaS Dashboard** | Bento grid, sidebar + main | Colored shadows, glassmorphism sidebar | Skeleton shimmer, data reveal | Compact sans, monospace for data |
+| **E-commerce** | Product grid, asymmetric hero | Colored shadows on CTAs, image zoom | Scroll galleries, hover lift | Display serif for brand, sans for body |
+| **Landing Page** | Full-width sections, asymmetric | Aurora gradients, noise texture | Scroll-driven reveals, kinetic type | Bold display, fluid typography |
+| **Internal Tool** | Dense tables, compact sidebar | Minimal — focus on data clarity | Loading states only | Monospace accents, compact sans |
+| **Social/Community** | Card feed, infinite scroll | Glassmorphism overlays | Notification badge, drawer slide | System fonts for speed |
+
+---
+
+*MORPH-SPEC by Polymorphism Tech — review quarterly*

package/framework/templates/context/CONTEXT.md

@@ -156,8 +156,8 @@ morph-spec detect-agents "{feature description}"
 # Initialize new feature
 morph-spec state init
 
-# Generate design system
-morph-spec generate design-system {feature}
+# Update design system (run morph-phase-uiux skill or edit manually)
+# .morph/context/design-system.md
 
 # Advance to next phase
 morph-spec phase advance {feature}