@polymorphism-tech/morph-spec 4.12.0 → 4.13.0

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

@@ -1,171 +0,0 @@
-# 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*