admin/workbuddy_skills
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d8be643ec75429c718fd96752f3cc35e347cb4f1
workbuddy_skills/open-design/design-systems/nvidia/DESIGN-pt-br.md
T
admin 5afeb6b78a ④段整套同步（六节 ＋ P/S/F/J ＋ 模板）＋ open-design 移到技能根 
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
  · 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
    跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
  · 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
  · 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
    横向流程图每步写清页面／功能／操作／完成判据。
  · 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
  · 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
  · 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。

二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
  「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
  同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
  当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。

三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
2026-10-15 21:17:28 +08:00

297 lines
18 KiB
Markdown
Raw Blame History

# 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
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | NVIDIA-EMEA | 36px (2.25rem) | 700 | 1.25 (tight) | normal | Títulos de impacto máximo |
| Section Heading | NVIDIA-EMEA | 24px (1.50rem) | 700 | 1.25 (tight) | normal | Títulos de seção, cabeçalhos de cards |
| Sub-heading | NVIDIA-EMEA | 22px (1.38rem) | 400 | 1.75 (relaxed) | normal | Descrições de funcionalidades, subtítulos |
| Card Title | NVIDIA-EMEA | 20px (1.25rem) | 700 | 1.25 (tight) | normal | Cabeçalhos de cards e módulos |
| Body Large | NVIDIA-EMEA | 18px (1.13rem) | 700 | 1.67 (relaxed) | normal | Corpo enfatizado, parágrafos de destaque |
| Body | NVIDIA-EMEA | 16px (1.00rem) | 400 | 1.50 | normal | Texto de leitura padrão |
| Body Bold | NVIDIA-EMEA | 16px (1.00rem) | 700 | 1.50 | normal | Rótulos em destaque, itens de navegação |
| Body Small | NVIDIA-EMEA | 15px (0.94rem) | 400 | 1.67 (relaxed) | normal | Conteúdo secundário, descrições |
| Body Small Bold | NVIDIA-EMEA | 15px (0.94rem) | 700 | 1.50 | normal | Conteúdo secundário enfatizado |
| Button Large | NVIDIA-EMEA | 18px (1.13rem) | 700 | 1.25 (tight) | normal | Botões CTA primários |
| Button | NVIDIA-EMEA | 16px (1.00rem) | 700 | 1.25 (tight) | normal | Botões padrão |
| Button Compact | NVIDIA-EMEA | 14.4px (0.90rem) | 700 | 1.00 (tight) | 0.144px | Botões pequenos/compactos |
| Link | NVIDIA-EMEA | 14px (0.88rem) | 700 | 1.43 | normal | Links de navegação |
| Link Uppercase | NVIDIA-EMEA | 14px (0.88rem) | 700 | 1.43 | normal | `text-transform: uppercase`, rótulos de navegação |
| Caption | NVIDIA-EMEA | 14px (0.88rem) | 600 | 1.50 | normal | Metadados, timestamps |
| Caption Small | NVIDIA-EMEA | 12px (0.75rem) | 400 | 1.25 (tight) | normal | Letra miúda, textos legais |
| Micro Label | NVIDIA-EMEA | 10px (0.63rem) | 700 | 1.50 | normal | `text-transform: uppercase`, badges minúsculos |
| Micro | NVIDIA-EMEA | 11px (0.69rem) | 700 | 1.00 (tight) | normal | Menor texto de UI |
### 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
| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | Sem sombra | Fundos de página, texto inline |
| Subtle (Level 1) | `rgba(0,0,0,0.3) 0px 0px 5px 0px` | Cards padrão, modais |
| Border (Level 1b) | `1px solid #5e5e5e` | Divisores de conteúdo, bordas de seção |
| Green accent (Level 2) | `2px solid #76b900` | Elementos ativos, CTAs, itens selecionados |
| Focus (Accessibility) | `2px solid #000000` outline | Anel de foco via teclado |
**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
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile Small | <375px | Coluna única compacta, padding reduzido |
| Mobile | 375-425px | Layout mobile padrão |
| Mobile Large | 425-600px | Mobile mais largo, algumas indicações de 2 colunas |
| Tablet Small | 600-768px | Grades de 2 colunas começam |
| Tablet | 768-1024px | Grades de cards completas, navegação expandida |
| Desktop | 1024-1350px | Layout desktop padrão |
| Large Desktop | >1350px | Largura máxima de conteúdo, margens generosas |
### 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
Reference in new issue View Git Blame Copy Permalink