# Sistema de diseño Monday Vibe ## Vista previa de la interfaz del sistema de diseño Monday Vibe Edita el estado de las filas y completa los elementos seleccionados; los recuentos del resumen se actualizan localmente. ## Referencia de diseño del sistema de diseño Monday Vibe Fuente pública de Vibe 4 e integración con @vibe/core. Los valores siguientes son las definiciones verificadas del tema claro y los estilos; los colores de las etiquetas del tablero son distintos de los roles semánticos de éxito/error. El ejemplo nativo usa controles Button reales de Vibe dentro de una tabla HTML gestionada por la aplicación. ### Variables de espaciado actuales | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --space-2 | 2px | Úsalas para el espaciado de la aplicación; el nombre numérico del token coincide con la grafía actual de la fuente. | | --space-4 | 4px | Úsalas para el espaciado de la aplicación; el nombre numérico del token coincide con la grafía actual de la fuente. | | --space-8 | 8px | Úsalas para el espaciado de la aplicación; el nombre numérico del token coincide con la grafía actual de la fuente. | | --space-12 | 12px | Úsalas para el espaciado de la aplicación; el nombre numérico del token coincide con la grafía actual de la fuente. | | --space-16 | 16px | Úsalas para el espaciado de la aplicación; el nombre numérico del token coincide con la grafía actual de la fuente. | | --space-20 | 20px | Úsalas para el espaciado de la aplicación; el nombre numérico del token coincide con la grafía actual de la fuente. | | --space-24 | 24px | Úsalas para el espaciado de la aplicación; el nombre numérico del token coincide con la grafía actual de la fuente. | | --space-32 | 32px | Úsalas para el espaciado de la aplicación; el nombre numérico del token coincide con la grafía actual de la fuente. | | --space-40 | 40px | Úsalas para el espaciado de la aplicación; el nombre numérico del token coincide con la grafía actual de la fuente. | | --space-48 | 48px | Úsalas para el espaciado de la aplicación; el nombre numérico del token coincide con la grafía actual de la fuente. | | --space-64 | 64px | Úsalas para el espaciado de la aplicación; el nombre numérico del token coincide con la grafía actual de la fuente. | | --space-80 | 80px | Úsalas para el espaciado de la aplicación; el nombre numérico del token coincide con la grafía actual de la fuente. | ### Colores de acciones y superficies | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --primary-color | #0073ea | Acciones principales. | | --primary-hover-color | #0060b9 | Acción principal al pasar el cursor. | | --primary-selected-color | #cce5ff | Fondo del contenido seleccionado. | | --primary-text-color | #323338 | Texto predeterminado legible. | | --secondary-text-color | #676879 | Etiquetas secundarias. | | --primary-background-color | #ffffff | Superficie principal. | | --allgrey-background-color | #f6f7fb | Fondo de la aplicación. | | --ui-border-color | #c3c6d4 | Borde del control. | | --positive-color | #00854d | Acción positiva semántica. | | --negative-color | #d83a52 | Acción negativa semántica. | ### Paleta de etiquetas del tablero | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --color-done-green | #00c875 | Etiqueta categórica Done, no el color positivo semántico. | | --color-working_orange | #fdab3d | Etiqueta categórica Working; el nombre exacto de la fuente incluye un guion bajo. | | --color-stuck-red | #df2f4a | Etiqueta categórica Stuck. | | --color-dark_purple | #784bd1 | Ejemplo de identidad de grupo. | ### Abreviaturas tipográficas | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --font-family | Figtree, Roboto, Noto script fallbacks, sans-serif | Familia tipográfica del cuerpo; los archivos de fuentes se instalan por separado. | | --title-font-family | Poppins, Roboto, Noto script fallbacks, sans-serif | Familia tipográfica de títulos. | | --font-h1-medium | 600 32px/40px; title family | Título del tablero. | | --font-h2-medium | 600 24px/30px; title family | Encabezado del grupo. | | --font-h3-medium | 600 18px/24px; title family | Subsección compacta. | | --font-text1-normal | 400 16px/22px; body family | Contenido normal. | | --font-text2-normal | 400 14px/20px; body family | Contenido de fila denso. | | --font-text3-normal | 400 12px/16px; body family | Información complementaria. | ### Esquinas | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --border-radius-4 | 4px | Controles pequeños. | | --border-radius-8 | 8px | Contenedores medianos. | | --border-radius-12 | 12px | Incremento numérico de esquina disponible. | | --border-radius-16 | 16px | Contenedores grandes. | | --border-radius-small | var(--border-radius-4) | Alias pequeño con nombre. | | --border-radius-medium | var(--border-radius-8) | Alias mediano con nombre. | | --border-radius-big | var(--border-radius-16) | Alias grande con nombre. | ### Botón API | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | kind | Default: primary | Énfasis visual, incluidas las acciones terciarias que usa este ejemplo. | | size | Default: medium | Usa el tamaño pequeño para las acciones compactas de las filas. | | type | Default: button | Establece explícitamente submit para enviar el formulario. | | disabled | boolean | Desactiva la acción por lotes cuando no hay filas seleccionadas. | | loading | boolean | Muestra un indicador de carga durante una operación real pendiente. | | active | boolean | Estado activo visual; expón también aria-pressed para los controles de alternancia. | | onClick | React mouse-event callback | Actualiza aquí el estado de la aplicación. | | aria-pressed | ARIA pressed state | Comunica la selección de filas al alternar si usas botones de alternancia. | ## Guía completa del sistema de diseño Monday Vibe Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## Sistema de diseño Monday Vibe: desarrolla con los puntos de entrada actuales de Vibe ### Los componentes principales y los CSS de tokens se importan por separado > Vibe 4 expone componentes React con nombre mediante @vibe/core y las variables CSS mediante @vibe/core/tokens. Importa ambos en una aplicación cliente nueva. Un componente puede inyectar sus propios estilos y, aun así, depender de las variables que proporciona el archivo de tokens. El ejemplo del tablero usa la estructura nativa de una tabla y controles Button reales de Vibe, con datos de filas y selección gestionados por la aplicación. Consulta la especificación complementaria ### Evita mezclar generaciones anteriores del paquete El paquete anterior monday-ui-react-core pertenece a Vibe 2. Vibe 3 se mantiene para corregir problemas críticos, no para añadir funciones. Esta guía usa la interfaz actual de Vibe 4 y las variables de espaciado numeradas. La integración no es un cliente del SDK de monday.com ni tiene conexión API con ninguna cuenta, espacio de trabajo o elemento. Consulta la especificación complementaria ## Sistema de diseño Monday Vibe: los colores de las acciones y las etiquetas del tablero cumplen funciones distintas ### Usa roles semánticos para los controles Las acciones principales usan el rol principal y su color correspondiente al pasar el cursor. La selección usa el fondo de selección, mientras que para la lectura normal se usan los roles de texto principal y secundario. Usa los valores del tema como un conjunto integrado, en lugar de cambiar solo el fondo del body. Este estudio local se mantiene en el tema claro verificado. Consulta la especificación complementaria ### Una celda Done no es un botón de éxito La fuente incluye colores categóricos para el tablero, además de colores semánticos para comentarios. El verde de Hecho es #00c875, mientras que el color semántico positivo es #00854d. Las celdas de estado de nuestras filas usan los colores del tablero con texto de contraste legible, conservan las palabras En curso, Atascado y Hecho, y nunca dependen únicamente del color para describir el estado. Consulta la especificación complementaria ## Sistema de diseño Monday Vibe: usa la declaración abreviada completa de fuente ### Los títulos y las filas de trabajo tienen estilos propios La fuente asigna Poppins a los títulos y Figtree al contenido del cuerpo, con alternativas compatibles con distintos sistemas de escritura. La declaración abreviada actual h1-medium es 600 32px/40px, mientras que text2-normal es 400 14px/20px. Aplica la declaración con la propiedad CSS font para mantener vinculados el peso, el tamaño, la altura de línea y la familia tipográfica. La fuente también contiene alias de encabezado anteriores; no los sustituyas silenciosamente por otros de escala diferente. Consulta la especificación complementaria ### Carga los archivos de fuentes de forma deliberada Vibe no importa automáticamente los archivos de fuentes recomendados. Añade el enlace a la hoja de estilos documentada de Figtree/Poppins a la aplicación HTML o aloja archivos con la licencia adecuada. El ejemplo sin conexión usa explícitamente fuentes alternativas del sistema, por lo que su representación es una interpretación y no pretende reproducir con exactitud la tipografía de monday.com. Consulta la especificación complementaria ## Sistema de diseño Monday Vibe: un tablero compacto sin controles comprimidos ### Los espacios numerados marcan el ritmo Usa --space-8 entre acciones contiguas de la barra de herramientas, --space-16 para el relleno del panel y --space-24 entre las secciones del tablero. Todos son nombres exactos de la fuente actual. Estas ubicaciones son decisiones propias de esta aplicación. La escala también incluye un intervalo de dos píxeles para ajustes precisos y valores mayores, de hasta ochenta píxeles, para la composición. Consulta la especificación complementaria ### Las esquinas definen los límites Los alias small, medium y big corresponden a cuatro, ocho y dieciséis píxeles, respectivamente. Aplica un radio medium al contenedor del tablero y deja las celdas de la tabla cuadradas y alineadas. Redondear cada celda de color como si fuera una insignia dificulta el análisis de las relaciones entre columnas en tablas densas. Consulta la especificación complementaria ## Sistema de diseño Monday Vibe: una tabla editable con una barra de herramientas para acciones por lotes ### Mantén explícita la estructura de los datos Cada elemento de trabajo tiene un id estable, un título, una persona responsable y un estado. Los encabezados de columna nativos explican esos valores. La casilla de una fila añade el id a un Set; al cambiar el estado, se reemplaza el objeto correspondiente en lugar de modificar la matriz. La acción Completar selección lee ese mismo Set y actualiza solo las filas seleccionadas. El resumen de elementos completados se obtiene a partir de las filas. - El botón principal de acción por lotes está desactivado cuando el Set de selección está vacío. - La acción terciaria de cada fila cambia el estado local para la demostración. - La acción de restablecimiento recupera las filas iniciales y borra la selección. Consulta la especificación complementaria ## Sistema de diseño Monday Vibe: expón el estado mediante el Button real API ### Desactivado, en carga y presionado son estados distintos El ejemplo nativo usa disabled para indicar que una acción por lotes no está disponible. No muestra los estados de carga ni de éxito porque no hay ninguna operación remota. Si conectas una capa de persistencia real, vincula loading al ciclo de vida de la solicitud y actualiza el estado de éxito solo después de recibir la confirmación. La fuente de Button también incluye active para la apariencia y aria-pressed para la semántica de alternancia; uno no sustituye al otro. Consulta la especificación complementaria ### No presentes los cambios locales como si fueran una operación de servicio El mensaje en pantalla indica cuántos elementos locales han cambiado. No afirma que se haya actualizado un tablero de monday.com. Al volver a cargar, aparecen de nuevo los datos de ejemplo iniciales. Una integración de producción necesitaría permisos explícitos del espacio de trabajo, gestión de errores y sincronización fuera de la capa del sistema de diseño. Consulta la especificación complementaria ## Sistema de diseño Monday Vibe: conserva el significado de las filas en distintos anchos ### Reorganiza la demostración con criterio En una pantalla estrecha, el tablero sin conexión convierte cada fila en una tarjeta de elemento con etiquetas. Los nombres de columna se repiten como etiquetas visibles para que la persona responsable y el estado sigan siendo comprensibles. Esta es una decisión de diseño de la aplicación, no una afirmación de que Vibe transforme automáticamente todas las tablas. Como alternativa para datos más densos, el inicio nativo conserva una tabla semántica dentro de una región de desbordamiento horizontal con etiqueta. Consulta la especificación complementaria ### El ajuste global del modelo de caja es un requisito previo Aplica box-sizing: border-box a los elementos y pseudoelementos antes de usar la biblioteca. De lo contrario, una celda de ancho fijo con relleno puede superar el tamaño previsto, sobre todo si incluye un botón dentro de una columna densa. Mantén flexible el contenedor exterior y permite que las acciones de la barra de herramientas pasen a otra línea. Consulta la especificación complementaria ## Sistema de diseño Monday Vibe: la selección y el estado necesitan nombres independientes ### Etiqueta cada control de fila Una casilla de selección incluye el título del elemento de trabajo en su nombre accesible. Cada acción de estado incluye tanto el nombre del elemento como el estado actual. Un mensaje de estado no intrusivo informa del resultado del lote. Las personas que usan el teclado pueden seleccionar filas, activar el comando por lotes y restablecer el tablero mediante controles nativos; la página no inventa un comportamiento de teclas de flecha propio de las hojas de cálculo. 1. Selecciona Transferencia de diseño y confirma que la acción por lotes quede disponible. 2. Completa la selección y comprueba que el texto del estado coincida con el recuento calculado. 3. Restablece el tablero y verifica que tanto los datos como la selección de casillas vuelvan a su estado inicial. Consulta la especificación complementaria ## Sistema de diseño Monday Vibe: una entrada completa del lado del cliente ### Instala, importa y monta La configuración siguiente es una entrada main.jsx para un proyecto de cliente React que contiene un elemento raíz. Instala react, react-dom y @vibe/core@4, carga una sola vez los tokens CSS y aplica la hoja de estilos global indicada. El paquete actual usa exportaciones de módulos ES. La extracción de estilos del lado del servidor está documentada como experimental; este inicio usa deliberadamente la representación en el cliente. Consulta la especificación complementaria ## Monday Vibe Ejemplos de componentes del sistema de diseño ### Muestra interactiva independiente completa Guarda el documento completo como index.html y ábrelo en un navegador. Interpretación independiente HTML/CSS que usa dimensiones verificadas de la paleta del tema claro, el espaciado y la tipografía de Vibe, con fuentes alternativas del 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.

``` Referencia de código - La barra de herramientas por lotes cambia los estados de las tareas de ejemplo. Los colores de las etiquetas describen el flujo de trabajo de este tablero y no sustituyen a los tokens semánticos de acción de Vibe. ### Entrada de implementación nativa completa La implementación completa de la configuración, reunida aquí junto con las explicaciones específicas de API. Sigue los requisitos documentados de paquetes y compilación en la sección de configuración. ``` // 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(); ``` Referencia de código - Entrada completa de tablero local; añade board.css a partir del ejemplo de componente. Las fuentes no se incluyen automáticamente. Paquete nativo API cotejado con la fuente oficial; el ejemplo del paquete no se ha compilado en este entorno. ### Hoja de estilos del tablero basada en tokens Usa la exportación de tokens para la disposición y la tipografía. La región principal mantiene la tabla semántica utilizable en pantallas estrechas. ``` *,*::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)} ``` Referencia de código - Esta es la aplicación CSS con variables Vibe reales. - La vista previa incrustada usa una interpretación HTML con diseño adaptable independiente. ### Carga de fuentes en la aplicación HTML Carga explícitamente las dos familias recomendadas; la importación de tokens CSS no las descarga. ``` ``` Referencia de código - Una configuración de fuentes con licencia y alojamiento propio puede sustituir esta hoja de estilos externa. ## Configuración del agente del sistema de diseño Monday Vibe ### Punto de partida para la implementación Entrada completa de tablero local; añade board.css a partir del ejemplo de componente. Las fuentes no se incluyen automáticamente. Paquete nativo API cotejado con la fuente oficial; el ejemplo del paquete no se ha compilado en este entorno. ``` // 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(); ``` ### Una instrucción para tu proyecto ``` Crea el tablero de entregas de Vibe 4 proporcionado. Importa @vibe/core/tokens, usa las variables de espaciado numeradas actuales y abreviaturas completas para las fuentes, y mantén diferenciados los colores semánticos de respuesta y los colores de las etiquetas del tablero. Implementa la selección local de filas, la edición de estados y un recuento derivado de elementos completados. Usa disabled en el botón de acciones por lote; no simules el guardado remoto. ``` ## Fuentes y alcance del sistema de diseño Monday Vibe Referencia independiente de Vibe 4 y demostración local del tablero. Sin cuenta de monday.com, datos del espacio de trabajo ni conexión con el SDK. El iniciador nativo usa controles reales de Vibe Button y marcado de tabla propio de la aplicación. - Descripción general de Vibe 4 Paquete actual, punto de entrada de tokens y límites de versiones anteriores. - Integración básica Importaciones en la raíz, box sizing global y fuentes cargadas por separado. - Origen del tema claro Colores semánticos, colores de etiquetas del tablero y sombras. - Origen del espaciado Variables de espaciado numeradas actuales. - Origen de la tipografía Familias Figtree/Poppins y estilos abreviados. - Origen de los radios Tokens numéricos y con nombre para las esquinas. - Origen de Button Semántica de acciones controladas, desactivadas, en carga y presionadas. - Exportaciones del paquete Punto de entrada del módulo ES y exportación de tokens CSS. ## Recursos relacionados con el sistema de diseño Monday Vibe ### Morningstar sistema de diseño Crea una interfaz de investigación donde los números se alineen, los colores de los activos mantengan su significado y la tipografía siga siendo legible. Explora las constantes de MDS, la adopción de Vue 3, la transición a Morningstar Intrinsic y un cuaderno de asignaciones ficticio que se puede ordenar. ### Mozilla Protocol Una guía editorial de Protocol con pilas tipográficas, escalas de espaciado y contenedores reales, una página de lectura adaptable con ilustraciones y un ejemplo completo de formulario nativo de CSS. ### Nord sistema de diseño Examina los tokens del tema Therapy de Nord y los contratos de Web Component mediante un borrador de solicitud de sala: roles de color reales, campos de tamaño adaptable, validación explícita y resultados preparados localmente. - [Referencia de implementación](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/themes/light-theme.scss) - [Fuente](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/spacing.scss) - [Fuente](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/themes/light-theme.scss) - [Fuente](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/typography.scss) - [Fuente](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/border-radius.scss) - [Fuente](https://github.com/mondaycom/vibe/blob/master/packages/components/button/src/Button/Button.tsx) - [Consulta la especificación complementaria](https://github.com/mondaycom/vibe) - [Consulta la especificación complementaria](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/themes/light-theme.scss) - [Consulta la especificación complementaria](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/typography.scss) - [Consulta la especificación complementaria](https://github.com/mondaycom/vibe/blob/master/packages/core/README.md) - [Consulta la especificación complementaria](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/spacing.scss) - [Consulta la especificación complementaria](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/border-radius.scss) - [Consulta la especificación complementaria](https://github.com/mondaycom/vibe/blob/master/packages/components/button/src/Button/Button.tsx) - [Consulta la especificación complementaria](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/core/package.json) - [Referencia de código](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/themes/light-theme.scss) - [Referencia de código](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/spacing.scss) - [Referencia de código](https://github.com/mondaycom/vibe/blob/master/packages/core/README.md) - [Descripción general de Vibe 4 Paquete actual, punto de entrada de tokens y límites de versiones anteriores.](https://github.com/mondaycom/vibe) - [Integración básica Importaciones en la raíz, box sizing global y fuentes cargadas por separado.](https://github.com/mondaycom/vibe/blob/master/packages/core/README.md) - [Origen del tema claro Colores semánticos, colores de etiquetas del tablero y sombras.](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/themes/light-theme.scss) - [Origen del espaciado Variables de espaciado numeradas actuales.](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/spacing.scss) - [Origen de la tipografía Familias Figtree/Poppins y estilos abreviados.](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/typography.scss) - [Origen de los radios Tokens numéricos y con nombre para las esquinas.](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/border-radius.scss) - [Origen de Button Semántica de acciones controladas, desactivadas, en carga y presionadas.](https://github.com/mondaycom/vibe/blob/master/packages/components/button/src/Button/Button.tsx) - [Exportaciones del paquete Punto de entrada del módulo ES y exportación de tokens CSS.](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/core/package.json)