# Sistema de Design Monday Vibe ## Prévia da interface do sistema de design Monday Vibe Edite o status das linhas e conclua os itens selecionados; as contagens do resumo são atualizadas localmente. ## Referência de design do sistema de design Monday Vibe Integração com o Vibe 4, suas fontes públicas e @vibe/core. Os valores abaixo correspondem às definições verificadas do tema claro e dos estilos; as cores dos rótulos do quadro são distintas das cores semânticas de sucesso/erro. O exemplo nativo usa controles Button reais do Vibe dentro de uma tabela HTML pertencente à aplicação. ### Variáveis de espaçamento atuais | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --space-2 | 2px | Use no espaçamento da aplicação; o nome numérico do token corresponde à grafia atual na fonte. | | --space-4 | 4px | Use no espaçamento da aplicação; o nome numérico do token corresponde à grafia atual na fonte. | | --space-8 | 8px | Use no espaçamento da aplicação; o nome numérico do token corresponde à grafia atual na fonte. | | --space-12 | 12px | Use no espaçamento da aplicação; o nome numérico do token corresponde à grafia atual na fonte. | | --space-16 | 16px | Use no espaçamento da aplicação; o nome numérico do token corresponde à grafia atual na fonte. | | --space-20 | 20px | Use no espaçamento da aplicação; o nome numérico do token corresponde à grafia atual na fonte. | | --space-24 | 24px | Use no espaçamento da aplicação; o nome numérico do token corresponde à grafia atual na fonte. | | --space-32 | 32px | Use no espaçamento da aplicação; o nome numérico do token corresponde à grafia atual na fonte. | | --space-40 | 40px | Use no espaçamento da aplicação; o nome numérico do token corresponde à grafia atual na fonte. | | --space-48 | 48px | Use no espaçamento da aplicação; o nome numérico do token corresponde à grafia atual na fonte. | | --space-64 | 64px | Use no espaçamento da aplicação; o nome numérico do token corresponde à grafia atual na fonte. | | --space-80 | 80px | Use no espaçamento da aplicação; o nome numérico do token corresponde à grafia atual na fonte. | ### Cores de ações e superfícies | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --primary-color | #0073ea | Ações primárias. | | --primary-hover-color | #0060b9 | Ação primária ao passar o cursor. | | --primary-selected-color | #cce5ff | Plano de fundo do conteúdo selecionado. | | --primary-text-color | #323338 | Texto padrão legível. | | --secondary-text-color | #676879 | Rótulos secundários. | | --primary-background-color | #ffffff | Superfície principal. | | --allgrey-background-color | #f6f7fb | Plano de fundo da aplicação. | | --ui-border-color | #c3c6d4 | Limite do controle. | | --positive-color | #00854d | Ação semanticamente positiva. | | --negative-color | #d83a52 | Ação semanticamente negativa. | ### Paleta de rótulos do quadro | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --color-done-green | #00c875 | Rótulo categórico Done, não a cor semanticamente positiva. | | --color-working_orange | #fdab3d | Rótulo categórico Working; o nome exato na fonte inclui sublinhado. | | --color-stuck-red | #df2f4a | Rótulo categórico Stuck. | | --color-dark_purple | #784bd1 | Exemplo de identidade de grupo. | ### Atalhos tipográficos | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --font-family | Figtree, Roboto, Noto script fallbacks, sans-serif | Família tipográfica do corpo; os arquivos de fontes são instalados separadamente. | | --title-font-family | Poppins, Roboto, Noto script fallbacks, sans-serif | Família tipográfica dos títulos. | | --font-h1-medium | 600 32px/40px; title family | Título do quadro. | | --font-h2-medium | 600 24px/30px; title family | Cabeçalho do grupo. | | --font-h3-medium | 600 18px/24px; title family | Subseção compacta. | | --font-text1-normal | 400 16px/22px; body family | Conteúdo regular. | | --font-text2-normal | 400 14px/20px; body family | Conteúdo denso das linhas. | | --font-text3-normal | 400 12px/16px; body family | Detalhes complementares. | ### Cantos | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --border-radius-4 | 4px | Controles pequenos. | | --border-radius-8 | 8px | Contêineres médios. | | --border-radius-12 | 12px | Etapa numérica de canto disponível. | | --border-radius-16 | 16px | Contêineres grandes. | | --border-radius-small | var(--border-radius-4) | Alias nomeado para pequeno. | | --border-radius-medium | var(--border-radius-8) | Alias nomeado para médio. | | --border-radius-big | var(--border-radius-16) | Alias nomeado para grande. | ### Botão API | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | kind | Default: primary | Ênfase visual, incluindo as ações terciárias usadas neste exemplo. | | size | Default: medium | Use o tamanho pequeno para ações compactas nas linhas. | | type | Default: button | Defina explicitamente submit para enviar o formulário. | | disabled | boolean | Desativa a ação em lote quando nenhuma linha está selecionada. | | loading | boolean | Exibe um indicador de carregamento durante uma operação real pendente. | | active | boolean | Estado ativo visual; para um controle de alternância, exponha também aria-pressed. | | onClick | React mouse-event callback | Atualize o estado da aplicação aqui. | | aria-pressed | ARIA pressed state | Comunique a seleção de alternância da linha se usar botões de alternância. | ## Guia completo do sistema de design Monday Vibe Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real. Orientações completas, um ponto de partida para a implementação e links para o código-fonte. ## Desenvolva com os pontos de entrada atuais do Vibe no sistema de design Monday Vibe ### Os componentes principais e os tokens CSS são importados separadamente > O Vibe 4 disponibiliza componentes React nomeados por meio de @vibe/core e as variáveis CSS por meio de @vibe/core/tokens. Importe ambos em uma nova aplicação cliente. Um componente pode injetar seus próprios estilos e ainda depender de variáveis fornecidas pelo arquivo de tokens. O exemplo do quadro usa a estrutura nativa de tabela e controles Button reais do Vibe, com dados de linhas e seleção pertencentes à aplicação. Consulte a especificação de apoio ### Evite misturar gerações anteriores do pacote O pacote antigo monday-ui-react-core pertence ao Vibe 2. O Vibe 3 recebe manutenção para correções críticas, não para novos recursos. Este guia usa a interface atual do Vibe 4 e as variáveis de espaçamento numeradas. A integração não é um cliente do SDK do monday.com e não tem conexão com conta, espaço de trabalho ou item API. Consulte a especificação de apoio ## No sistema de design Monday Vibe, as cores de ação e os rótulos do quadro têm funções diferentes ### Use funções semânticas nos controles As ações primárias usam a função primária e sua cor correspondente ao passar o cursor. A seleção usa o plano de fundo de selecionado, enquanto a leitura normal usa as funções de texto primário e secundário. Use os valores do tema como um conjunto integrado, em vez de alterar apenas o plano de fundo do corpo. Este estudo local permanece no tema claro verificado. Consulte a especificação de apoio ### Uma célula Done não é um botão de sucesso A fonte inclui cores categóricas do quadro, além das cores semânticas de feedback. O verde de Done é #00c875, enquanto a cor semanticamente positiva é #00854d. As células de status das linhas usam as cores do quadro com texto contrastante e legível, mantêm as palavras Working, Stuck e Done e nunca dependem apenas da cor para descrever o estado. Consulte a especificação de apoio ## Use o atalho tipográfico completo no sistema de design Monday Vibe ### Títulos e linhas de trabalho têm estilos próprios A fonte define Poppins para títulos e Figtree para o conteúdo do corpo, com alternativas compatíveis com diferentes sistemas de escrita. O atalho atual h1-medium é 600 32px/40px, enquanto text2-normal é 400 14px/20px. Aplique o atalho com a propriedade CSS font para manter peso, tamanho, altura da linha e família tipográfica integrados. A fonte também contém aliases de cabeçalho mais antigos; não os substitua silenciosamente por opções de escala diferente. Consulte a especificação de apoio ### Carregue os arquivos de fontes de forma deliberada O Vibe não importa os arquivos de fontes recomendados por você. Adicione o link documentado da folha de estilos de Figtree/Poppins à aplicação HTML ou hospede arquivos licenciados adequadamente. O exemplo offline usa explicitamente fontes substitutas do sistema; portanto, sua renderização é uma interpretação, não uma alegação de reproduzir exatamente a tipografia do monday.com. Consulte a especificação de apoio ## Um quadro compacto sem controles comprimidos no sistema de design Monday Vibe ### Os espaçamentos numerados definem o ritmo Use --space-8 entre ações adjacentes da barra de ferramentas, --space-16 no preenchimento interno do painel e --space-24 entre as regiões do quadro. Todos são nomes exatos da fonte atual. Essas disposições são escolhas feitas para esta aplicação. A escala também inclui uma etapa de dois pixels para alinhamentos finos e valores maiores, de até oitenta pixels, para a composição. Consulte a especificação de apoio ### Os cantos definem o contorno dos contêineres Os aliases pequeno, médio e grande correspondem, respectivamente, a quatro, oito e dezesseis pixels. Use cantos médios no quadro externo e mantenha quadradas e alinhadas as células da tabela. Arredondar cada célula colorida como se fosse um selo dificulta a leitura rápida das relações entre colunas densas. Consulte a especificação de apoio ## Uma tabela editável com barra de ferramentas para ações em lote no sistema de design Monday Vibe ### Mantenha explícita a estrutura dos dados Cada item de trabalho tem um id estável, um título, um responsável e um status. Os cabeçalhos nativos das colunas explicam esses valores. A caixa de seleção de uma linha adiciona o id a um Set; ao alterar o status, o objeto correspondente é substituído, em vez de mutar o array. A ação Concluir selecionados lê o mesmo Set e atualiza apenas as linhas selecionadas. O resumo de conclusão é derivado das linhas. - O botão primário para ações em lote fica desativado quando o Set de seleção está vazio. - A ação terciária de cada linha percorre os status locais para fins de demonstração. - A ação de redefinição restaura as linhas iniciais e limpa a seleção. Consulte a especificação de apoio ## Exponha o estado por meio do componente Button API real no sistema de design Monday Vibe ### Desativado, carregando e pressionado são estados diferentes O exemplo nativo usa disabled para uma ação em lote indisponível. Não exibe carregamento nem sucesso porque não há operação remota. Se conectar uma camada de persistência real, associe loading ao ciclo de vida da solicitação e atualize o estado de sucesso somente após a confirmação. A fonte do Button também expõe active para a aparência e aria-pressed para a semântica de alternância; um não substitui o outro. Consulte a especificação de apoio ### Não transforme edições locais em alegações sobre um serviço A mensagem dinâmica informa quantos itens locais foram alterados. Ela não diz que um quadro do monday.com foi atualizado. Ao recarregar a página, os dados de exemplo iniciais são restaurados. Uma integração de produção exigiria permissões explícitas do espaço de trabalho, tratamento de erros e sincronização fora da camada do sistema de design. Consulte a especificação de apoio ## Preserve o significado das linhas em diferentes larguras no sistema de design Monday Vibe ### Adapte a demonstração de forma cuidadosa No quadro offline, cada linha se transforma em um cartão de item identificado em telas estreitas. Os nomes das colunas são repetidos como rótulos visíveis para manter claros o responsável e o status. Essa é uma escolha de layout da aplicação, não uma alegação de que o Vibe transforma automaticamente todas as tabelas. Como alternativa para dados mais densos, o exemplo inicial nativo mantém uma tabela semântica em uma região identificada com rolagem horizontal. Consulte a especificação de apoio ### O box sizing global é um pré-requisito Aplique border-box a elementos e pseudoelementos antes de usar a biblioteca. Sem isso, uma célula de largura fixa com preenchimento interno pode ultrapassar o tamanho previsto, especialmente quando há um botão dentro de uma coluna densa. Mantenha flexível o contêiner externo e permita que as ações da barra de ferramentas quebrem para a linha seguinte. Consulte a especificação de apoio ## Seleção e status precisam de nomes independentes no sistema de design Monday Vibe ### Identifique cada controle de linha Uma caixa de seleção inclui o título do item de trabalho em seu nome acessível. Cada ação de status inclui o nome do item e o status atual. Uma mensagem de status cortês informa o resultado do lote. Usuários de teclado podem selecionar linhas, ativar o comando em lote e redefinir o quadro usando controles nativos; a página não inventa o comportamento das teclas de seta de planilhas. 1. Selecione Design e confirme que a ação em lote fica disponível. 2. Conclua a seleção e verifique se o texto do status e a contagem derivada estão de acordo. 3. Redefina e verifique se os dados e a seleção das caixas de seleção voltam ao estado inicial. Consulte a especificação de apoio ## Uma entrada completa do lado do cliente no sistema de design Monday Vibe ### Instale, importe e monte A configuração abaixo é uma entrada main.jsx para um projeto cliente React que contém um elemento raiz. Instale react, react-dom e @vibe/core@4, carregue os tokens CSS uma vez e aplique a folha de estilos global indicada. O pacote atual usa exportações de módulos ES. A extração de estilos no servidor está documentada como experimental; este exemplo inicial usa renderização no cliente deliberadamente. Consulte a especificação de apoio ## Exemplos de componentes do sistema de design Monday Vibe ### Exemplo interativo completo e independente Salve o documento completo como index.html e abra-o em um navegador. Interpretação independente de HTML/CSS, com paleta, espaçamentos e dimensões tipográficas do tema claro do Vibe verificados; fonte substituta do sistema. ``` Weekly delivery — Vibe study

Weekly delivery

A shared view of the work moving this week.
1 / 3 completed
WorkingStuckDone
0 selected

▼ This week

Select items or click a status to change it locally.

``` Referência de código - A barra de ferramentas para ações em lote altera os status das tarefas de exemplo. As cores dos rótulos descrevem o fluxo de trabalho deste quadro e não substituem os tokens semânticos de ação do Vibe. ### Entrada da implementação nativa completa A implementação completa, desde a configuração, reunida aqui com as explicações específicas de API. Siga os pré-requisitos documentados de pacote e compilação na configuração. ``` // npm install react react-dom @vibe/core@4 // main.jsx in a client React project with
import React, { useState } from 'react'; import { createRoot } from 'react-dom/client'; import { Button } from '@vibe/core'; import '@vibe/core/tokens'; import './board.css'; const initial=[{id:1,title:'Design handoff',owner:'Maya',status:'Working'}, {id:2,title:'Accessibility review',owner:'Theo',status:'Stuck'}, {id:3,title:'Release notes',owner:'Sam',status:'Done'}]; const states=['Working','Stuck','Done']; function Board(){ const [items,setItems]=useState(initial),[selected,setSelected]=useState(new Set()),[message,setMessage]=useState(''); const toggle=id=>setSelected(old=>{const next=new Set(old);next.has(id)?next.delete(id):next.add(id);return next}); const complete=()=>{setItems(old=>old.map(item=>selected.has(item.id)?{...item,status:'Done'}:item));setMessage(selected.size+' local items completed');setSelected(new Set())}; return

Weekly delivery

{items.filter(x=>x.status==='Done').length} of {items.length} items completed

{items.map(item=>)}
SelectItemOwnerStatus
toggle(item.id)}/> {item.title}{item.owner}

{message}

} createRoot(document.getElementById('root')).render(); ``` Referência de código - Entrada completa para o board local; adicione board.css do exemplo do componente. As fontes não são incluídas automaticamente. O pacote nativo API foi conferido com a fonte oficial; este ambiente não compilou o exemplo do pacote. ### Folha de estilos do board baseada em tokens Use a exportação de tokens para layout e tipografia. A região pai mantém a tabela semântica utilizável em larguras estreitas. ``` *,*::before,*::after{box-sizing:border-box} body{margin:0;background:var(--allgrey-background-color);color:var(--primary-text-color);font:var(--font-text2-normal)} .board{max-width:960px;margin:auto;padding:var(--space-24)} h1{font:var(--font-h1-medium)} .toolbar{display:flex;flex-wrap:wrap;gap:var(--space-8);margin-bottom:var(--space-16)} .table-scroll{overflow:auto;border:1px solid var(--layout-border-color);border-radius:var(--border-radius-medium)} table{width:100%;min-width:560px;border-collapse:collapse;background:var(--primary-background-color)} th,td{text-align:left;padding:var(--space-12);border-bottom:1px solid var(--layout-border-color)} ``` Referência de código - Esta é uma aplicação CSS que usa variáveis Vibe reais. - A prévia incorporada usa uma interpretação HTML independente e responsiva. ### Carregamento de fontes na aplicação HTML Carregue explicitamente as duas famílias recomendadas; a importação de tokens CSS não faz o download delas. ``` ``` Referência de código - Uma configuração de fontes licenciadas e hospedadas localmente pode substituir esta folha de estilos externa. ## Configuração do agente de IA do sistema de design Monday Vibe ### Ponto de partida para implementação Entrada completa para o board local; adicione board.css do exemplo do componente. As fontes não são incluídas automaticamente. O pacote nativo API foi conferido com a fonte oficial; este ambiente não compilou o exemplo do pacote. ``` // npm install react react-dom @vibe/core@4 // main.jsx in a client React project with
import React, { useState } from 'react'; import { createRoot } from 'react-dom/client'; import { Button } from '@vibe/core'; import '@vibe/core/tokens'; import './board.css'; const initial=[{id:1,title:'Design handoff',owner:'Maya',status:'Working'}, {id:2,title:'Accessibility review',owner:'Theo',status:'Stuck'}, {id:3,title:'Release notes',owner:'Sam',status:'Done'}]; const states=['Working','Stuck','Done']; function Board(){ const [items,setItems]=useState(initial),[selected,setSelected]=useState(new Set()),[message,setMessage]=useState(''); const toggle=id=>setSelected(old=>{const next=new Set(old);next.has(id)?next.delete(id):next.add(id);return next}); const complete=()=>{setItems(old=>old.map(item=>selected.has(item.id)?{...item,status:'Done'}:item));setMessage(selected.size+' local items completed');setSelected(new Set())}; return

Weekly delivery

{items.filter(x=>x.status==='Done').length} of {items.length} items completed

{items.map(item=>)}
SelectItemOwnerStatus
toggle(item.id)}/> {item.title}{item.owner}

{message}

} createRoot(document.getElementById('root')).render(); ``` ### Um prompt para seu projeto ``` Crie o board de entregas Vibe 4 fornecido. Importe @vibe/core/tokens, use as variáveis de espaçamento numeradas atuais e as declarações abreviadas completas de fonte, e mantenha as cores semânticas de feedback distintas das cores dos rótulos do board. Implemente a seleção local de linhas, a edição de status e uma contagem derivada de conclusão. Use disabled no botão de ação em lote; não simule salvamento remoto. ``` ## Fontes e escopo do sistema de design Monday Vibe Referência independente do Vibe 4 e demonstração de um board local. Sem conta monday.com, dados de workspace ou conexão com SDK. O starter nativo usa controles Button reais do Vibe e marcação de tabela mantida pela aplicação. - Visão geral do sistema de design Vibe 4 Pacote atual, entrada de tokens e limites de versões anteriores. - Integração principal Importações na raiz, box sizing global e fontes carregadas separadamente. - Origem do tema claro Cores semânticas, cores dos rótulos do board e sombras. - Origem do espaçamento Variáveis de espaçamento numeradas atuais. - Origem da tipografia Famílias Figtree/Poppins e estilos abreviados. - Origem dos raios Tokens numéricos e nomeados para cantos. - Origem dos botões Semântica de ação controlada, desativada, em carregamento e pressionada. - Exportações do pacote Entrada ES module e exportação de tokens CSS. ## Recursos relacionados ao sistema de design Monday Vibe ### Morningstar sistema de design Crie uma interface de pesquisa em que os números se alinham, as cores dos recursos mantêm seu significado e a tipografia permanece legível. Explore as constantes do MDS, a adoção do Vue 3, a transição do Morningstar Intrinsic e um caderno fictício de alocação com opções de ordenação. ### Mozilla Protocol Um guia editorial do Protocol com pilhas de fontes e escalas de espaçamento e largura de contêiner reais, uma página de leitura ilustrada e responsiva e um exemplo completo de formulário nativo de CSS. ### Nord sistema de design Inspecione os tokens do tema Therapy do Nord e os contratos de Web Components por meio de um rascunho de solicitação de sala: funções de cor reais, dimensionamento responsivo de campos, validação explícita e resultados preparados localmente. - [Referência de implementação](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/themes/light-theme.scss) - [Fonte](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/spacing.scss) - [Fonte](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/themes/light-theme.scss) - [Fonte](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/typography.scss) - [Fonte](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/border-radius.scss) - [Fonte](https://github.com/mondaycom/vibe/blob/master/packages/components/button/src/Button/Button.tsx) - [Consulte a especificação de apoio](https://github.com/mondaycom/vibe) - [Consulte a especificação de apoio](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/themes/light-theme.scss) - [Consulte a especificação de apoio](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/typography.scss) - [Consulte a especificação de apoio](https://github.com/mondaycom/vibe/blob/master/packages/core/README.md) - [Consulte a especificação de apoio](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/spacing.scss) - [Consulte a especificação de apoio](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/border-radius.scss) - [Consulte a especificação de apoio](https://github.com/mondaycom/vibe/blob/master/packages/components/button/src/Button/Button.tsx) - [Consulte a especificação de apoio](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/core/package.json) - [Referência de código](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/themes/light-theme.scss) - [Referência de código](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/spacing.scss) - [Referência de código](https://github.com/mondaycom/vibe/blob/master/packages/core/README.md) - [Visão geral do sistema de design Vibe 4 Pacote atual, entrada de tokens e limites de versões anteriores.](https://github.com/mondaycom/vibe) - [Integração principal Importações na raiz, box sizing global e fontes carregadas separadamente.](https://github.com/mondaycom/vibe/blob/master/packages/core/README.md) - [Origem do tema claro Cores semânticas, cores dos rótulos do board e sombras.](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/themes/light-theme.scss) - [Origem do espaçamento Variáveis de espaçamento numeradas atuais.](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/spacing.scss) - [Origem da tipografia Famílias Figtree/Poppins e estilos abreviados.](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/typography.scss) - [Origem dos raios Tokens numéricos e nomeados para cantos.](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/border-radius.scss) - [Origem dos botões Semântica de ação controlada, desativada, em carregamento e pressionada.](https://github.com/mondaycom/vibe/blob/master/packages/components/button/src/Button/Button.tsx) - [Exportações do pacote Entrada ES module e exportação de tokens CSS.](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/core/package.json)