Biblioteca de Padrões // Design System
Alma da Marca Pitch V2.0

Biblioteca de Padrões

Grades · Molduras · Alertas · Circuitos · Texturas // 2026

Padrões de Design6 Seções2026
01Padrões de GradeTexturas de Fundo
Grade de Pontos
.pattern-dot-grid
Pontos cobre espaçados em 16px sobre superfície escura. Densidade padrão para fundos e estados vazios.
Grade de Pontos Densa
.pattern-dot-grid--dense
Pontos espaçados em 8px, trama mais apertada. Use para painéis pequenos ou fundos de miniaturas.
Grade de Pontos Esparsa
.pattern-dot-grid--sparse
Espaçamento de 32px com pontos maiores. Pano de fundo sutil para seções hero e áreas de conteúdo grandes.
Grade Mira
.pattern-crosshair-grid
Linhas de 80px com pontos centrais. Visual de planta técnica para cabeçalhos e rodapés.
Grade Mira Compacta
.pattern-crosshair-grid--tight
Variante de 40px. Padrão de mira mais denso para painéis menores e overlays técnicos.
Perspectiva Wireframe
.pattern-wireframe-perspective
Grade wireframe de 60px com brilho radial central. Cria ilusão de profundidade 3D para fundos.
Grade de Símbolos
.pattern-symbol-grid
Símbolos X em SVG de 32px em repetição. Adiciona textura de marca com cruzes cobre sutis.
Grade de Cruzes
.pattern-plus-grid
Sinais de mais em SVG de 32px em repetição. Grade técnica mínima com marcadores aditivos.
02Molduras HUDElementos de Contenção
Prévia
Moldura Colchete
.frame-bracket
Colchetes nos cantos superior-esquerdo e inferior-direito. Enquadramento HUD minimalista.
Prévia
Moldura Colchete Completa
.frame-bracket--full
Colchetes nos quatro cantos. Moldura de contenção completa para conteúdo proeminente.
Prévia
Moldura Tech
.frame-tech
Borda com polígono cortado em 12px. Painel sci-fi com traço cobre de 1px.
Prévia
Moldura Tech Pequena
.frame-tech--sm
Variante com cortes de 8px. Clip-path mais apertado para elementos UI menores.
Prévia
Moldura Tech Grande
.frame-tech--lg
Variante com cortes de 20px. Moldura angular dramática para painéis hero.
Prévia
Entalhe Superior Direito
.frame-notch-tr
Clip-path com entalhe de 16px no canto superior-direito. Corte assimétrico sugerindo uma porta de dados.
Prévia
Entalhe Inferior Esquerdo
.frame-notch-bl
Entalhe de 16px no canto inferior-esquerdo. Espelho do entalhe TR para layouts opostos.
Prévia
Entalhe Duplo
.frame-notch-both
Entalhes de 16px no superior-direito e inferior-esquerdo. Simetria diagonal para enquadramento equilibrado.
03Perigo / AlertaPadrões de Alerta
Listras de Perigo
.pattern-hazard
Listras diagonais de 10px em cobre e preto. Padrão de alerta de alta visibilidade.
Listras Finas
.pattern-hazard--thin
Variante com listras de 5px. Faixas diagonais mais apertadas para indicadores menores.
Perigo Sutil
.pattern-hazard--subtle
Listras translucidas com 15% de opacidade. Textura de alerta segura para fundos.
Aviso // Sistema Ativo
Barra de Alerta
.bar-warning
Barra cobre sólida com texto escuro e listras diagonais. Banner de atenção máxima.
04Traçados de CircuitoDecorativos PCB
Circuito Horizontal
.pattern-circuit-h
Caminho SVG de circuito horizontal com pontos de solda. Repete no eixo X como divisor decorativo.
Placa de Circuito
.pattern-circuit-board
SVG de 80px com traços PCB verticais e horizontais mais nós de junção. Textura de circuito para superfície inteira.
05TexturasTratamentos de Superfície
Linhas de Varredura
.pattern-scanlines
Linhas horizontais de 2px com 8% de opacidade. Overlay CRT para atmosfera retro-tech.
Varredura Pesada
.pattern-scanlines--heavy
Linhas de 1px com 15% de opacidade. Efeito CRT mais intenso para overlays dramáticos.
Textura de Ruído
.pattern-noise
Ruído fractal SVG via ::after com 6% de opacidade e blend overlay. Adiciona grão analógico.
Chuva de Dados
.pattern-data-rain
Colunas verticais de 40px com gradiente neon. Fundo de fluxo de dados inspirado no Matrix.
Superfície Industrial
.pattern-industrial
Gradiente escuro com destaque e sombra inset. Sensação de metal escovado para painéis de ferramentas.
06Divisores & SeparadoresQuebras de Seção
Divisor Tech
Divisor Seta
Divisor Tracejado
Divisor Duplo