# Sistema di progettazione Monday Vibe ## Anteprima dell'interfaccia del sistema di progettazione sistema di design Monday Vibe Modifica lo stato delle righe e completa gli elementi selezionati; il riepilogo dei conteggi si aggiorna in locale. ## Riferimento di design per il sistema di progettazione sistema di design Monday Vibe Sorgente pubblica di Vibe 4 e integrazione con @vibe/core. I valori riportati di seguito sono le definizioni verificate del tema chiaro e degli stili; i colori delle etichette della bacheca sono distinti dai ruoli semantici di successo/errore. L'esempio nativo usa veri controlli Button di Vibe all'interno di una tabella HTML gestita dall'applicazione. ### Variabili di spaziatura attuali | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --space-2 | 2px | Usale per la spaziatura dell'applicazione; il nome numerico del token corrisponde alla grafia attuale nella sorgente. | | --space-4 | 4px | Usale per la spaziatura dell'applicazione; il nome numerico del token corrisponde alla grafia attuale nella sorgente. | | --space-8 | 8px | Usale per la spaziatura dell'applicazione; il nome numerico del token corrisponde alla grafia attuale nella sorgente. | | --space-12 | 12px | Usale per la spaziatura dell'applicazione; il nome numerico del token corrisponde alla grafia attuale nella sorgente. | | --space-16 | 16px | Usale per la spaziatura dell'applicazione; il nome numerico del token corrisponde alla grafia attuale nella sorgente. | | --space-20 | 20px | Usale per la spaziatura dell'applicazione; il nome numerico del token corrisponde alla grafia attuale nella sorgente. | | --space-24 | 24px | Usale per la spaziatura dell'applicazione; il nome numerico del token corrisponde alla grafia attuale nella sorgente. | | --space-32 | 32px | Usale per la spaziatura dell'applicazione; il nome numerico del token corrisponde alla grafia attuale nella sorgente. | | --space-40 | 40px | Usale per la spaziatura dell'applicazione; il nome numerico del token corrisponde alla grafia attuale nella sorgente. | | --space-48 | 48px | Usale per la spaziatura dell'applicazione; il nome numerico del token corrisponde alla grafia attuale nella sorgente. | | --space-64 | 64px | Usale per la spaziatura dell'applicazione; il nome numerico del token corrisponde alla grafia attuale nella sorgente. | | --space-80 | 80px | Usale per la spaziatura dell'applicazione; il nome numerico del token corrisponde alla grafia attuale nella sorgente. | ### Colori delle azioni e delle superfici | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --primary-color | #0073ea | Azioni principali. | | --primary-hover-color | #0060b9 | Azione principale al passaggio del cursore. | | --primary-selected-color | #cce5ff | Sfondo del contenuto selezionato. | | --primary-text-color | #323338 | Testo predefinito leggibile. | | --secondary-text-color | #676879 | Etichette secondarie. | | --primary-background-color | #ffffff | Superficie principale. | | --allgrey-background-color | #f6f7fb | Sfondo dell'applicazione. | | --ui-border-color | #c3c6d4 | Bordo del controllo. | | --positive-color | #00854d | Azione semanticamente positiva. | | --negative-color | #d83a52 | Azione semanticamente negativa. | ### Palette delle etichette della bacheca | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --color-done-green | #00c875 | Etichetta categorica «Completato», non colore semanticamente positivo. | | --color-working_orange | #fdab3d | Etichetta categorica «In corso»; il nome esatto nella sorgente include un trattino basso. | | --color-stuck-red | #df2f4a | Etichetta categorica «Bloccato». | | --color-dark_purple | #784bd1 | Esempio di identità del gruppo. | ### Abbreviazioni tipografiche | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --font-family | Figtree, Roboto, Noto script fallbacks, sans-serif | Famiglia del testo del corpo; i file dei font vengono installati separatamente. | | --title-font-family | Poppins, Roboto, Noto script fallbacks, sans-serif | Famiglia dei titoli. | | --font-h1-medium | 600 32px/40px; title family | Titolo della bacheca. | | --font-h2-medium | 600 24px/30px; title family | Intestazione del gruppo. | | --font-h3-medium | 600 18px/24px; title family | Sottosezione compatta. | | --font-text1-normal | 400 16px/22px; body family | Contenuto standard. | | --font-text2-normal | 400 14px/20px; body family | Contenuto denso per le righe. | | --font-text3-normal | 400 12px/16px; body family | Dettaglio di supporto. | ### Angoli | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --border-radius-4 | 4px | Controlli piccoli. | | --border-radius-8 | 8px | Contenitori medi. | | --border-radius-12 | 12px | Valore numerico disponibile per il raggio degli angoli. | | --border-radius-16 | 16px | Contenitori grandi. | | --border-radius-small | var(--border-radius-4) | Alias nominale piccolo. | | --border-radius-medium | var(--border-radius-8) | Alias nominale medio. | | --border-radius-big | var(--border-radius-16) | Alias nominale grande. | ### Button API | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | kind | Default: primary | Enfasi visiva, incluse le azioni terziarie usate in questo esempio. | | size | Default: medium | Usa small per le azioni compatte nelle righe. | | type | Default: button | Imposta esplicitamente submit per l'invio del modulo. | | disabled | boolean | Disattiva l'azione in blocco quando non è selezionata alcuna riga. | | loading | boolean | Mostra un indicatore di caricamento per un'operazione effettivamente in attesa. | | active | boolean | Stato attivo visivo; per un controllo di attivazione/disattivazione, imposta anche aria-pressed. | | onClick | React mouse-event callback | Aggiorna qui lo stato dell'applicazione. | | aria-pressed | ARIA pressed state | Se usi pulsanti per attivare o disattivare la selezione, comunica la selezione della riga. | ## Sistema di design Monday Vibe: guida completa al sistema di progettazione Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## Sistema di design Monday Vibe: sviluppa usando gli attuali punti di accesso di Vibe ### I componenti principali e il token CSS si importano separatamente > Vibe 4 espone i componenti React denominati tramite @vibe/core e le variabili CSS tramite @vibe/core/tokens. Importali entrambi in una nuova applicazione client. Un componente può iniettare i propri stili e continuare a usare le variabili fornite dal file dei token. L'esempio della bacheca usa una struttura tabellare nativa e i controlli Button di Vibe, con dati delle righe e selezione gestiti dall'applicazione. Leggi la specifica di supporto ### Evita di mescolare versioni precedenti dei pacchetti Il pacchetto precedente monday-ui-react-core appartiene a Vibe 2. Vibe 3 viene mantenuto per le correzioni critiche, non per aggiungere nuove funzionalità. Questa guida usa l'interfaccia attuale di Vibe 4 e le variabili di spaziatura numerate. L'integrazione non è un client SDK di monday.com e non dispone di connessioni a account, workspace o elementi API. Leggi la specifica di supporto ## Sistema di design Monday Vibe: i colori delle azioni e le etichette della bacheca svolgono funzioni diverse ### Usa ruoli semantici per i controlli Le azioni principali usano il ruolo primary e il relativo colore hover. La selezione usa lo sfondo selected, mentre per il testo normale si usano i ruoli primary e secondary. Usa i valori del tema come un insieme coerente, invece di modificare isolatamente lo sfondo del corpo. Questo studio circoscritto si attiene al tema chiaro verificato. Leggi la specifica di supporto ### Una cella «Fatto» non è un pulsante di successo La fonte include colori categorici per la bacheca accanto ai colori semantici per i feedback. Il verde «Fatto» è #00c875, mentre il colore semantico positivo è #00854d. Le celle di stato delle righe usano i colori della bacheca con testo leggibile e contrastante, mantengono le etichette «In corso», «Bloccato» e «Fatto» e non si affidano mai al solo colore per comunicare lo stato. Leggi la specifica di supporto ## Sistema di design Monday Vibe Usa la notazione abbreviata completa per i font ### I titoli e le righe di lavoro hanno caratteri distinti La fonte assegna Poppins ai titoli e Figtree al testo del corpo, con fallback specifici per i sistemi di scrittura. La notazione abbreviata corrente h1-medium è 600 32px/40px, mentre text2-normal è 400 14px/20px. Applica la notazione con la proprietà CSS font, così peso, dimensione, interlinea e famiglia restano collegati. La fonte contiene anche alias obsoleti per le intestazioni: non sostituirli senza avviso con valori di scala diversi. Leggi la specifica di supporto ### Carica i file dei font in modo esplicito Vibe non importa automaticamente i file dei font consigliati. Aggiungi all’applicazione il link documentato al foglio di stile Figtree/Poppins HTML oppure ospita autonomamente file con licenza adeguata. L’esempio offline usa esplicitamente font di sistema come fallback: il risultato è quindi un’interpretazione, non una riproduzione dichiarata della tipografia esatta di monday.com. Leggi la specifica di supporto ## Sistema di design Monday Vibe Una bacheca compatta senza controlli compressi ### Gli spazi numerati definiscono il ritmo Usa --space-8 tra le azioni adiacenti della barra degli strumenti, --space-16 per la spaziatura interna del pannello e --space-24 tra le aree della bacheca. Sono tutti nomi esatti della fonte corrente. Queste disposizioni sono scelte specifiche per questa applicazione. La scala comprende anche un intervallo di due pixel per gli allineamenti di precisione e valori più ampi, fino a ottanta pixel, per la composizione. Leggi la specifica di supporto ### Gli angoli definiscono il contenimento Gli alias small corrispondono a quattro pixel, medium a otto e big a sedici. Usa un angolo medium per il contenitore della bacheca, lasciando invece squadrate e allineate le celle della tabella. Arrotondare ogni cella colorata come un badge rende più difficile leggere a colpo d’occhio le relazioni tra le colonne dense. Leggi la specifica di supporto ## Sistema di design Monday Vibe Una tabella modificabile con una barra degli strumenti per le operazioni in blocco ### Mantieni esplicita la struttura dei dati Ogni elemento di lavoro ha un ID stabile, un titolo, un responsabile e uno stato. Le intestazioni native delle colonne spiegano questi valori. La casella di selezione di una riga aggiunge l’ID a un Set; quando cambia lo stato, l’oggetto corrispondente viene sostituito anziché modificare l’array. L’azione «Completa selezionati» legge lo stesso Set e aggiorna solo le righe selezionate. Il riepilogo dei completamenti deriva dalle righe. - Il pulsante primario per le azioni in blocco è disabilitato quando il Set di selezione è vuoto. - L’azione terziaria di ogni riga alterna lo stato locale a scopo dimostrativo. - L’azione di ripristino riporta le righe allo stato iniziale e cancella la selezione. Leggi la specifica di supporto ## Sistema di design Monday Vibe Sistema di progettazione: esponi lo stato tramite il Button effettivo API ### Disabilitato, in caricamento e premuto sono stati diversi L’esempio nativo usa disabled per un’azione in blocco non disponibile. Non mostra stati di caricamento o di successo perché non è prevista alcuna operazione remota. Se colleghi un livello di persistenza reale, associa lo stato di caricamento al ciclo di vita della richiesta e aggiorna lo stato di successo solo dopo la conferma. Il sorgente di Button espone anche active per l’aspetto e aria-pressed per la semantica di attivazione: l’uno non sostituisce l’altro. Leggi la specifica di supporto ### Non presentare le modifiche locali come operazioni di un servizio Il messaggio dinamico indica quanti elementi locali sono cambiati. Non afferma che sia stata aggiornata una board di monday.com. Al ricaricamento, vengono ripristinati i dati di esempio iniziali. Un’integrazione di produzione richiederebbe autorizzazioni esplicite per l’area di lavoro, gestione degli errori e sincronizzazione al di fuori del livello del sistema di progettazione. Leggi la specifica di supporto ## Sistema di design Monday Vibe Sistema di progettazione: mantieni il significato delle righe a ogni larghezza ### Adatta con cura il layout della dimostrazione Sui dispositivi con schermo stretto, la bacheca offline dispone ogni riga in una scheda con etichette. I nomi delle colonne vengono ripetuti come etichette visibili, così che responsabile e stato restino comprensibili. È una scelta di layout dell’applicazione, non l’affermazione che Vibe trasformi automaticamente ogni tabella. In alternativa, lo starter nativo mantiene una tabella semantica in un’area con scorrimento orizzontale e un’etichetta, adatta a dati più densi. Leggi la specifica di supporto ### Il box sizing globale è un prerequisito Applica box-sizing: border-box agli elementi e agli pseudoelementi prima di usare la libreria. Altrimenti, una cella di larghezza fissa con padding può superare le dimensioni previste, soprattutto quando un pulsante è annidato in una colonna densa. Mantieni flessibile il contenitore esterno e consenti alle azioni della barra degli strumenti di andare a capo. Leggi la specifica di supporto ## Sistema di design Monday Vibe Sistema di progettazione: selezione e stato devono avere nomi indipendenti ### Assegna un’etichetta a ogni controllo di riga Una casella di selezione include il titolo dell’attività nel nome accessibile. Ogni azione di stato include il nome dell’elemento e il suo stato corrente. Un messaggio di stato non intrusivo comunica il risultato dell’operazione in blocco. Chi usa la tastiera può selezionare le righe, attivare il comando in blocco e reimpostare la bacheca con i controlli nativi; la pagina non introduce comportamenti di navigazione con i tasti freccia tipici dei fogli di calcolo. 1. Seleziona Design handoff e verifica che l’azione in blocco diventi disponibile. 2. Completa la selezione e controlla che il testo dello stato e il conteggio derivato corrispondano. 3. Reimposta e verifica che sia i dati sia la selezione delle caselle tornino allo stato iniziale. Leggi la specifica di supporto ## Sistema di design Monday Vibe Sistema di progettazione: una voce client completa ### Installa, importa, monta La configurazione seguente è un file main.jsx per un progetto client React che contiene un elemento radice. Installa react, react-dom e @vibe/core@4, carica una sola volta il token CSS e applica il foglio di stile globale indicato. Il pacchetto attuale usa esportazioni ES module. L’estrazione degli stili lato server è documentata come sperimentale; questo starter usa intenzionalmente il rendering lato client. Leggi la specifica di supporto ## Sistema di design Monday Vibe Esempi di componenti del sistema di progettazione ### Esempio interattivo completo e autonomo Salva il documento completo come index.html e aprilo in un browser. Interpretazione indipendente di HTML/CSS basata sulle dimensioni verificate della palette, della spaziatura e della tipografia del tema chiaro di Vibe; font di fallback 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.

``` Riferimento del codice - La barra degli strumenti in blocco modifica gli stati delle attività di esempio. I colori delle etichette descrivono il flusso di lavoro di questa bacheca e non sostituiscono i token semantici di azione di Vibe. ### Implementazione nativa completa L’implementazione completa descritta nella configurazione, raccolta qui insieme alle spiegazioni specifiche di API. Segui i prerequisiti documentati per pacchetti e build nella configurazione. ``` // 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(); ``` Riferimento del codice - Voce locale completa della bacheca; aggiungi board.css dall’esempio del componente. I font non vengono inclusi automaticamente. Il pacchetto nativo API è stato verificato rispetto alla fonte ufficiale; in questo ambiente l’esempio del pacchetto non è stato compilato. ### Foglio di stile della bacheca basato sui token Usa l’esportazione dei token per il layout e la tipografia. La regione contenitore mantiene la tabella semantica utilizzabile anche con larghezze ridotte. ``` *,*::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)} ``` Riferimento del codice - Si tratta dell’applicazione CSS che usa variabili Vibe reali. - L’anteprima incorporata usa un’interpretazione indipendente e adattabile di HTML. ### Caricamento dei font nell’applicazione HTML Carica esplicitamente le due famiglie consigliate; l’importazione dei token CSS non le scarica. ``` ``` Riferimento del codice - Questa configurazione di font ospitati autonomamente e con licenza può sostituire il foglio di stile esterno. ## Sistema di design Monday Vibe Configurazione dell’agente per il sistema di progettazione ### Punto di partenza per l’implementazione Voce locale completa della bacheca; aggiungi board.css dall’esempio del componente. I font non vengono inclusi automaticamente. Il pacchetto nativo API è stato verificato rispetto alla fonte ufficiale; in questo ambiente l’esempio del pacchetto non è stato compilato. ``` // 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(); ``` ### Un prompt per il tuo progetto ``` Crea la bacheca di consegna Vibe 4 fornita. Importa @vibe/core/tokens, usa le variabili di spaziatura numerate attuali e le forme abbreviate complete dei font, e mantieni distinti i colori semantici di feedback da quelli delle etichette della bacheca. Implementa la selezione locale delle righe, la modifica degli stati e un conteggio derivato degli elementi completati. Usa disabled sul pulsante in blocco; non simulare il salvataggio remoto. ``` ## Sistema di design Monday Vibe Fonti e ambito del sistema di progettazione Riferimento indipendente a Vibe 4 e demo locale della bacheca. Nessun account monday.com, dato di workspace o collegamento SDK. Lo starter nativo usa i controlli Button reali di Vibe e markup della tabella gestito dall’applicazione. - Panoramica di Vibe 4 Pacchetto attuale, voce dei token e limiti delle versioni precedenti. - Integrazione del core Importazioni radice, box sizing globale e font caricati separatamente. - Fonte del tema chiaro Colori semantici, colori delle etichette della bacheca e ombre. - Fonte della spaziatura Variabili di spazio numerate attuali. - Fonte della tipografia Famiglie Figtree/Poppins e stili abbreviati. - Fonte dei raggi Token degli angoli, numerici e con nome. - Fonte dei pulsanti Semantica dei controlli per azioni, stati disabilitati, caricamento e pressione. - Esportazioni del pacchetto Voce ES module ed esportazione dei token CSS. ## Sistema di design Monday Vibe Risorse correlate del sistema di progettazione ### Morningstar sistema di design Crea un’interfaccia di ricerca in cui i numeri siano allineati, i colori degli asset mantengano il loro significato e la tipografia resti leggibile. Esplora le costanti MDS, l’adozione di Vue 3, la transizione a Morningstar Intrinsic e un quaderno fittizio di allocazione ordinabile. ### Mozilla Protocol Una guida editoriale Protocol con stack di font reali, scale di spaziatura e larghezza dei contenitori, una pagina di lettura illustrata e responsiva e un esempio completo di modulo nativo CSS. ### Nord sistema di design Esamina i token del tema Therapy di Nord e i contratti dei Web Component attraverso una bozza di richiesta per una sala: ruoli cromatici reali, dimensionamento responsive dei campi, convalida esplicita e risultati preparati localmente. - [Riferimento per l’implementazione](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) - [Leggi la specifica di supporto](https://github.com/mondaycom/vibe) - [Leggi la specifica di supporto](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/themes/light-theme.scss) - [Leggi la specifica di supporto](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/typography.scss) - [Leggi la specifica di supporto](https://github.com/mondaycom/vibe/blob/master/packages/core/README.md) - [Leggi la specifica di supporto](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/spacing.scss) - [Leggi la specifica di supporto](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/border-radius.scss) - [Leggi la specifica di supporto](https://github.com/mondaycom/vibe/blob/master/packages/components/button/src/Button/Button.tsx) - [Leggi la specifica di supporto](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/core/package.json) - [Riferimento del codice](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/themes/light-theme.scss) - [Riferimento del codice](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/spacing.scss) - [Riferimento del codice](https://github.com/mondaycom/vibe/blob/master/packages/core/README.md) - [Panoramica di Vibe 4 Pacchetto attuale, voce dei token e limiti delle versioni precedenti.](https://github.com/mondaycom/vibe) - [Integrazione del core Importazioni radice, box sizing globale e font caricati separatamente.](https://github.com/mondaycom/vibe/blob/master/packages/core/README.md) - [Fonte del tema chiaro Colori semantici, colori delle etichette della bacheca e ombre.](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/themes/light-theme.scss) - [Fonte della spaziatura Variabili di spazio numerate attuali.](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/spacing.scss) - [Fonte della tipografia Famiglie Figtree/Poppins e stili abbreviati.](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/typography.scss) - [Fonte dei raggi Token degli angoli, numerici e con nome.](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/border-radius.scss) - [Fonte dei pulsanti Semantica dei controlli per azioni, stati disabilitati, caricamento e pressione.](https://github.com/mondaycom/vibe/blob/master/packages/components/button/src/Button/Button.tsx) - [Esportazioni del pacchetto Voce ES module ed esportazione dei token CSS.](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/core/package.json)