# Sistema di design SEEK Braid ## SEEK Braid Anteprima dell’interfaccia del sistema di design Modifica e applica una ricerca per ruolo o città, controlla un risultato vuoto e cancella sia il campo sia la ricerca applicata. ## SEEK Braid Riferimento di design per il sistema di design Riferimenti correnti ai componenti e a CSS di Braid. Le dimensioni nominali vengono risolte tramite il tema selezionato; qui non si inventano equivalenti in pixel non verificati né nomi di variabili CSS generati. L’esempio nativo seleziona esplicitamente seekJobs. ### Breakpoint responsive | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | mobile | 0 | Stili di base. | | tablet | 740px | Prima condizione per schermi più grandi. | | desktop | 992px | Condizione desktop. | | wide | 1200px | Condizione per schermi ampi. | ### Variabile del tema API | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | vars.space.medium | Theme-scoped CSS expression | Usala direttamente; per i calcoli serve calc. | | vars.space.gutter | Theme gutter expression | Margine interno del layout. | | vars.backgroundColor.body | Theme body background | Superficie della pagina. | | vars.backgroundColor.surface | Theme surface background | Superficie del contenitore. | | vars.backgroundColor.brandAccent | Theme brand action background | Non dare per scontato un valore esadecimale universale. | | vars.foregroundColor.neutral | Theme text role | Contenuto principale. | | vars.foregroundColor.secondary | Theme secondary role | Metadati. | | vars.borderColor.focus | Theme focus role | Focus visibile. | | vars.borderRadius.standard | Theme radius expression | Forma standard. | ### API Layout a riquadri | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | component | div by default | Scegli, secondo necessità, elementi semantici come main, section e form. | | padding | Named space, responsive object allowed | Esempio: medio su mobile / extra-large su tablet. | | gap | Named spacing values | Spaziatura tra elementi adiacenti. | | background="customDark" | Context for custom dark surfaces | Consente di applicare il comportamento corrispondente al colore di primo piano. | | borderRadius | none / small / standard / large / xlarge / full | Forma determinata dal tema. | ### Contratto per testo e campi | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | label / secondaryLabel / tertiaryLabel | Three label levels | Scopo, contesto facoltativo, assistenza. | | description | Below-label context | Annunciato quando il campo riceve il focus. | | message + tone | critical / positive / caution / neutral | Spiega lo stato del campo. | | onClear | Callback required for clear action | L’applicazione reimposta il valore controllato. | | clearLabel | Accessible clear-control label | Localizzalo. | ### Rilievo e comportamento del pulsante | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | variant | solid / ghost / soft / transparent | Enfasi visiva. | | tone | brandAccent / formAccent / critical / neutral | Significato dell’azione. | | No explicit tone | Neutral ghost by default | Stile di base discreto. | | Explicit tone, no variant | Solid default | Specificali entrambi per evitare ambiguità. | | size | standard / small | Dimensioni supportate. | | loading | Also disables interaction | Solo per attività effettivamente in corso. | | Ordinary disabled | Not supported | Consenti i tentativi e spiega gli errori. | ### Semantica del testo | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | size | large / standard / small / xsmall | Scala tipografica del tema. | | weight | regular / medium / strong | Enfasi del testo. | | component="p" | Paragraph element | Aspetto tipografico e semantica sono aspetti distinti. | | maxLines | Number | Limita la quantità di contenuti generati dall’utente visibili. | | tone="secondary" | Metadata emphasis | Non sostituisce un ruolo di errore. | ## Guida completa al sistema di progettazione sistema di design SEEK Braid 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 SEEK Braid: un tema selezionato definisce il contratto visivo ### Provider, reset e variabili generate lavorano insieme > Braid supporta diversi temi del gruppo SEEK. La sua variabile API contiene espressioni CSS con ambito specifico: nomi come vars.space.medium sono quindi riferimenti stabili, mentre l’identificatore della proprietà personalizzata generata non va riprodotto manualmente. L’esempio seleziona seekJobs tramite BraidProvider. Il reset va importato prima degli altri stili Braid. In un’applicazione incorporata, styleBody={false} può impedire al provider di modificare sfondo e spaziatura dell’elemento body della pagina host. Questa opzione non elimina la necessità del contesto del tema. Leggi la specifica di supporto ## Sistema di design SEEK Braid: i valori responsive usano gli spazi nominati del tema ### Mantieni le quattro condizioni reali dei breakpoint Le soglie condivise sono: mobile da zero, tablet a 740px, desktop a 992px e wide a 1200px. L’esempio nativo modifica il padding alla soglia tablet tramite un oggetto di proprietà responsive. Per la stessa modifica non duplica una media query CSS. La spaziatura medium di un tema non è descritta qui con un valore in pixel ipotizzato. Box e Stack sono la prima scelta per gestire la spaziatura. vars è la soluzione di ripiego di livello inferiore quando il layout non si può esprimere con questi componenti; poiché i suoi valori sono espressioni CSS, la moltiplicazione va inserita in calc e non eseguita con aritmetica numerica JavaScript. Leggi la specifica di supporto ## Sistema di design SEEK Braid: i ruoli del testo ereditano il contesto cromatico circostante ### Scegli separatamente gerarchia e semantica Text offre dimensioni e pesi tipografici predefiniti, mentre Heading esprime la gerarchia dei titoli. La città di un’offerta può usare il tono secondario, ma il titolo deve mantenere sufficiente rilievo per identificare il risultato. Text può rendere un paragrafo con component="p" quando il contenuto è un paragrafo, invece di scegliere un elemento HTML solo per il suo aspetto predefinito. Braid adatta i toni di primo piano ai contesti con sfondo scuro. In presenza di un’immagine originale o di uno sfondo personalizzato, il contesto customDark di Box comunica questa relazione. Non si può presumere che un div con colori impostati manualmente offra lo stesso comportamento contestuale. Leggi la specifica di supporto ## Sistema di design SEEK Braid: tone indica il significato, variant il rilievo ### Riserva l’accento del brand all’azione di ricerca L’esempio associa esplicitamente la variante solid a brandAccent per Search jobs. Clear search è un’azione ghost più discreta. formAccent può dare risalto alle azioni ripetibili nei moduli; critical è riservato alle conseguenze distruttive e non va usato per rendere più evidenti i controlli ordinari. Il comportamento predefinito di Braid è sfumato: un pulsante neutro è ghost, salvo diversa indicazione, mentre l’impostazione di un tone rende la variante implicita solid. Specificare entrambe le proprietà per un’azione importante rende chiara la gerarchia prevista. Actions gestisce la consueta disposizione verticale su mobile e quella orizzontale su schermi più ampi. Leggi la specifica di supporto ## Sistema di design SEEK Braid: un errore gestibile è preferibile a un pulsante non disponibile ### Usa il contratto dei campi controllati La callback onChange di TextField riceve l’evento di input React. L’esempio legge event.target.value, memorizza il testo della bozza e modifica la ricerca applicata solo quando l’utente attiva Search. Viene fornita una callback di cancellazione perché il controllo non può azzerare autonomamente lo stato dell’applicazione. message spiega l’errore relativo a una query vuota, mentre il tono critical ne definisce lo stato visivo. description è riservato al contesto persistente. Un normale Braid Button disabilitato non è supportato: l’azione resta disponibile, così chi visita la pagina può capire come procedere. Inoltre, nell’anteprima offline il focus viene spostato sul campo non valido. 1. Mantieni le modifiche nello stato della query in bozza. 2. Al momento della ricerca, richiedi una query non vuota dopo aver rimosso gli spazi iniziali e finali. 3. Visualizza un messaggio utile e pertinente in caso di errore. 4. Applica la query se valida e mantieni esplicito lo stato senza risultati. Leggi la specifica di supporto ## Sistema di design SEEK Braid: l’esempio usa solo dati originali ### I risultati locali non indicano offerte di lavoro aggiornate L’anteprima contiene tre offerte di lavoro inventate con metadati relativi a ruolo, città e modalità di lavoro. La ricerca confronta titolo e città senza distinzione tra maiuscole e minuscole. Non recupera offerte live di SEEK e i risultati sono indicati come esempi. Mantenere separati il testo in bozza e i risultati applicati rende l’interazione osservabile: modificare un ruolo non sostituisce silenziosamente i risultati attuali prima di premere Search. Clear search reimposta entrambi i valori. Se l’elenco non contiene corrispondenze, lo comunica e lascia accessibili i controlli di ricerca. - Mostra il numero di risultati dopo aver applicato una query. - Durante la modifica, mantieni comprensibile l’ultima query applicata. - Non aggiungere un finto invio Apply agli annunci di esempio. Leggi la specifica di supporto ## Sistema di design SEEK Braid: usa una build che estrae gli stili Braid ### Installare un pacchetto è solo una parte della configurazione La configurazione ufficiale è ottimizzata per sku. Gli stili Vanilla Extract di Braid richiedono l’integrazione nella build di un bundler personalizzato, mentre il reset e il tema selezionato devono essere inclusi nell’applicazione nell’ordine documentato. Il codice fornito è un entry point completo per un progetto sku compatibile già esistente; non afferma che Braid possa essere eseguito con un tag script qualsiasi. Braid esegue asserzioni in fase di sviluppo e avvisi basati sull’ambiente. Le istruzioni ufficiali di build indicano di rimuovere le asserzioni e sostituire l’ambiente al momento della build di produzione. Tieni conto di questo aspetto nel flusso di implementazione; l’esempio offline della pagina HTML non dipende da una build di questo tipo. Leggi la specifica di supporto ## Sistema di design SEEK Braid: esempi di componenti ### Esempio interattivo completo e autonomo Salva il documento completo come index.html e aprilo in un browser. Interpretazione offline HTML originale della composizione di ricerca, della gerarchia e delle indicazioni sui breakpoint di Braid; nessun dato SEEK live o runtime Braid. I colori di anteprima e la spaziatura effettiva sono scelte dell’applicazione. ``` Braid sample job search interpretation
PossibilitiesOriginal job-search specimen

Find your next possibility.

Search three original sample roles. These are not live vacancies.

3 sample results

Showing all sample roles

Independent HTML interpretation of Braid’s search composition and responsive guidance. Original content and application palette; no SEEK data, account or application service is connected.

``` Riferimento del codice - La ricerca viene eseguita sulle offerte di lavoro fittizie incluse. L’entry point nativo di Braid richiede una build che estragga gli stili e il tema seekJobs selezionato. ### Query in bozza, ricerca applicata e possibilità esplicita di ripristino Un TextField controllato convalida una query locale, Actions raggruppa due pulsanti con trattamenti distinti, mentre Card/Stack/Heading/Text visualizzano risultati originali. ``` // Entry module in an existing sku application: // npm install braid-design-system import 'braid-design-system/reset'; // Keep this first. import React,{useState} from 'react'; import {createRoot} from 'react-dom/client'; import seekJobsTheme from 'braid-design-system/themes/seekJobs'; import {BraidProvider,Box,Stack,Heading,Text,TextField,Button,Actions,Card} from 'braid-design-system'; const jobs=[{id:1,title:'Product designer',city:'Melbourne'},{id:2,title:'Design systems engineer',city:'Sydney'},{id:3,title:'UX researcher',city:'Melbourne'}]; function JobSearch(){ const [draft,setDraft]=useState(''),[query,setQuery]=useState(''),[error,setError]=useState(''); const results=jobs.filter(j=>(j.title+' '+j.city).toLowerCase().includes(query.toLowerCase())); function search(){if(!draft.trim()){setError('Enter a role or city.');return;}setError('');setQuery(draft.trim());} function clear(){setDraft('');setQuery('');setError('');} return Find your next possibility {setDraft(event.target.value);setError('');}} onClear={()=>setDraft('')} clearLabel="Clear role or city" tone={error?'critical':'neutral'} message={error||'Search three original sample roles.'}/> {results.length} sample results {results.map(job=>{job.title}{job.city})} {!results.length&&No sample roles match. Try a different title or city.} These are sample listings, not live vacancies. ; } createRoot(document.getElementById('root')).render(); ``` Riferimento del codice - onChange riceve l’evento di input, non una stringa semplice. - Con una query vuota, Search resta disponibile e spiega cosa inserire. - Clear search reimposta sia il testo in bozza sia i risultati applicati. ## Configurazione dell’agent per sistema di design SEEK Braid ### Punto di partenza per l’implementazione Entry point completo dell’applicazione per una build sku esistente, supportata direttamente dalla configurazione ufficiale. I bundler personalizzati richiedono l’integrazione di Vanilla Extract. L’importazione del reset deve restare al primo posto. L’anteprima offline non dichiara di eseguire la compilazione nativa del pacchetto. ``` // Entry module in an existing sku application: // npm install braid-design-system import 'braid-design-system/reset'; // Keep this first. import React,{useState} from 'react'; import {createRoot} from 'react-dom/client'; import seekJobsTheme from 'braid-design-system/themes/seekJobs'; import {BraidProvider,Box,Stack,Heading,Text,TextField,Button,Actions,Card} from 'braid-design-system'; const jobs=[{id:1,title:'Product designer',city:'Melbourne'},{id:2,title:'Design systems engineer',city:'Sydney'},{id:3,title:'UX researcher',city:'Melbourne'}]; function JobSearch(){ const [draft,setDraft]=useState(''),[query,setQuery]=useState(''),[error,setError]=useState(''); const results=jobs.filter(j=>(j.title+' '+j.city).toLowerCase().includes(query.toLowerCase())); function search(){if(!draft.trim()){setError('Enter a role or city.');return;}setError('');setQuery(draft.trim());} function clear(){setDraft('');setQuery('');setError('');} return Find your next possibility {setDraft(event.target.value);setError('');}} onClear={()=>setDraft('')} clearLabel="Clear role or city" tone={error?'critical':'neutral'} message={error||'Search three original sample roles.'}/> {results.length} sample results {results.map(job=>{job.title}{job.city})} {!results.length&&No sample roles match. Try a different title or city.} These are sample listings, not live vacancies. ; } createRoot(document.getElementById('root')).render(); ``` ### Un prompt per il tuo progetto ``` Componi una ricerca Braid usando il tema seekJobs, importando prima il reset e gestendo lo stato degli eventi di TextField con Actions. Usa esplicitamente brandAccent solid per l’unica azione di ricerca principale e un reset neutro ghost. Consenti i tentativi di ricerca a query vuota e spiega l’errore; non disabilitare il normale Button per nascondere la convalida. ``` ## Sistema di design SEEK Braid: fonti e ambito Riferimento indipendente OpenDesign. Annunci di esempio originali, nessuna offerta live né invio di candidature. Le variabili Braid con nome vengono risolte tramite il tema selezionato. - Configurazione e build Ordine del reset, sku e Vanilla Extract. - BraidProvider Tema e comportamento del body incorporato. - Variabili Espressioni CSS con ambito specifico e nomi dei ruoli. - Breakpoint Soglie responsive condivise. - Box Elementi semantici e proprietà responsive di utilità. - Testo Dimensione del testo, semantica e toni contestuali. - Button Comportamento di tone, variant e disabled. - TextField Etichette, errori e cancellazione. - Proprietà di TextField Tipi esatti di callback e valore controllato. ## Sistema di design SEEK Braid: risorse correlate ### Segment Evergreen Un riferimento Evergreen con valori tema reali, inserimento controllato di tag, corrispondenza delle regole in tempo reale, un percorso di recupero per lo stato vuoto e un dialogo nativo di revisione. ### Semi Design Crea una configurazione sequenziale dell’area di lavoro con i componenti Steps di base consigliati da Semi, Input e Switch controllati, token tema reali e una scelta esplicita del pacchetto React 18 o React 19. ### Semrush Intergalactic Una guida Intergalactic con token semantici e per grafici aggiornati, controlli nativi per i filtri, confronto a scala fissa, dettagli dell’elemento selezionato e un fixture completo e riproducibile. - [Riferimento per l’implementazione](https://seek-oss.github.io/braid-design-system/components/Button/) - [Fonte](https://seek-oss.github.io/braid-design-system/css/breakpoints/) - [Fonte](https://seek-oss.github.io/braid-design-system/css/vars/) - [Fonte](https://seek-oss.github.io/braid-design-system/components/Box/) - [Fonte](https://seek-oss.github.io/braid-design-system/components/TextField/) - [Fonte](https://seek-oss.github.io/braid-design-system/components/Button/) - [Fonte](https://seek-oss.github.io/braid-design-system/components/Text/) - [Leggi la specifica di supporto](https://seek-oss.github.io/braid-design-system/components/BraidProvider/) - [Leggi la specifica di supporto](https://seek-oss.github.io/braid-design-system/css/breakpoints/) - [Leggi la specifica di supporto](https://seek-oss.github.io/braid-design-system/components/Text/) - [Leggi la specifica di supporto](https://seek-oss.github.io/braid-design-system/components/Button/) - [Leggi la specifica di supporto](https://seek-oss.github.io/braid-design-system/components/TextField/) - [Leggi la specifica di supporto](https://seek-oss.github.io/braid-design-system/components/TextField/props/) - [Leggi la specifica di supporto](https://github.com/seek-oss/braid-design-system) - [Riferimento del codice](https://seek-oss.github.io/braid-design-system/components/Button/) - [Riferimento del codice](https://seek-oss.github.io/braid-design-system/components/TextField/props/) - [Configurazione e build Ordine del reset, sku e Vanilla Extract.](https://github.com/seek-oss/braid-design-system) - [BraidProvider Tema e comportamento del body incorporato.](https://seek-oss.github.io/braid-design-system/components/BraidProvider/) - [Variabili Espressioni CSS con ambito specifico e nomi dei ruoli.](https://seek-oss.github.io/braid-design-system/css/vars/) - [Breakpoint Soglie responsive condivise.](https://seek-oss.github.io/braid-design-system/css/breakpoints/) - [Box Elementi semantici e proprietà responsive di utilità.](https://seek-oss.github.io/braid-design-system/components/Box/) - [Testo Dimensione del testo, semantica e toni contestuali.](https://seek-oss.github.io/braid-design-system/components/Text/) - [Button Comportamento di tone, variant e disabled.](https://seek-oss.github.io/braid-design-system/components/Button/) - [TextField Etichette, errori e cancellazione.](https://seek-oss.github.io/braid-design-system/components/TextField/) - [Proprietà di TextField Tipi esatti di callback e valore controllato.](https://seek-oss.github.io/braid-design-system/components/TextField/props/)