admin
5afeb6b78a
一、④段整套同步（用户选候选 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。
16 KiB
16 KiB
Design System Inspired by Cohere
Categoria: IA e LLM Plataforma de IA empresarial. Gradientes vibrantes, estética de painel rico em dados.
1. Tema Visual e Atmosfera
A interface da Cohere é um painel de comando empresarial refinado — confiante, limpo e projetado para fazer a IA parecer uma infraestrutura séria, não um brinquedo para consumidores. A experiência vive em uma tela de branco brilhante onde o conteúdo é organizado em cartões generosamente arredondados (raio de 22px) que criam uma linguagem de contenção orgânica, semelhante a nuvens. Este é um site que fala com CTOs e arquitetos empresariais: profissional sem ser frio, sofisticado sem ser intimidador.
A linguagem de design conecta dois mundos com um sistema de duas tipografias: CohereText, uma serifa customizada para display com tracking apertado, confere às manchetes a gravidade de um manifesto tecnológico, enquanto Unica77 Cohere Web cuida de todo o texto de corpo e UI com precisão geométrica suíça. Esse par serifa/sem-serifa cria uma personalidade de "autoridade confiante encontra clareza de engenharia" que reflete perfeitamente uma plataforma de IA empresarial.
A cor é usada com extrema contenção — a interface é quase inteiramente em preto e branco com bordas em cinza frio (#d9d9dd, #e5e7eb). O roxo-violeta aparece apenas em faixas fotográficas de hero, seções com gradiente e no azul interativo (#1863dc) que sinaliza estados de hover e foco. Essa contenção cromática faz com que, quando a cor APARECE — em capturas de tela do produto, fotografia empresarial e na seção roxo-profundo — ela carregue o máximo de peso visual.
Características Principais:
- Tela branca brilhante com bordas de contenção em cinza frio
- Raio de borda exclusivo de 22px — o arredondamento distinto do "cartão Cohere"
- Duas tipografias customizadas: CohereText (serifa para display) + Unica77 (sem-serifa para corpo)
- Contenção cromática de nível empresarial: preto, branco, cinzas frios, mínimo acento roxo-azul
- Seções hero em roxo-profundo/violeta para contraste dramático
- Botões ghost/transparentes que mudam para azul ao passar o mouse
- Fotografia empresarial mostrando aplicações reais e diversas
- CohereMono para código e rótulos técnicos com transformações em maiúsculas
2. Paleta de Cores e Funções
Primárias
- Cohere Black (
#000000): Texto de manchete principal e elementos de máxima ênfase. - Near Black (
#212121): Cor padrão de link no corpo — levemente mais suave que o preto puro. - Deep Dark (
#17171c): Um quase-preto com tom azul para navegação e texto em seções escuras.
Secundárias e Destaque
- Interaction Blue (
#1863dc): O acento interativo principal — aparece no hover de botões, estados de foco e links ativos. A única cor de ação cromática. - Ring Blue (
#4c6ee6a 50%): Cor do anel Tailwind para indicadores de foco por teclado. - Focus Purple (
#9b60aa): Cor de borda de foco nos inputs — um violeta suave.
Superfície e Fundo
- Pure White (
#ffffff): O fundo principal da página e superfície dos cartões. - Snow (
#fafafa): Superfícies elevadas sutis e fundos de seções claras. - Lightest Gray (
#f2f2f2): Bordas de cartões e as linhas de contenção mais suaves.
Neutros e Texto
- Muted Slate (
#93939f): Links de rodapé desenfatizados e texto terciário — um cinza de tom frio com leve tinte azul-violeta. - Border Cool (
#d9d9dd): Bordas padrão de seções e itens de lista — um cinza frio, levemente com tinte roxo. - Border Light (
#e5e7eb): Variante de borda mais clara — o gray-200 padrão do Tailwind.
Sistema de Gradientes
- Faixa Hero Roxo-Violeta: Seções com gradiente roxo-profundo que criam contraste dramático contra a tela branca. Aparecem como faixas de largura total abrigando capturas de tela do produto e mensagens-chave.
- Gradiente de Rodapé Escuro: A página transita por roxo-profundo/carvão até o rodapé preto, criando um efeito de "entardecer".
3. Regras Tipográficas
Família de Fontes
- Display:
CohereText, com fallbacks:Space Grotesk, Inter, ui-sans-serif, system-ui - Corpo / UI:
Unica77 Cohere Web, com fallbacks:Inter, Arial, ui-sans-serif, system-ui - Código:
CohereMono, com fallbacks:Arial, ui-sans-serif, system-ui - Ícones:
CohereIconDefault(fonte de ícones customizada)
Hierarquia
| Função | Fonte | Tamanho | Peso | Altura de Linha | Espaçamento | Notas |
|---|---|---|---|---|---|---|
| Display / Hero | CohereText | 72px (4.5rem) | 400 | 1.00 (compacto) | -1.44px | Máximo impacto, autoridade com serifa |
| Display Secundário | CohereText | 60px (3.75rem) | 400 | 1.00 (compacto) | -1.2px | Títulos de seções grandes |
| Título de Seção | Unica77 | 48px (3rem) | 400 | 1.20 (compacto) | -0.48px | Títulos de seções de funcionalidades |
| Subtítulo | Unica77 | 32px (2rem) | 400 | 1.20 (compacto) | -0.32px | Títulos de cartões, nomes de funcionalidades |
| Título de Funcionalidade | Unica77 | 24px (1.5rem) | 400 | 1.30 | normal | Títulos de seções menores |
| Corpo Grande | Unica77 | 18px (1.13rem) | 400 | 1.40 | normal | Parágrafos de introdução |
| Corpo / Botão | Unica77 | 16px (1rem) | 400 | 1.50 | normal | Corpo padrão, texto de botões |
| Botão Médio | Unica77 | 14px (0.88rem) | 500 | 1.71 (relaxado) | normal | Botões menores, rótulos enfatizados |
| Legenda | Unica77 | 14px (0.88rem) | 400 | 1.40 | normal | Metadados, descrições |
| Rótulo em Maiúsculas | Unica77 / CohereMono | 14px (0.88rem) | 400 | 1.40 | 0.28px | Rótulos de seção em maiúsculas |
| Pequeno | Unica77 | 12px (0.75rem) | 400 | 1.40 | normal | Texto menor, links de rodapé |
| Código Micro | CohereMono | 8px (0.5rem) | 400 | 1.40 | 0.16px | Minúsculos rótulos de código em maiúsculas |
Princípios
- Serifa para declaração, sem-serifa para utilidade: CohereText carrega a voz da marca na escala de display — suas terminações serifadas conferem às manchetes a autoridade de uma pesquisa publicada. Unica77 cuida de tudo o que é funcional com neutralidade geométrica suíça.
- Tracking negativo em grande escala: CohereText usa espaçamento de -1.2px a -1.44px em 60–72px, criando blocos de texto densos e impactantes.
- Peso único no corpo: Praticamente todo uso de Unica77 é no peso 400. O peso 500 aparece apenas para ênfase em botões pequenos. O sistema se apoia em tamanho e espaçamento, não em contraste de peso.
- Rótulos de código em maiúsculas: CohereMono usa maiúsculas com espaçamento de letras positivo (0.16–0.28px) para tags técnicas e marcadores de seção.
4. Estilização de Componentes
Botões
Ghost / Transparente
- Fundo: transparente (
rgba(255, 255, 255, 0)) - Texto: Cohere Black (
#000000) - Sem borda visível
- Hover: texto muda para Interaction Blue (
#1863dc), opacidade 0.8 - Foco: contorno sólido de 2px em Interaction Blue
- O estilo primário de botão — invisível até ser interagido
Sólido Escuro
- Fundo: escuro/preto
- Texto: Pure White
- Para CTA em superfícies claras
- Formato pílula ou raio padrão
Contornado
- Contenção baseada em borda
- Usado em ações secundárias
Cartões e Contêineres
- Fundo: Pure White (
#ffffff) - Borda: linha fina sólida Lightest Gray (
1px solid #f2f2f2) para cartões sutis; Cool Border (#d9d9dd) para ênfase - Raio: 22px — o raio exclusivo Cohere para cartões primários, imagens e contêineres de diálogo. Também 4px, 8px, 16px, 20px para elementos menores
- Sombra: mínima — a Cohere se apoia em cor de fundo e bordas em vez de sombras
- Especial: raio
0px 0px 22px 22px(arredondamento apenas na parte inferior) para contêineres de seção - Diálogo: raio de 8px para caixas modais/de diálogo
Inputs e Formulários
- Texto: branco em input escuro, preto em claro
- Borda de foco: Focus Purple (
#9b60aa) com1px solid - Sombra de foco: anel vermelho (
rgb(179, 0, 0) 0px 0px 0px 2px) — provavelmente para indicação de estado de erro - Contorno de foco: Interaction Blue sólido 2px
Navegação
- Nav horizontal limpa em fundo branco ou escuro
- Logo: wordmark Cohere (SVG customizado)
- Links: texto escuro a 16px Unica77
- CTA: botão sólido escuro
- Mobile: colapso com hamburger
Tratamento de Imagens
- Fotografia empresarial com sujeitos e ambientes diversos
- Fotografia hero com tinte roxo para seções dramáticas
- Capturas de tela da UI do produto em superfícies escuras
- Imagens com raio de 22px correspondendo ao sistema de cartões
- Seções de gradiente roxo de largura total
Componentes Distintivos
Sistema de Cartões 22px
- O raio de borda de 22px é a assinatura visual da Cohere
- Todos os cartões primários, imagens e contêineres usam esse raio
- Cria uma suavidade orgânica semelhante a nuvens, distintiva do típico 8–12px
Barra de Confiança Empresarial
- Logos de empresas exibidos em uma faixa horizontal
- Demonstra adoção empresarial
- Tratamento de logo limpo e monocromático
Faixas Hero Roxas
- Seções roxo-profundo de largura total abrigando demonstrações de produto
- Criam quebras visuais dramáticas no fluxo branco da página
- Capturas de tela do produto flutuam dentro do ambiente roxo
Tags de Código em Maiúsculas
- CohereMono em maiúsculas com espaçamento de letras
- Usadas como marcadores de seção e rótulos de categorização
- Cria uma hierarquia de informações técnica e estruturada
5. Princípios de Layout
Sistema de Espaçamento
- Unidade base: 8px
- Escala: 2px, 6px, 8px, 10px, 12px, 16px, 20px, 22px, 24px, 28px, 32px, 36px, 40px, 56px, 60px
- Padding de botões varia por variante
- Padding interno do cartão: aproximadamente 24–32px
- Espaçamento vertical de seção: generoso (56–60px entre seções)
Grade e Contêiner
- Largura máxima do contêiner: até 2560px (muito largo) com escalonamento responsivo
- Hero: centralizado com tipografia dramática
- Seções de funcionalidades: grades de cartões multi-coluna
- Seções empresariais: faixas roxas de largura total
- 26 breakpoints detectados — sistema responsivo extremamente granular
Filosofia de Espaço em Branco
- Clareza empresarial: Cada seção apresenta uma proposição clara com espaço para respirar entre elas.
- Fotografia como hero: Grandes seções fotográficas proporcionam interesse visual sem exigir elementos decorativos de design.
- Agrupamento por cartões: Conteúdo relacionado é agrupado em cartões arredondados com 22px, criando clusters naturais de informação.
Escala de Raio de Borda
- Nítido (4px): Elementos de navegação, tags pequenas, paginação
- Confortável (8px): Caixas de diálogo, contêineres secundários, cartões pequenos
- Generoso (16px): Contêineres em destaque, cartões médios
- Grande (20px): Cartões de funcionalidades grandes
- Assinatura (22px): Cartões primários, imagens hero, contêineres principais — O raio Cohere
- Pílula (9999px): Botões, tags, indicadores de status
6. Profundidade e Elevação
| Nível | Tratamento | Uso |
|---|---|---|
| Plano (Nível 0) | Sem sombra, sem borda | Fundo da página, blocos de texto |
| Com Borda (Nível 1) | 1px solid #f2f2f2 ou #d9d9dd |
Cartões padrão, separadores de lista |
| Faixa Roxa (Nível 2) | Fundo roxo-escuro de largura total | Seções hero, demonstrações de funcionalidades |
Filosofia de Sombra: A Cohere é quase livre de sombras. A profundidade é comunicada através do contraste de cor de fundo (cartões brancos em faixas roxas, superfície branca sobre snow), contenção por borda (bordas em cinza frio) e a dramática alternância de seções claras para escuras. Quando os elementos precisam de elevação, isso é alcançado por estarem brancos sobre escuro, em vez de projetar sombras.
7. O Que Fazer e Não Fazer
Fazer
- Usar raio de borda de 22px em todos os cartões e contêineres primários — é a assinatura visual
- Usar CohereText para títulos de display (72px, 60px) com espaçamento de letras negativo
- Usar Unica77 para todo texto de corpo e UI no peso 400
- Manter a paleta em preto e branco com bordas em cinza frio
- Usar Interaction Blue (#1863dc) apenas para estados interativos de hover/foco
- Usar seções roxo-profundo para quebras visuais dramáticas e demonstrações de produto
- Aplicar maiúsculas + espaçamento de letras no CohereMono para rótulos de seção
- Manter fotografia adequada para empresas com sujeitos diversos
Não Fazer
- Não usar raio de borda diferente de 22px em cartões primários — o raio exclusivo importa
- Não introduzir cores quentes — a paleta é estritamente de tons frios
- Não usar sombras pesadas — a profundidade vem do contraste de cor e bordas
- Não usar peso negrito (700+) no texto do corpo — o intervalo é 400–500
- Não pular a hierarquia serifa/sem-serifa — CohereText para manchetes, Unica77 para corpo
- Não usar roxo como cor de superfície de cartões — o roxo é reservado para seções de largura total
- Não reduzir o espaçamento entre seções abaixo de 40px — layouts empresariais precisam de espaço para respirar
- Não usar decoração em botões por padrão — ghost/transparente é o estado base
8. Comportamento Responsivo
Breakpoints
| Nome | Largura | Mudanças Principais |
|---|---|---|
| Mobile Pequeno | <425px | Layout compacto, espaçamento mínimo |
| Mobile | 425–640px | Coluna única, cartões empilhados |
| Mobile Grande | 640–768px | Pequenos ajustes de espaçamento |
| Tablet | 768–1024px | Grades de 2 colunas começam |
| Desktop | 1024–1440px | Layout multi-coluna completo |
| Desktop Grande | 1440–2560px | Largura máxima do contêiner |
26 breakpoints detectados — um dos sites com responsividade mais granular no conjunto de dados.
Alvos de Toque
- Botões adequadamente dimensionados para interação por toque
- Links de navegação com espaçamento confortável
- Superfícies de cartões como alvos de toque
Estratégia de Colapso
- Navegação: Nav completa colapsa para hamburger
- Grades de funcionalidades: Multi-coluna → 2 colunas → coluna única
- Texto do hero: 72px → 48px → 32px escalonamento progressivo
- Seções roxas: Mantêm largura total, conteúdo empilha
- Grades de cartões: 3 → 2 → 1 coluna
Comportamento de Imagens
- Fotografia escala proporcionalmente dentro de contêineres com raio de 22px
- Capturas de tela do produto mantêm proporção
- Seções roxas escalam o fundo proporcionalmente
9. Guia de Prompt para Agentes
Referência Rápida de Cores
- Texto Principal: "Cohere Black (#000000)"
- Fundo da Página: "Pure White (#ffffff)"
- Texto Secundário: "Near Black (#212121)"
- Acento de Hover: "Interaction Blue (#1863dc)"
- Texto Discreto: "Muted Slate (#93939f)"
- Bordas de Cartões: "Lightest Gray (#f2f2f2)"
- Bordas de Seção: "Border Cool (#d9d9dd)"
Exemplos de Prompts para Componentes
- "Crie uma seção hero em Pure White (#ffffff) com CohereText a 72px peso 400, line-height 1.0, letter-spacing -1.44px. Texto em Cohere Black. Subtítulo em Unica77 a 18px peso 400, line-height 1.4."
- "Projete um cartão de funcionalidade com raio de borda de 22px, borda 1px solid Lightest Gray (#f2f2f2) em branco. Título em Unica77 a 32px, letter-spacing -0.32px. Corpo em Unica77 a 16px, Muted Slate (#93939f)."
- "Construa um botão ghost: fundo transparente, texto Cohere Black em Unica77 a 16px. Ao passar o mouse, texto muda para Interaction Blue (#1863dc) com opacidade 0.8. Foco: contorno sólido de 2px em Interaction Blue."
- "Crie uma seção roxa de largura total com texto branco. CohereText a 60px para o título. Captura de tela do produto flutua dentro usando raio de borda de 22px."
- "Projete um rótulo de seção usando CohereMono a 14px, maiúsculas, letter-spacing 0.28px. Texto em Muted Slate (#93939f)."
Guia de Iteração
- Foque em UM componente por vez
- Sempre use raio de 22px para cartões primários — "o arredondamento do cartão Cohere"
- Especifique a tipografia — CohereText para manchetes, Unica77 para corpo, CohereMono para rótulos
- Elementos interativos usam Interaction Blue (#1863dc) apenas no hover
- Mantenha superfícies brancas com bordas em cinza frio — sem tons quentes
- Roxo é para seções de largura total, nunca fundos de cartões