🌐 A Grande Enciclopédia Suprema de UI (41 Estilos)

Catálogo Completo: Estilos, Variações & Gerações

O panorama exaustivo de interfaces digitais: 41 cartões completos reunindo a evolução do Material Design (M1 a M3 Expressive), as fases do Flat Design (Metro, 1.0, 2.0), os contrastes de Brutalismo Cru vs Neo-Brutalismo, variações de Neumorfismo Claro/Escuro, os 10 padrões da web moderna de produção, todas as tendências contemporâneas e os clássicos históricos.

💡 Dica: Clique no título de qualquer seção ou nos botões de navegação para abrir/fechar

1. shadcn/ui & Tailwind Minimal

O padrão nº 1 da web moderna (Next.js / Supabase / Vercel)

Padrão da Indústria
● Produção Ativa

Criar Workspace

Bordas sutis de 1px, cores neutras em Zinc e botões Ghost.

Segredo do CSS:
background: #09090b; border: 1px solid #27272a; border-radius: 8px;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);

2. Stripe FinTech Luxury

Multi-sombras ultra-suaves e dados de alta precisão

Mercury / Ramp
Saldo Disponível
● LIVE
R$ 142.850,00
Segredo do CSS:
box-shadow: 0 13px 27px -5px rgba(50,50,93,0.12),
0 8px 16px -8px rgba(0,0,0,0.15);

3. Apple Human Interface (HIG)

Segmented controls e listas agrupadas Inset

iOS & macOS
Conta
Segurança
Notificações Push
Face ID Ativado ›
Segredo do CSS:
background: #f2f2f7; border-radius: 12px;
/* Segmented thumb: */ box-shadow: 0 2px 4px rgba(0,0,0,0.12);

4. Duolingo Gamified 3D Pop

Botões com borda inferior de 4px que afundam ao toque

Gamificação
🔥 14 DIAS SEGUIDOS

Lição do Dia: Astro UI

Segredo do CSS:
border-bottom: 4px solid #46a302; border-radius: 16px;
/* :active */ transform: translateY(4px); border-bottom-width: 0;

5. Airbnb Mobile Web (Bottom Sheet)

Cápsulas de busca e gavetas de consumo

Consumer B2C
Onde você vai?
Qualquer lugar • Qualquer semana
🔍
Segredo do CSS:
border-radius: 24px; box-shadow: 0 8px 28px rgba(0,0,0,0.12);
background: radial-gradient(circle, #ff385c, #e00b41);

6. AI Conversational & Prompt Bar

O formato universal de interfaces de Inteligência Artificial

ChatGPT / Claude
astro.config.mjs Copiar
export default defineConfig({...})
Pergunte ao modelo...
↑
Segredo do CSS:
background: #2f2f2f; border-radius: 18px;
/* Prompt bar: */ border-radius: 24px; border: 1px solid #424242;

7. Notion & Document-First Canvas

Blocos arrastáveis, callouts e comandos /

Productivity
💡
Dica de Produtividade: Digite / para inserir novos blocos.
⋮⋮ Documentação da API
Segredo do CSS:
/* Callout Block: */ background: #f1f1ef; border-radius: 4px;
color: #37352f; font-family: -apple-system, sans-serif;

8. Luxury E-Commerce Minimal

Tipografia macro, sem bordas e foco no produto

Zara / Apple Store
PRODUTO MINIMALISTA
Relógio Titânio Edição Limitada
Segredo do CSS:
letter-spacing: 0.15em; text-transform: uppercase;
background: #000; color: #fff; font-weight: 700;

9. Spotify Media-First Dark

Gradientes contextuais e botão play vibrante

Streaming Media
TOCANDO DA SUA BIBLIOTECA
Midnight Resonance
Segredo do CSS:
background: #1ed760; border-radius: 50%;
box-shadow: 0 4px 12px rgba(30, 215, 96, 0.4);

10. Linear & Raycast (Craft UI)

Preto absoluto, micro-bordas sutis e atalhos

Dark Precision
⚡ CMD + K

Dark Precision

Bordas finas com gradiente de luz e foco em velocidade.

Segredo do CSS:
background: #09090b; border: 1px solid rgba(255,255,255,0.1);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);

11. Material 1 (Original 2014)

Android 5.0: FAB circular, cores 500/700 e elevação rígida de papel

Histórico 2014
Caixa de Entrada

Papel digital branco com sombras de elevação em camadas físicas.

Segredo do CSS (M1):
background: #3f51b5; /* Indigo 500 */
box-shadow: 0 2px 5px rgba(0,0,0,0.26); /* 2dp elevation */
border-radius: 2px; /* Cantos quase retos */

12. Material 2 (Theming 2018)

Android 9/10: Fundos brancos limpos, Google Sans e ícones outlined

2018 - 2021
🏷️ Conta Google

Segurança da Conta

Espaço em branco generoso, cantos de 16px e bordas #dadce0 sutis.

Segredo do CSS (M2):
background: #ffffff; border: 1px solid #dadce0;
border-radius: 16px; color: #1a73e8;

13. Material 3 (Material You 2021)

Android 12+: Superfícies tonais sem sombra dura e botões pílula

Padrão Atual M3

Superfície Tonal

A elevação agora é indicada pela saturação da cor do container.

Segredo do CSS (M3):
background: #f3edf7; /* Surface Container */
border-radius: 9999px; /* Formato Pílula */
box-shadow: none; /* Zero sombras pesadas */

14. Material 3 Expressive (2024-2026)

A mais recente versão: tipografia gigante, FAB squircle e cantos 32px

Next-Gen Google
Expressive UI

Formas orgânicas ultra-arredondadas com pesos tipográficos assimétricos.

Segredo do CSS (M3 Expressive):
border-radius: 32px; font-weight: 900;
/* Squircle FAB: */ width: 48px; height: 48px; border-radius: 16px;

15. Metro UI (Windows Phone 2012)

Live Tiles 2D, tipografia gigante e zero cantos arredondados

Microsoft
Mensagens
8
Fotos 📷
Música 🎵
Segredo do CSS (Metro):
border-radius: 0px; box-shadow: none;
font-family: 'Segoe UI'; font-weight: 300;

16. Flat 1.0 (iOS 7 Hairline & Ghost)

Linhas de cabelo de 1px, botões transparentes e cores vibrantes

2013

Simplicidade 2D

Sem qualquer gradiente ou sombra. Elementos identificados por contornos finos.

Segredo do CSS (Flat 1.0):
border: 1px solid #007aff; background: transparent;
color: #007aff; font-weight: 400;

17. Flat 2.0 (Semi-Flat Moderno)

Reintrodução de micro-sombras e cantos arredondados de 12px

Padrão Web

Elevação Funcional

Uma leve sombra restaura a percepção de clique sem poluir o visual.

Segredo do CSS (Flat 2.0):
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07);
border-radius: 12px; background: #4f46e5;

18. Brutalismo Cru (Raw Web 90s)

Anti-design, fontes monospace sem formatação e links azuis

Antidesign

MANIFESTO_RAW.TXT

Rejeição de frameworks modernos e layouts bonitinhos.

Segredo do CSS (Raw Brutalism):
font-family: 'Courier New', monospace;
border: 2px solid #000; background: #fff;

19. Neo-Brutalismo (Neo-Pop)

Bordas pretas de 3px com sombras sólidas duras

Pop / Figma

POP ART ⚡

Segredo do CSS (Neo-Brutalism):
border: 3px solid #000;
box-shadow: 5px 5px 0px #000;

20. Neumorfismo Claro (Soft UI)

Extrusão suave em cinza claro (#e0e5ec)

Conceitual

Sombras duplas de luz e sombra na mesma cor do fundo.

Segredo do CSS:
box-shadow: 8px 8px 16px #b8b9be, -8px -8px 16px #ffffff;

21. Dark Neumorphism (Soft UI Escuro)

Extrusão suave em superfícies pretas com luzes cinza

Conceitual Dark

Extrusão Noturna

Segredo do CSS (Dark Neu):
background: #18191c;
box-shadow: 8px 8px 16px #0c0d0e, -8px -8px 16px #24252a;

22. Glassmorfismo (Heavy Frost)

Vidro fosco translúcido com orbes luminosos

iOS Glass

Vidro Translúcido

Segredo do CSS:
backdrop-filter: blur(16px);
background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);

23. Windows 11 Mica Surface

Desfoque sutil que puxa a iluminação da área de trabalho

Fluent Design

Mica Material

Segredo do CSS (Mica):
background: rgba(30, 41, 59, 0.7);
backdrop-filter: blur(20px) saturate(125%);

24. Glowmorphism (Laser Border)

Borda luminosa giratória e estética de IA

Tendência IA

Borda Laser Viva

Segredo do CSS:
background: linear-gradient(60deg, #ec4899, #8b5cf6, #3b82f6);
animation: laserGlow 4s linear infinite;

25. Noise & Grainy Mesh UI

Gradientes com textura analógica de filme

Spotify Wrapped

Textura com Grão

Segredo do CSS:
filter: url(#noiseFilter); /* SVG feTurbulence */
background: radial-gradient(...) com ruído analógico;

26. Dynamic Island (Morphing)

Cápsula expansível e fluida com física

Apple UI
🎧 Tocando Áudio

Passe o mouse para sentir a expansão elástica.

Segredo do CSS:
border-radius: 36px; background: #000;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

27. Dopamine Pastel (Anti-SaaS)

Tons baunilha e pêssego acolhedores e amigáveis

Notion / Amie
☕ Modo Foco

Sem Estresse

Rejeição do cinza corporativo em favor de calor e aconchego.

Segredo do CSS:
background: #faf7f2; border-radius: 24px;
box-shadow: 0 10px 25px rgba(180, 150, 120, 0.1);

28. Nothing OS (Dot-Matrix)

Monocromático nórdico e matriz de pontos

Teenage Eng.
GLYPH.01

INDUSTRIAL MONOCHROME AUDIO INTERFACE.

Segredo do CSS:
font-family: 'Silkscreen', monospace;
background: #000000; border: 1px solid #333;

29. Pro Canvas HUD (Figma Tooling)

Alta densidade, controles scrubbable e precisão

Figma / 3D
Posição X:
Rotação:
Segredo do CSS:
font-size: 0.78rem; background: #22252a;
border: 1px solid #343840; font-family: var(--font-mono);

30. Claymorfismo (3D Massinha)

3D inflado / massinha tátil com sombras duplas

Lúdico / Games

Superfície Inflável

Cantos ultra arredondados com sombras internas duplas e aspecto fofo.

Segredo do CSS:
border-radius: 28px; box-shadow: 0 16px 28px rgba(...),
inset -7px -7px 14px rgba(...), inset 7px 7px 14px #fff;

31. Bento Grid (Apple Bento Box)

Modularidade em caixas organizadas

Apple / SaaS
METRICA PRINCIPAL
99.98%
Disponibilidade global
🚀
Deploy Rápido
🔒
Seguro
Segredo do CSS:
display: grid; grid-template-columns: 1fr 1fr; border-radius: 16px;
background: #141824; border: 1px solid rgba(255,255,255,0.08);

32. Aurora & Spatial UI

Luzes neon difusas e tema escuro

visionOS

Spatial Glass

Iluminação ambiente dinâmica simulando camadas no espaço 3D.

Segredo do CSS:
background: radial-gradient(circle, rgba(139,92,246,0.45), transparent);
box-shadow: 0 0 25px -5px rgba(139, 92, 246, 0.35);

33. Holográfico & Iridescente

Reflexos furta-cor metálicos e gradientes prismáticos

Fintech / Web3
Prism Metal UI

Cores que simulam refração de luz em películas metálicas.

Segredo do CSS:
background: linear-gradient(90deg, #ff758c, #ff7eb3, #70a6ff, #54e38e);
box-shadow: 0 4px 15px rgba(255, 117, 140, 0.4);

34. Esqueumorfismo Clássico (2007–2012)

Texturas analógicas reais, chanfros e relevos 3D

Analógico

Simulação táctil de materiais reais como plástico, metal e couro.

Segredo do CSS:
background: linear-gradient(180deg, #3b82f6, #1e40af);
box-shadow: inset 0 1px 1px #fff, 0 4px 6px #000;

35. Frutiger Aero (Aqua UI 2005–2012)

Bolhas brilhantes, água, céu e botões de gelatina

Nostalgia 2005-2012

Aero Glass & Water

Reflexos esmaltados (glossy) e transparências vibrantes.

Segredo do CSS:
background: linear-gradient(180deg, #7fe3ff 0%, #0099e6 50%, #0077b3 51%, #00bfff 100%);
box-shadow: inset 0 2px 3px rgba(255,255,255,0.8);

36. Retro Windows 95

Cinza clássico, chanfros duplos de 2px e barra azul

Anos 90
Meu Computador
X

Deseja executar este programa?

Segredo do CSS:
border-top: 2px solid #fff; border-left: 2px solid #fff;
border-right: 2px solid #000; border-bottom: 2px solid #000;

37. Terminal TUI (CLI / Dev Tools)

Verde fósforo monocromático e cursor piscante

Dev Tools
root@mainframe:~# status
> ALL PROCESSES OK
Segredo do CSS:
font-family: 'JetBrains Mono', monospace;
color: #00ff66; background: #050b05; border: 1px dashed #00ff66;

38. Cyberpunk HUD (FUI)

Linhas angulares de telemetria e neon ciano/magenta

Sci-Fi / Games

INTERFACE HOLOGRÁFICA MILITAR.

Segredo do CSS:
clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));

39. Bauhaus & Swiss Style

Tipografia maciça, grid rigoroso e cores primárias

Design Clássico
FORMA & FUNÇÃO
Segredo do CSS:
border: 4px solid #111111; letter-spacing: -0.04em;
background: #ffffff; color: #111; font-weight: 900;

40. Synthwave & Outrun 80s

Pôr do sol retrô, neon magenta e estética VHS

Retrowave / 80s
NEON HIGHWAY
Segredo do CSS:
text-shadow: 0 0 10px #ff007f, 0 0 20px #ff007f;
border: 2px solid #ff007f; box-shadow: 0 0 20px rgba(255,0,127,0.5);

41. Editorial & Magazine

Serifas refinadas, elegância de alta costura e respiro

Alta Costura
EDIÇÃO Nº 42 — VERÃO
A Arte da Tipografia
Segredo do CSS:
font-family: 'Playfair Display', Georgia, serif;
letter-spacing: 0.1em; border: 1px solid #e7e5e4;
✅ Prompt copiado para a área de transferência!