Scopri Braid attraverso una composizione originale per la ricerca di lavoro: variabili circoscritte al tema, quattro breakpoint reali, testo contestuale, tonalità distinte per i pulsanti e un campo controllato che spiega la convalida invece di disattivare l’azione.
Interpretazione offline originale HTML della composizione di ricerca, della gerarchia e delle indicazioni sui breakpoint di Braid; non usa dati SEEK in tempo reale né il runtime di Braid. I colori dell’anteprima e la spaziatura fisica sono scelte applicative. · Riferimento per l’implementazione
02
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.
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.
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.
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.
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.
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.
Mantieni le modifiche nello stato della query in bozza.
Al momento della ricerca, richiedi una query non vuota dopo aver rimosso gli spazi iniziali e finali.
Visualizza un messaggio utile e pertinente in caso di errore.
Applica la query se valida e mantieni esplicito lo stato senza risultati.
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.
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.
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.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Braid sample job search interpretation</title><style>*{box-sizing:border-box}body{margin:0;background:#f5f5f5;color:#222;font:16px/1.5 system-ui,sans-serif}header{background:white;padding:16px 32px;border-bottom:1px solid #ddd;display:flex;align-items:center;justify-content:space-between}header strong{color:#0d3880;font-size:20px}header span{font-size:14px;color:#666}.hero{background:#0d3880;color:white;padding:32px}.hero-inner{max-width:980px;margin:auto}h1{font-size:32px;line-height:1.2;margin:0 0 24px}form{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:end}label{display:block;font-weight:600;margin-bottom:8px}input{height:48px;border:1px solid #aaa;border-radius:4px;padding:10px 12px;font:inherit;width:100%;min-width:0;color:#222}input[aria-invalid=true]{border:2px solid #c90040}button{height:48px;border:1px solid transparent;border-radius:4px;font:600 16px/1.2 system-ui;padding:0 24px;cursor:pointer}.search{background:#e60278;color:white}.clear{background:transparent;color:white;border-color:white}button:focus-visible,input:focus-visible{outline:3px solid #69d8ff;outline-offset:3px}.error{background:white;color:#b70040;padding:8px 12px;margin:16px 0 0;border-radius:4px}.error:empty{display:none}.help{font-size:14px;color:#e4eaf6;margin:16px 0 0}main{max-width:1044px;margin:32px auto;padding:0 32px}.results-head{display:flex;justify-content:space-between;gap:16px;margin-bottom:20px}h2{font-size:24px;line-height:1.3;margin:0 0 8px}.applied{font-size:14px;color:#555}article{display:grid;grid-template-columns:1fr 100px;gap:24px;padding:24px;background:white;border:1px solid #ddd;border-radius:4px;margin-bottom:16px}.company{font-size:14px;color:#555}.meta{margin:16px 0;display:flex;gap:8px;flex-wrap:wrap}.meta span{background:#f0f4fb;padding:4px 8px;font-size:12px;border-radius:4px}article p{margin:0;color:#555;font-size:14px}.monogram{background:#f1e5f4;color:#673b78;height:72px;width:72px;border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:24px;justify-self:end}.monogram.blue{color:#0d3880;background:#e4efff}.monogram.green{color:#326342;background:#e8f4eb}.notice{background:white;border:1px solid #ddd;padding:24px}.boundary{font-size:12px;color:#666;margin:24px 0}@media(max-width:739px){header{padding:16px}header span{display:none}.hero{padding:24px 16px}h1{font-size:28px}form{grid-template-columns:1fr;gap:12px}form button{width:100%}main{padding:0 16px;margin:24px auto}article{padding:20px;grid-template-columns:1fr 48px;gap:12px}.monogram{height:48px;width:48px;font-size:18px}article h2{font-size:20px}.results-head{display:block}}</style><header><strong>Possibilities</strong><span>Original job-search specimen</span></header><section class="hero"><div class="hero-inner"><h1>Find your next possibility.</h1><form novalidate><div><label for="query">Role or city</label><input id="query" type="search" placeholder="Try designer or Melbourne" aria-describedby="error help"></div><button class="search" type="submit">Search jobs</button><button class="clear" type="button" id="clear">Clear search</button></form><div id="error" class="error" role="alert"></div><p id="help" class="help">Search three original sample roles. These are not live vacancies.</p></div></section><main><div class="results-head"><div><h2 id="count">3 sample results</h2><div class="applied" id="applied">Showing all sample roles</div></div></div><div id="results"></div><p class="boundary">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.</p></main><script>const jobs=[{title:'Product designer',city:'Melbourne',company:'North Studio',type:'Full time',mode:'Hybrid',initial:'NS',color:'',description:'Shape useful experiences with a small multidisciplinary product team.'},{title:'Design systems engineer',city:'Sydney',company:'Harbour Works',type:'Full time',mode:'Flexible',initial:'HW',color:'blue',description:'Build accessible components and improve the way teams deliver interfaces.'},{title:'UX researcher',city:'Melbourne',company:'Fern Collective',type:'Contract',mode:'On site',initial:'FC',color:'green',description:'Turn thoughtful field research into clear product opportunities.'}];const input=document.querySelector('#query'),error=document.querySelector('#error');let applied='';function render(){let matches=jobs.filter(j=>(j.title+' '+j.city).toLowerCase().includes(applied.toLowerCase()));document.querySelector('#count').textContent=matches.length+' sample '+(matches.length===1?'result':'results');document.querySelector('#applied').textContent=applied?'Applied search: '+applied:'Showing all sample roles';document.querySelector('#results').innerHTML=matches.length?matches.map(j=>`<article><div><h2>${j.title}</h2><div class="company">${j.company} · ${j.city}</div><div class="meta"><span>${j.type}</span><span>${j.mode}</span><span>Sample listing</span></div><p>${j.description}</p></div><div class="monogram ${j.color}" aria-hidden="true">${j.initial}</div></article>`).join(''):'<div class="notice">No sample roles match. Try another role or city, or clear your search.</div>'}document.querySelector('form').onsubmit=e=>{e.preventDefault();if(!input.value.trim()){error.textContent='Enter a role or city.';input.setAttribute('aria-invalid','true');input.focus();return}error.textContent='';input.removeAttribute('aria-invalid');applied=input.value.trim();render()};input.oninput=()=>{error.textContent='';input.removeAttribute('aria-invalid')};document.querySelector('#clear').onclick=()=>{input.value='';applied='';error.textContent='';input.removeAttribute('aria-invalid');render();input.focus()};render();</script></html>
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.
jsx
// 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 <Box component="main" padding={{mobile:'medium',tablet:'xlarge'}}>
<Stack space="large">
<Heading level="2">Find your next possibility</Heading>
<TextField id="job-query" label="Role or city" value={draft}
onChange={event=>{setDraft(event.target.value);setError('');}}
onClear={()=>setDraft('')} clearLabel="Clear role or city"
tone={error?'critical':'neutral'} message={error||'Search three original sample roles.'}/>
<Actions><Button tone="brandAccent" variant="solid" onClick={search}>Search jobs</Button>
<Button variant="ghost" onClick={clear}>Clear search</Button></Actions>
<Text>{results.length} sample results</Text>
{results.map(job=><Card key={job.id}><Stack space="small"><Heading level="3">{job.title}</Heading><Text tone="secondary">{job.city}</Text></Stack></Card>)}
{!results.length&&<Text>No sample roles match. Try a different title or city.</Text>}
<Text size="small" tone="secondary">These are sample listings, not live vacancies.</Text>
</Stack>
</Box>;
}
createRoot(document.getElementById('root')).render(<BraidProvider theme={seekJobsTheme}><JobSearch/></BraidProvider>);
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.
04
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.
jsx
// 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 <Box component="main" padding={{mobile:'medium',tablet:'xlarge'}}>
<Stack space="large">
<Heading level="2">Find your next possibility</Heading>
<TextField id="job-query" label="Role or city" value={draft}
onChange={event=>{setDraft(event.target.value);setError('');}}
onClear={()=>setDraft('')} clearLabel="Clear role or city"
tone={error?'critical':'neutral'} message={error||'Search three original sample roles.'}/>
<Actions><Button tone="brandAccent" variant="solid" onClick={search}>Search jobs</Button>
<Button variant="ghost" onClick={clear}>Clear search</Button></Actions>
<Text>{results.length} sample results</Text>
{results.map(job=><Card key={job.id}><Stack space="small"><Heading level="3">{job.title}</Heading><Text tone="secondary">{job.city}</Text></Stack></Card>)}
{!results.length&&<Text>No sample roles match. Try a different title or city.</Text>}
<Text size="small" tone="secondary">These are sample listings, not live vacancies.</Text>
</Stack>
</Box>;
}
createRoot(document.getElementById('root')).render(<BraidProvider theme={seekJobsTheme}><JobSearch/></BraidProvider>);
Un prompt per il tuo progetto
Prompt per l’agente
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.
05
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.
