# creative-reference

> creative-reference

- Author: Luiz Didek
- Repository: LDidek/oscar-2026-lp-v2
- Version: 20260126192205
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-07
- Source: https://github.com/LDidek/oscar-2026-lp-v2
- Web: https://mule.run/skillshub/@@LDidek/oscar-2026-lp-v2~creative-reference:20260126192205

---

---
description: creative-reference
---

# Referencia Criativa Extensiva

Este arquivo contem TODAS as possibilidades de layout, composicao, movimento e interacao da web moderna. Use como catalogo para variar seus designs.

---

## ARQUÉTIPOS DE COMPOSICAO

### Baseados em Grid
| Arquétipo | Essencia |
|-----------|----------|
| Grid Simetrico | Colunas iguais, ordem visual clara |
| Grid Assimetrico | Colunas de tamanhos diferentes, tensao visual |
| Masonry | Alturas variadas como Pinterest, densidade organica |
| Bento Box | Celulas de tamanhos variados como caixa de bento japones |
| Modular | Modulos que se repetem com variacoes |
| Broken Grid | Elementos que intencionalmente quebram a grade |
| Overlapping Grid | Elementos que transbordam suas celulas |
| Responsive Columns | Colunas que mudam dramaticamente entre breakpoints |
| Golden Ratio | Proporcoes auricas, equilibrio natural |
| Rule of Thirds | Composicao fotografica aplicada a layout |

### Baseados em Divisao
| Arquétipo | Essencia |
|-----------|----------|
| Split Vertical | Divisao 50/50 lado a lado |
| Split Horizontal | Divisao topo/base |
| Split Diagonal | Divisao em angulo |
| Split Assimetrico | Divisao 70/30 ou 60/40 |
| Split com Overlap | Divisao onde conteudos se cruzam |
| Multi-Split | Mais de 2 divisoes |
| Split Animado | Divisao que muda com scroll/interacao |
| Split Revelador | Uma parte revela a outra |

### Baseados em Camadas
| Arquétipo | Essencia |
|-----------|----------|
| Layered | Elementos empilhados em Z com profundidade |
| Glassmorphism | Camadas translucidas com blur |
| Card Stack | Cards empilhados como baralho |
| Parallax Layers | Camadas que movem em velocidades diferentes |
| Depth Blur | Camadas com desfoque progressivo |
| Shadow Depth | Sombras que criam ilusao de profundidade |
| Floating Cards | Elementos que parecem flutuar sobre fundo |
| Nested Frames | Molduras dentro de molduras |

### Baseados em Fluxo
| Arquétipo | Essencia |
|-----------|----------|
| Scroll Cinematico | Scroll como timeline de filme |
| Scroll Horizontal | Movimento lateral ao inves de vertical |
| Scroll Snap | Secoes que "travam" na tela |
| Infinite Scroll | Conteudo que parece nao ter fim |
| Scroll Storytelling | Narrativa que se desenrola com scroll |
| Scroll Triggered | Eventos que acontecem em pontos do scroll |
| Scroll Hijacking | Scroll controlado com animacoes |
| Locomotive Scroll | Scroll suavizado com inertia |

### Baseados em Foco
| Arquétipo | Essencia |
|-----------|----------|
| Hero Dominante | Hero ocupa 100vh, resto e secundario |
| Single Focus | Uma unica coisa por secao |
| Spotlight | Elemento central com tudo ao redor escurecido |
| Progressive Reveal | Foco muda conforme scroll |
| Zoom Focus | Elemento que amplia ao receber foco |
| Isolated Element | Elemento sozinho com muito espaco negativo |
| Framed Content | Conteudo enquadrado por elementos decorativos |
| Contained Center | Container central com margens generosas |

### Baseados em Movimento
| Arquétipo | Essencia |
|-----------|----------|
| Kinetic | Elementos em movimento constante |
| Reactive | Elementos que reagem a acoes do usuario |
| Ambient Motion | Movimento sutil de fundo sempre presente |
| Rhythmic | Movimento com ritmo/padrao definido |
| Organic Flow | Movimento que imita natureza (agua, vento) |
| Mechanical | Movimento preciso, como maquina |
| Chaotic | Movimento aleatorio controlado |
| Breathing | Elementos que "respiram" (expand/contract) |

### Baseados em Tipografia
| Arquétipo | Essencia |
|-----------|----------|
| Type Hero | Tipografia como elemento principal do hero |
| Editorial | Layout de revista com colunas e tipografia elaborada |
| Poster | Layout de cartaz, tipografia dramatica |
| Kinetic Type | Tipografia animada como protagonista |
| Variable Type | Fonte variavel que muda com interacao |
| Type as Image | Texto tratado como elemento visual/arte |
| Mixed Type | Multiplas fontes em contraste |
| Monospace Editorial | Tipografia monoespacada como design |

### Baseados em Midia
| Arquétipo | Essencia |
|-----------|----------|
| Photo Essay | Sequencia de fotos conta historia |
| Video Immersive | Video como fundo ou protagonista |
| Gallery Wall | Multiplas imagens como galeria de arte |
| Lookbook | Estilo de catalogo de moda |
| Documentary | Midia com legendas/contexto jornalistico |
| Collage | Multiplas midias sobrepostas |
| Before/After | Comparacao visual de estados |
| Case Study | Midia mostrando processo/resultado |

### Baseados em Interacao
| Arquétipo | Essencia |
|-----------|----------|
| Cursor Playground | Cursor e parte da experiencia |
| Drag Interface | Elementos arrastaveis |
| Reveal on Demand | Conteudo aparece com interacao |
| Gamified | Elementos de jogo na interface |
| Conversational | Interface como dialogo |
| Explorable | Usuario explora livremente |
| Quiz/Assessment | Interacao que gera resultado |
| Configurator | Usuario customiza algo visualmente |

### Baseados em Densidade
| Arquétipo | Essencia |
|-----------|----------|
| Minimal | Pouquissimos elementos, maximo respiro |
| Sparse | Elementos bem espacados |
| Balanced | Equilibrio entre cheio e vazio |
| Dense | Muita informacao organizada |
| Maximalist | Tudo, camadas, texturas, cores |
| Data Dense | Dashboard, muitos dados visiveis |
| White Space Hero | Espaco vazio como protagonista |
| Horror Vacui | Medo do vazio, tudo preenchido |

---

## CONSTRAINTS CRIATIVOS

### Midia
| Constraint | Significado |
|------------|-------------|
| Imagem Fullbleed | Imagem sangra todas as margens |
| Imagem Recortada | Clip-path ou mask na imagem |
| Imagem Duotone | Duas cores aplicadas na imagem |
| Imagem Granulada | Grain/noise adicionado |
| Imagem Saturada | Cores super vibrantes |
| Imagem Dessaturada | Preto e branco ou baixa saturacao |
| Imagem com Overlay | Camada de cor sobre imagem |
| Imagem com Gradiente | Gradiente sobre imagem |
| Imagem Blur Background | Imagem desfocada como fundo |
| Imagem Parallax | Imagem move diferente do conteudo |
| Video Loop | Video em loop como fundo |
| Video Silenciado | Video como elemento visual sem audio |
| Video Masked | Video dentro de forma/texto |
| Video Picture-in-Picture | Video pequeno flutuante |
| Lottie Animation | Animacao vetorial como elemento |
| SVG Ilustracao | Graficos vetoriais customizados |
| 3D Element | Elemento 3D renderizado (three.js) |
| Particle System | Sistema de particulas animadas |
| Canvas Background | Background gerado com canvas |
| WebGL Scene | Cena 3D completa |
| Generative Art | Arte gerada por algoritmo |
| ASCII Art | Arte feita com caracteres |

### Tipografia
| Constraint | Significado |
|------------|-------------|
| Headline >150px | Texto gigantesco em desktop |
| Headline Full Width | Texto ocupa toda a largura |
| Texto em Path | Texto segue curva ou forma |
| Texto Circular | Texto em circulo |
| Texto Ondulado | Texto com wave |
| Texto Vertical | Orientacao vertical |
| Texto Rotacionado | Texto em angulo |
| Texto Recortado | Texto com clip-path |
| Texto com Imagem | Imagem visivel atraves do texto |
| Texto com Gradiente | Gradiente aplicado ao texto |
| Texto com Stroke | Apenas contorno, sem fill |
| Texto com Sombra Colorida | Sombra vibrante |
| Texto Glitch | Efeito de erro digital |
| Texto Blur | Texto com desfoque |
| Texto Revelar | Texto aparece letra por letra |
| Texto Scramble | Letras embaralham antes de formar |
| Texto Typewriter | Efeito maquina de escrever |
| Texto Split | Letras se separam/juntam |
| Texto 3D | Perspectiva tridimensional |
| Texto Neon | Efeito de letreiro neon |
| Texto Outline | Multiplos contornos |
| Texto Variable | Fonte variavel animada |
| Mixed Weights | Pesos extremos combinados (100+900) |
| Mixed Fonts | Serif + Sans combinados |
| Lettering Custom | Tipografia desenhada para o projeto |

### Layout
| Constraint | Significado |
|------------|-------------|
| Bleed Left | Elemento sangra margem esquerda |
| Bleed Right | Elemento sangra margem direita |
| Bleed Both | Elemento sangra ambas margens |
| Bleed Top | Elemento sangra topo |
| Overlap Elements | Elementos se sobrepoem |
| Negative Margin | Margens negativas puxam elementos |
| Absolute Positioning | Elementos posicionados absolutamente |
| Fixed Element | Elemento fixo na tela |
| Sticky Element | Elemento gruda durante scroll |
| Off-Grid Element | Elemento fora do grid |
| Rotated Container | Container rotacionado |
| Skewed Section | Secao inclinada |
| Curved Section | Secao com bordas curvas |
| Diagonal Divider | Divisor diagonal entre secoes |
| Wave Divider | Divisor ondulado |
| Clip-path Section | Secao com forma recortada |
| Full Height | Secao 100vh |
| Beyond Viewport | Elemento maior que viewport |
| Scroll Horizontal | Secao com scroll lateral |
| Overflow Visible | Conteudo vaza container |
| Container Narrow | Container muito estreito centralizado |
| Container Wide | Container quase fullwidth |
| Asymmetric Padding | Padding diferentes em cada lado |
| No Padding | Zero padding, edge to edge |

### Cor
| Constraint | Significado |
|------------|-------------|
| Monocromatico | Uma cor em varios tons |
| Duocromatico | Apenas duas cores |
| Gradiente Linear | Gradiente em linha |
| Gradiente Radial | Gradiente circular |
| Gradiente Conico | Gradiente em cone |
| Gradiente Mesh | Gradiente com multiplos pontos |
| Gradiente Animado | Gradiente que muda |
| Dark Mode | Fundo escuro, texto claro |
| Light Mode | Fundo claro, texto escuro |
| High Contrast | Contraste extremo |
| Low Contrast | Contraste sutil |
| Neon Colors | Cores vibrantes neon |
| Pastel Colors | Cores suaves pastel |
| Earth Tones | Tons terrosos |
| Jewel Tones | Cores de joias |
| Color Blocking | Blocos de cor solida |
| Color Overlay | Camada de cor sobre tudo |
| Selective Color | Uma cor destaca, resto neutro |
| Inverted Colors | Cores invertidas |
| Transparent Background | Fundo transparente/blur |

### Movimento
| Constraint | Significado |
|------------|-------------|
| Fade In | Aparece suavemente |
| Fade Up | Aparece subindo |
| Fade Down | Aparece descendo |
| Fade Left | Aparece da direita |
| Fade Right | Aparece da esquerda |
| Scale In | Aparece crescendo |
| Scale Out | Aparece diminuindo |
| Rotate In | Aparece girando |
| Flip In | Aparece virando |
| Slide In | Desliza para posicao |
| Bounce | Movimento com quique |
| Elastic | Movimento elastico |
| Spring | Movimento de mola |
| Float Loop | Flutua infinitamente |
| Rotate Loop | Gira infinitamente |
| Pulse Loop | Pulsa infinitamente |
| Breathe Loop | Respira infinitamente |
| Shake | Treme |
| Wobble | Balanca |
| Swing | Balanca como pendulo |
| Rubber Band | Estica e volta |
| Morph Shape | Forma transforma em outra |
| Path Animation | Elemento segue path |
| Stagger | Elementos animam em sequencia |
| Wave Stagger | Sequencia ondulada |
| Random Delay | Delays aleatorios |
| Scroll Speed | Velocidade varia com scroll |
| Scroll Progress | Animacao baseada em % scroll |
| View Timeline | Animacao CSS nativa com scroll |
| Counter Animation | Numeros contando |
| Text Reveal | Texto revelado progressivamente |
| Draw SVG | SVG desenhado |
| Clip Reveal | Conteudo revelado com clip-path |
| Mask Reveal | Conteudo revelado com mask |

### Interacao
| Constraint | Significado |
|------------|-------------|
| Hover Scale | Cresce no hover |
| Hover Lift | Levanta no hover |
| Hover Glow | Brilha no hover |
| Hover Color | Muda cor no hover |
| Hover Reveal | Revela conteudo no hover |
| Hover Flip | Vira no hover |
| Hover Slide | Desliza no hover |
| Hover Underline | Sublinhado animado |
| Hover Fill | Preenchimento animado |
| Cursor Custom | Cursor personalizado |
| Cursor Trail | Rastro do cursor |
| Cursor Magnetic | Elementos atraidos pelo cursor |
| Cursor Repel | Elementos fogem do cursor |
| Mouse Parallax | Elementos movem com mouse |
| Mouse Tilt | Inclinacao 3D com mouse |
| Mouse Spotlight | Luz segue mouse |
| Click Ripple | Onda ao clicar |
| Click Confetti | Confete ao clicar |
| Click Sound | Som ao clicar |
| Drag Horizontal | Arrastar lateral |
| Drag Vertical | Arrastar vertical |
| Drag Free | Arrastar livre |
| Pinch Zoom | Zoom com pinch |
| Long Press | Acao ao segurar |
| Double Tap | Acao ao tocar 2x |
| Swipe Gesture | Acao ao deslizar |
| Scroll Snap | Scroll para em pontos |
| Pull to Refresh | Puxar para atualizar |
| Infinite Load | Carregar mais ao chegar ao fim |

### Efeitos Especiais
| Constraint | Significado |
|------------|-------------|
| Glassmorphism | Vidro fosco |
| Neumorphism | Relevos suaves |
| Claymorphism | Estilo argila 3D |
| Noise Texture | Textura granulada |
| Grain Overlay | Camada de grain |
| Scanlines | Linhas de TV antiga |
| Glitch Effect | Erro digital |
| VHS Effect | Efeito fita VHS |
| CRT Effect | Efeito monitor CRT |
| Halftone | Reticulado de pontos |
| Duotone | Duas cores mapeadas |
| Color Separation | Separacao RGB |
| Chromatic Aberration | Aberracao cromatica |
| Motion Blur | Desfoque de movimento |
| Depth of Field | Profundidade de campo |
| Lens Flare | Reflexo de lente |
| Light Leak | Vazamento de luz |
| Bokeh | Desfoque circular |
| Vignette | Escurecimento nas bordas |
| Film Grain | Granulado de filme |
| Poster Effect | Reducao de cores |
| Pixelate | Pixelizacao |
| ASCII Filter | Conversao para ASCII |

### Estruturas Especiais
| Constraint | Significado |
|------------|-------------|
| Carousel Standard | Carrossel tradicional |
| Carousel 3D | Carrossel com perspectiva |
| Carousel Coverflow | Estilo iTunes |
| Carousel Infinite | Loop infinito |
| Carousel Vertical | Carrossel vertical |
| Slider Before/After | Comparador arrastar |
| Tabs | Abas de navegacao |
| Accordion | Expansao/colapso |
| Modal | Janela sobreposta |
| Drawer | Painel deslizante |
| Tooltip | Dica flutuante |
| Popover | Balao informativo |
| Toast | Notificacao temporaria |
| Lightbox | Visualizador de midia |
| Mega Menu | Menu expandido grande |
| Sidebar | Barra lateral |
| Sticky Header | Cabecalho fixo |
| Floating Button | Botao flutuante (FAB) |
| Progress Bar | Barra de progresso |
| Loading Skeleton | Placeholder de carregamento |
| Masonry Gallery | Galeria masonry |
| Justified Gallery | Galeria justificada |
| Metro Tiles | Tiles estilo Metro |
| Timeline | Linha do tempo |
| Kanban | Colunas arrastáveis |
| Tree View | Visualizacao em arvore |
| Org Chart | Organograma |
| Flow Chart | Fluxograma |
| Mind Map | Mapa mental |
| Data Table | Tabela de dados |
| Dashboard | Painel de controle |
| Calendar | Calendario |
| Map | Mapa interativo |
| Chart | Grafico de dados |
| Form Wizard | Formulario em etapas |
| Pricing Table | Tabela de precos |
| Feature Comparison | Comparacao de recursos |
| Testimonial Slider | Carrossel de depoimentos |
| Team Grid | Grid de equipe |
| Portfolio Grid | Grid de portfolio |
| Blog Grid | Grid de artigos |
| Product Grid | Grid de produtos |

---

## FONT PAIRINGS CURADOS

### Serif Heading + Sans Body (Editorial/Clássico)
| Heading | Body | Vibe |
|---------|------|------|
| Playfair Display | Source Sans Pro | Elegante editorial |
| Libre Caslon Display | Libre Franklin | Jornalístico moderno |
| Libre Caslon Display | Libre Caslon Text | Clássico refinado |
| Libertinus Serif | Libertinus Sans | Acadêmico sofisticado |
| PT Serif | PT Sans | Russo neutro |
| Crimson Pro | Crimson Text | Literário tradicional |
| Crimson Text | Crimson Pro | Literário invertido |
| Merriweather | Merriweather Sans | Leitura longa |
| Source Serif 4 | Source Sans Pro | Adobe clean |
| IBM Plex Serif | IBM Plex Sans | Corporativo tech |
| Roboto Serif | Roboto | Material moderno |
| Roboto Slab | Roboto | Slab tech |
| Bespoke Serif | Bespoke Sans | Premium artesanal |
| Bespoke Slab | Bespoke Sans | Slab artesanal |
| General Serif | General Sans | Contemporâneo |
| DM Serif Display | DM Sans | Alto contraste |
| DM Serif Text | DM Sans | Display elegante |
| DM Serif Display | DM Serif Text | Serif duo |
| News Cycle | Newsreader | News editorial |
| Domine | Manrope | Tradicional + moderno |
| Aleo | Albert Sans | Friendly editorial |
| Aleo | Archivo | Jornalístico forte |
| Fraunces | Outfit | Vintage moderno |
| Lora | Varela | Suave e legível |
| Zilla Slab | Nunito Sans | Mozilla style |
| Arvo | Montserrat | Bold clássico |
| Arvo | Geist | Slab contemporâneo |
| Alegreya | Alegreya Sans | Humanista coordenado |
| Newsreader | Inter | Editorial digital |
| Quattrocento | Quattrocento Sans | Renascentista |
| Josefin Slab | Josefin Sans | Geométrico elegante |
| Noto Sans Display | Noto Serif | Global coverage |

### Sans Heading + Sans Body (Moderno/Tech)
| Heading | Body | Vibe |
|---------|------|------|
| Clash Display | Clash Grotesk | Bold tech |
| Clash Display | General Sans | Statement moderno |
| Satoshi | Inter | Clean contemporâneo |
| Sora | Geist | Futurista legível |
| Geist | Manrope | Next.js style |
| Supreme | Inter | Premium minimal |
| Spline Sans | Inter | Geométrico suave |
| Spline Sans | Geist | Soft tech |
| Unbounded | Geist | Display bold |
| Public Sans | Inter | Government clean |
| Rethink Sans | Geist | Fresh minimal |
| Mona Sans | Hubot Sans | GitHub style |
| Hubot Sans | Mona Sans | GitHub invertido |
| Albert Sans | Barlow | Industrial clean |
| Red Hat Display | Red Hat Text | Corporate friendly |
| Funnel Display | Funnel Sans | Rounded moderno |
| Montserrat Alternates | Montserrat | Variação sutil |
| Archivo Black | Archivo | Impact moderno |
| Alpino | Nunito | Rounded + rounded |
| Reddit Sans | Sora | Social tech |
| Mozilla Headline | Mozilla Text | Open source |
| Wix Madefor Display | Wix Madefor Text | Brand system |
| Stack Sans Headline | Stack Sans Text | Layered system |
| Stack Sans Notch | Stack Sans Text | Notched accent |
| Nunito | Nunito Sans | Rounded family |
| Varela Round | Varela | Rounded + regular |
| Lexend Deca | Lexend | Accessibility duo |
| Noto Sans Display | Noto Sans | Global display |
| M PLUS Rounded 1c | M PLUS 1p | Japanese rounded |

### Mono Accent + Sans Body (Dev/Tech)
| Heading/Accent | Body | Vibe |
|----------------|------|------|
| Space Mono | Space Grotesk | Retro futurista |
| JetBrains Mono | Inter | Developer first |
| IBM Plex Mono | IBM Plex Sans | Terminal corp |
| Ubuntu Mono | Ubuntu | Linux official |
| Roboto Mono | Roboto | Material code |
| Geist Mono | Geist | Vercel style |
| Overpass Mono | Overpass | Highway code |
| Oxygen Mono | Oxygen | KDE clean |
| Azeret Mono | Space Grotesk | Modern terminal |
| Inconsolata | Source Sans Pro | Code + content |
| Fira Code | Fira Sans | Mozilla dev |
| Courier Prime | Work Sans | Typewriter + modern |
| Rubik Mono One | Rubik | Bold mono accent |

### Condensed + Regular (Editorial/Jornal)
| Heading | Body | Vibe |
|---------|------|------|
| Roboto Condensed | Roboto | Material dense |
| Barlow Condensed | Barlow | Industrial tight |
| Fira Sans Condensed | Fira Sans | Mozilla editorial |
| Saira Condensed | Saira | Esportivo compacto |
| Sofia Sans Condensed | Sofia Sans | Friendly condensed |
| Reddit Sans Condensed | Reddit Sans | Social compact |
| Asap Condensed | Asap | Rounded tight |
| Encode Sans Condensed | Encode Sans | Tech condensed |
| Encode Sans Expanded | Encode Sans | Wide headline |

### Display Impact (Headlines Únicas)
| Font | Melhor Body | Vibe |
|------|-------------|------|
| Clash Display | Inter | Statement bold |
| Unbounded | Geist | Arredondado forte |
| Syne | Inter | Art direction |
| Fraunces | DM Sans | Vintage display |
| Epilogue | Inter | Variable impact |
| Instrument Sans | Inter | Sharp modern |
| Cabinet Grotesk | Inter | Foundry style |
| Lexend | Inter | Accessibility first |
| Plus Jakarta Sans | Inter | Premium geometric |
| Outfit | Inter | Rounded geometric |
| Onest | Inter | Eastern European |
| Figtree | Inter | Figma inspired |

### Fontes Alternativas (Menos Comuns)
| Font | Estilo | Substitui |
|------|--------|-----------|
| Hanken Grotesk | Geometric | Circular |
| Darker Grotesque | Condensed | Anton |
| Geologica | Variable | Roboto |
| Schibsted Grotesk | News | Guardian |
| Atkinson Hyperlegible | Accessible | Arial |
| Familjen Grotesk | Swedish | Akzidenz |
| Commissioner | Variable | Open Sans |
| Wix Madefor | Brand | Montserrat |
| Stack Sans | Layered | System fonts |
| Plein | French | Helvetica Now |
| Roundo | Rounded | Nunito |
| Sentient | Modern serif | Times New Roman |
| Gambetta | Editorial | Georgia |
| Zodiak | Stylish serif | Didot |
| Author | Handwritten feel | Script fonts |

---

## REGRAS DE USO

1. **Para CADA secao**, escolha pelo menos:
   - 1 Arquétipo de composicao
   - 2 Constraints criativos de categorias diferentes

2. **NUNCA repita** o mesmo arquétipo em secoes consecutivas

3. **DECLARE** suas escolhas antes de implementar:
   "Secao X: Arquétipo [Y] + Constraints [A, B]"

4. **Para FONTES**, escolha da lista de pairings curados:
   - NUNCA use Montserrat + Open Sans (overused)
   - NUNCA use Poppins + Roboto (overused)
   - NUNCA use Poppins + Poppins (overused)
   - NUNCA use Inter + Inter (overused)
   - NUNCA use Lato + Lato (overused)
   - NUNCA use Roboto + Roboto (overused)
   - NUNCA use Open Sans + Open Sans (overused)
   - PREFIRA pairings de categorias diferentes (serif + sans, display + body)
   - DECLARE: "Fontes: [Heading] + [Body] - [Vibe]"

5. **EVITE** os padroes mais comuns:
   - 3 cards lado a lado
   - Grid simetrico com icones
   - Hero centralizado generico
   - Secao de features com bullets