Design System Inspired by NVIDIA

Category: Mídia & Consumidor Computação GPU. Energia verde-preta, estética de poder técnico.

1. Visual Theme & Atmosphere

O site da NVIDIA é uma experiência de alto contraste e visão tecnológica que comunica poder computacional bruto por meio da contenção no design. A página é construída sobre uma base de preto (#000000) e branco (#ffffff), pontuada pelo verde característico da NVIDIA (#76b900) — uma cor tão específica que funciona como uma impressão digital de marca. Este não é o verde exuberante da natureza; é o verde elétrico e deslocado para o lima da luz renderizada pela GPU, uma cor que fica entre o chartreuse e o kelly green e imediatamente sinaliza “NVIDIA” para qualquer pessoa no setor de tecnologia.

A família tipográfica personalizada NVIDIA-EMEA (com fallbacks para Arial e Helvetica) cria uma voz tipográfica limpa e industrial. Títulos em 36px negrito com line-height compacto de 1.25 geram blocos de texto densos e autoritativos. A fonte não tem a vivacidade geométrica das sans-serifs do Vale do Silício — é europeia, pragmática e voltada para engenharia. O corpo de texto fica entre 15-16px, confortável para leitura, mas sem excessos, mantendo a sensação de que o espaço de tela é otimizado como memória de GPU.

O que distingue o design da NVIDIA de outros sites de tecnologia com fundo escuro é o uso disciplinado do destaque em verde. O #76b900 aparece em bordas (2px solid #76b900), sublinhados de links (underline 2px rgb(118, 185, 0)) e CTAs — mas nunca como fundo ou em grandes áreas de superfície no conteúdo principal. O verde é um sinal, não uma superfície. Combinado com um sistema de sombra profunda (rgba(0, 0, 0, 0.3) 0px 0px 5px) e border radius mínimo (1-2px), o efeito geral é de hardware de engenharia de precisão renderizado em pixels.

Características Principais:

• NVIDIA Green (#76b900) como destaque puro — apenas bordas, sublinhados e realces interativos
• Black (#000000) como fundo dominante com texto branco (#ffffff) nas seções escuras
• Fonte personalizada NVIDIA-EMEA com fallback Arial/Helvetica — industrial, europeia, limpa
• Line-heights compactos (1.25 para títulos) criando blocos de texto densos e autoritativos
• Border radius mínimo (1-2px) — cantos afiados e projetados em todo o layout
• Botões com borda verde (2px solid #76b900) como padrão interativo principal
• Sistema de ícones Font Awesome 6 Pro/Sharp com weight 900 para iconografia nítida
• Arquitetura multi-framework (PrimeReact, Fluent UI, Element Plus) habilitando componentes interativos ricos

2. Color Palette & Roles

Primary Brand

• NVIDIA Green (#76b900): A assinatura — bordas, sublinhados de links, contornos de CTA, indicadores ativos. Nunca usado como preenchimento de grandes superfícies.
• True Black (#000000): Fundo principal da página, texto em superfícies claras, tom dominante.
• Pure White (#ffffff): Texto em fundos escuros, fundos de seções claras, superfícies de cards.

Extended Brand Palette

• NVIDIA Green Light (#bff230): Destaque lima brilhante para realces e estados de hover.
• Orange 400 (#df6500): Destaque quente para alertas, badges em destaque ou contextos relacionados a energia.
• Yellow 300 (#ef9100): Destaque quente secundário, realces de categoria de produto.
• Yellow 050 (#feeeb2): Superfície quente clara para fundos de callout.

Status & Semantic

• Red 500 (#e52020): Estados de erro, ações destrutivas, alertas críticos.
• Red 800 (#650b0b): Vermelho escuro para fundos de avisos graves.
• Green 500 (#3f8500): Estados de sucesso, indicadores positivos (mais escuro que o verde da marca).
• Blue 700 (#0046a4): Destaques informativos, alternativa de hover para links.

Decorative

• Purple 800 (#4d1368): Roxo profundo para finais de gradiente, contextos premium/IA.
• Purple 100 (#f9d4ff): Tonalidade de superfície roxa clara.
• Fuchsia 700 (#8c1c55): Destaque rico para promoções especiais ou conteúdo em evidência.

Neutral Scale

• Gray 300 (#a7a7a7): Texto atenuado, rótulos desabilitados.
• Gray 400 (#898989): Texto secundário, metadados.
• Gray 500 (#757575): Texto terciário, placeholders, rodapés.
• Gray Border (#5e5e5e): Bordas sutis, linhas divisórias.
• Near Black (#1a1a1a): Superfícies escuras, fundos de cards em páginas pretas.

Interactive States

• Link Default (dark bg) (#ffffff): Links brancos em fundos escuros.
• Link Default (light bg) (#000000): Links pretos com sublinhado verde em fundos claros.
• Link Hover (#3860be): Deslocamento para azul ao passar o mouse em todas as variantes de link.
• Button Hover (#1eaedb): Realce teal para estados de hover de botão.
• Button Active (#007fff): Azul brilhante para estados ativos/pressionados de botão.
• Focus Ring (#000000 solid 2px): Contorno preto para foco via teclado.

Shadows & Depth

• Card Shadow (rgba(0, 0, 0, 0.3) 0px 0px 5px 0px): Sombra ambiente sutil para cards elevados.

3. Typography Rules

Font Family

• Primary: NVIDIA-EMEA, com fallbacks: Arial, Helvetica, sans-serif
• Icon Font: Font Awesome 6 Pro (weight 900 para ícones sólidos, 700 para regulares)
• Icon Sharp: Font Awesome 6 Sharp (weight 300 para ícones leves, 400 para regulares)

Hierarchy

Principles

• Negrito como voz padrão: A NVIDIA usa intensamente o weight 700 para títulos, botões, links e rótulos. O weight 400 é reservado para corpo de texto e descrições — todo o restante é negrito, projetando confiança e autoridade.
• Títulos compactos, corpo relaxado: O line-height dos títulos é consistentemente 1.25 (compacto), enquanto o corpo de texto relaxa para 1.50-1.67. Esse contraste cria densidade visual no topo dos blocos de conteúdo e leitura confortável nos parágrafos.
• Maiúsculas na navegação: Os rótulos de links usam text-transform: uppercase com weight 700, criando uma voz de navegação que se lê como rótulos de especificação técnica de hardware.
• Sem rastreamento decorativo: O letter-spacing é normal em todo o layout, exceto nos botões compactos (0.144px). A própria fonte carrega o caráter industrial sem manipulação.

4. Component Stylings

Buttons

Primary (Green Border)

• Background: transparent
• Text: #000000
• Padding: 11px 13px
• Border: 2px solid #76b900
• Radius: 2px
• Font: 16px weight 700
• Hover: background #1eaedb, text #ffffff
• Active: background #007fff, text #ffffff, border 1px solid #003eff, scale(1)
• Focus: background #1eaedb, text #ffffff, outline #000000 solid 2px, opacity 0.9
• Use: CTA primário (“Learn More”, “Explore Solutions”)

Secondary (Green Border Thin)

• Background: transparent
• Border: 1px solid #76b900
• Radius: 2px
• Use: Ações secundárias, CTAs alternativos

Compact / Inline

• Font: 14.4px weight 700
• Letter-spacing: 0.144px
• Line-height: 1.00
• Use: CTAs inline, navegação compacta

Cards & Containers

• Background: #ffffff (claro) ou #1a1a1a (seções escuras)
• Border: nenhuma (bordas limpas) ou 1px solid #5e5e5e
• Radius: 2px
• Shadow: rgba(0, 0, 0, 0.3) 0px 0px 5px 0px para cards elevados
• Hover: intensificação da sombra
• Padding: 16-24px interno

Links

• Em Fundo Escuro: #ffffff, sem sublinhado, hover muda para #3860be
• Em Fundo Claro: #000000 ou #1a1a1a, sublinhado 2px solid #76b900, hover muda para #3860be, sublinhado removido
• Links Verdes: #76b900, hover muda para #3860be
• Links Atenuados: #666666, hover muda para #3860be

Navigation

• Fundo preto escuro (#000000)
• Logo alinhado à esquerda, wordmark NVIDIA proeminente
• Links: NVIDIA-EMEA 14px weight 700 uppercase, #ffffff
• Hover: mudança de cor, sem alteração do sublinhado
• Mega-menus dropdown para categorias de produtos
• Fixo ao rolar com backdrop

Image Treatment

• Renderizações de produtos/GPUs como imagens hero, frequentemente em largura total
• Imagens de screenshot com sombra sutil para profundidade
• Sobreposições de gradiente verde em seções hero escuras
• Containers de avatar circulares com radius 50%

Distinctive Components

Product Cards

• Card branco ou escuro limpo com radius mínimo (2px)
• Borda de destaque verde ou sublinhado no título
• Padrão de título em negrito + descrição mais leve
• CTA com borda verde na parte inferior

Tech Spec Tables

• Layouts de grade industrial
• Fundos de linhas alternados (deslocamento sutil de cinza)
• Rótulos em negrito, valores regulares
• Destaques verdes para métricas principais

Cookie/Consent Banner

• Posicionamento fixo na parte inferior
• Botões arredondados (radius 2px)
• Tratamentos de borda cinza

5. Layout Principles

Spacing System

• Unidade base: 8px
• Escala: 1px, 2px, 3px, 4px, 5px, 6px, 7px, 8px, 9px, 10px, 11px, 12px, 13px, 15px
• Valores de padding primários: 8px, 11px, 13px, 16px, 24px, 32px
• Espaçamento de seção: 48-80px de padding vertical

Grid & Container

• Largura máxima de conteúdo: aproximadamente 1200px (contido)
• Seções hero em largura total com texto contido
• Seções de funcionalidades: grades de 2-3 colunas para cards de produto
• Coluna única para conteúdo de artigo/blog
• Layouts com barra lateral para documentação

Whitespace Philosophy

• Densidade proposital: A NVIDIA usa espaçamento mais compacto do que sites SaaS típicos, refletindo a densidade do conteúdo técnico. O espaço em branco existe para separar conceitos, não para criar vazio de luxo.
• Ritmo de seção: Seções escuras se alternam com seções brancas, usando a cor de fundo (não apenas espaçamento) para separar blocos de conteúdo.
• Densidade de cards: Os cards de produto ficam próximos entre si com gaps de 16-20px, criando uma sensação de catálogo e não de galeria.

Border Radius Scale

• Micro (1px): Spans inline, elementos minúsculos
• Standard (2px): Botões, cards, containers, inputs — o padrão para praticamente tudo
• Circle (50%): Imagens de avatar, indicadores de abas circulares

6. Depth & Elevation

Filosofia de Sombra: O sistema de profundidade da NVIDIA é mínimo e utilitário. Há essencialmente um único valor de sombra — um desfoque ambiente de 5px com 30% de opacidade — usado com parcimônia em cards e modais. O sinal de profundidade principal não é a sombra, mas o contraste de cores: fundos pretos ao lado de seções brancas, bordas verdes em superfícies pretas. Isso cria uma camada visual semelhante ao hardware, onde a profundidade vem da diferença de material, não de luz simulada.

Decorative Depth

• Lavagens de gradiente verde por trás do conteúdo hero
• Gradientes do escuro ao mais escuro (preto para quase-preto) em transições de seção
• Sem glassmorphism ou efeitos de desfoque — clareza acima de atmosfera

7. Responsive Behavior

Breakpoints

Touch Targets

• Botões usam padding de 11px 13px para alvos de toque confortáveis
• Links de navegação em 14px uppercase com espaçamento adequado
• Botões com borda verde fornecem alvos de toque de alto contraste em fundos escuros
• Mobile: recolhimento do menu hamburger com sobreposição em tela cheia

Collapsing Strategy

• Hero: título de 36px escala proporcionalmente para baixo
• Navegação: nav horizontal completa se recolhe ao menu hamburger em ~1024px
• Cards de produto: de 3 colunas para 2 colunas para coluna única empilhada
• Rodapé: grade de múltiplas colunas se recolhe para coluna única empilhada
• Espaçamento de seção: 64-80px reduz para 32-48px no mobile
• Imagens: mantêm proporção, escalam para a largura do container

Image Behavior

• Renderizações de GPU/produto mantêm alta resolução em todos os tamanhos
• Imagens hero escalam proporcionalmente com o viewport
• Imagens de card usam proporções consistentes
• Seções escuras em largura total mantêm tratamento de borda a borda

8. Responsive Behavior (Extended)

Typography Scaling

• Display de 36px escala para ~24px no mobile
• Títulos de seção de 24px escalam para ~20px no mobile
• O corpo de texto mantém 15-16px em todos os breakpoints
• O texto dos botões mantém 16px para alvos de toque consistentes

Dark/Light Section Strategy

• Seções escuras (fundo preto, texto branco) se alternam com seções claras (fundo branco, texto preto)
• O destaque verde permanece consistente em ambos os tipos de superfície
• No escuro: links são brancos, sublinhados são verdes
• No claro: links são pretos, sublinhados são verdes
• Essa alternância cria um ritmo de rolagem natural e agrupamento de conteúdo

9. Agent Prompt Guide

Quick Color Reference

• Destaque primário: NVIDIA Green (#76b900)
• Fundo escuro: True Black (#000000)
• Fundo claro: Pure White (#ffffff)
• Texto de título (fundo escuro): White (#ffffff)
• Texto de título (fundo claro): Black (#000000)
• Corpo de texto (fundo claro): Black (#000000) ou Near Black (#1a1a1a)
• Corpo de texto (fundo escuro): White (#ffffff) ou Gray 300 (#a7a7a7)
• Hover de link: Blue (#3860be)
• Borda de destaque: 2px solid #76b900
• Hover de botão: Teal (#1eaedb)

Example Component Prompts

• “Create a hero section on black background. Headline at 36px NVIDIA-EMEA weight 700, line-height 1.25, color #ffffff. Subtitle at 18px weight 400, line-height 1.67, color #a7a7a7. CTA button with transparent background, 2px solid #76b900 border, 2px radius, 11px 13px padding, text #ffffff. Hover: background #1eaedb, text white.”
• “Design a product card: white background, 2px border-radius, box-shadow rgba(0,0,0,0.3) 0px 0px 5px. Title at 20px NVIDIA-EMEA weight 700, line-height 1.25, color #000000. Body at 15px weight 400, line-height 1.67, color #757575. Green underline accent on title: border-bottom 2px solid #76b900.”
• “Build a navigation bar: #000000 background, sticky top. NVIDIA logo left-aligned. Links at 14px NVIDIA-EMEA weight 700 uppercase, color #ffffff. Hover: color #3860be. Green-bordered CTA button right-aligned.”
• “Create a dark feature section: #000000 background. Section label at 14px weight 700 uppercase, color #76b900. Heading at 24px weight 700, color #ffffff. Description at 16px weight 400, color #a7a7a7. Three product cards in a row with 20px gap.”
• “Design a footer: #000000 background. Multi-column layout with link groups. Links at 14px weight 400, color #a7a7a7. Hover: color #76b900. Bottom bar with legal text at 12px, color #757575.”

Iteration Guide

1. Sempre use #76b900 como destaque, nunca como preenchimento de fundo — é uma cor de sinal para bordas, sublinhados e realces
2. Botões são transparentes com bordas verdes por padrão — fundos preenchidos aparecem apenas nos estados hover/active
3. Weight 700 é a voz dominante para todos os elementos interativos e títulos; 400 é apenas para parágrafos de corpo
4. Border radius é 2px para tudo — esse arredondamento afiado e mínimo é central para a estética industrial
5. Seções escuras usam texto branco; seções claras usam texto preto — o destaque verde funciona de forma idêntica em ambos
6. O hover de link é sempre #3860be (azul) independentemente da cor padrão do link
7. Line-height 1.25 para títulos, 1.50-1.67 para corpo de texto — mantenha esse contraste para a hierarquia visual
8. A navegação usa 14px bold uppercase — essa tipografia de rótulo de hardware faz parte da voz da marca