@polymorphism-tech/morph-spec 4.11.0 → 4.12.0

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}