Entenda o Braid por meio de uma composição original para busca de empregos: variáveis com escopo de tema, quatro breakpoints reais, texto contextual, botões com tonalidades distintas e um campo controlado que explica a validação em vez de desativar a ação.
Interpretação original e offline de HTML da composição de busca, hierarquia e orientações sobre pontos de quebra de Braid; sem dados ativos da SEEK nem execução de Braid. As cores da pré-visualização e o espaçamento físico são escolhas da aplicação. · Referência de implementação
02
SEEK Braid Referência de design do sistema de design
Referências atuais de componentes de Braid e de CSS. Os tamanhos nomeados são definidos pelo tema selecionado; não são inventadas equivalências em pixels não verificadas nem nomes de variáveis CSS gerados. O exemplo nativo seleciona seekJobs explicitamente.
Sistema de design SEEK Braid: um tema selecionado define o contrato visual
Provider, redefinição e variáveis geradas trabalham em conjunto
Braid oferece suporte a vários temas do SEEK Group. A variável API contém expressões CSS com escopo definido, portanto nomes como vars.space.medium são referências estáveis, enquanto o identificador gerado da propriedade personalizada não deve ser reproduzido manualmente. O exemplo seleciona seekJobs por meio de BraidProvider.
A redefinição deve ser importada antes dos outros estilos de Braid. Em uma aplicação incorporada, styleBody={false} pode impedir que o provider altere o fundo e o espaçamento do elemento body da página hospedeira. Essa opção não elimina a necessidade do contexto do tema.
Sistema de design SEEK Braid: os valores responsivos usam os espaçamentos nomeados do tema
Mantenha as quatro condições reais de ponto de quebra
Os limites compartilhados são: celular a partir de zero, tablet em 740px, desktop em 992px e telas largas em 1200px. O exemplo nativo altera o preenchimento no limiar de tablet por meio de um objeto de propriedades responsivas. Ele não duplica uma consulta de mídia CSS para essa mesma alteração.
O espaçamento médio de um tema não é apresentado aqui como um valor em pixels presumido. Box e Stack são a primeira opção para espaçamento. vars é a alternativa de nível mais baixo quando um layout não pode ser expresso por esses componentes; como seus valores são expressões CSS, a multiplicação deve ser feita com calc, e não com operações aritméticas numéricas em JavaScript.
Sistema de design SEEK Braid: as funções de texto preservam o contexto das cores ao redor
Escolha a hierarquia e a semântica de forma independente
Text oferece tamanhos e pesos nomeados, enquanto Heading expressa a hierarquia dos títulos. A cidade de uma vaga pode usar um tom secundário, mas o título deve manter destaque suficiente para identificar o resultado. Text pode renderizar um parágrafo com component="p" quando o conteúdo for um parágrafo, em vez de escolher um elemento HTML apenas por sua aparência padrão.
Braid ajusta os tons de primeiro plano para contextos com fundos escuros. Para uma imagem original ou um fundo personalizado, um contexto Box customDark comunica essa relação. Não se pode presumir que uma div com cor definida manualmente ofereça o mesmo comportamento contextual.
Sistema de design SEEK Braid: o tom expressa significado; variant, destaque
Reserve o destaque da marca para a ação de busca
O exemplo combina explicitamente a variante solid com brandAccent para Search jobs. Clear search é uma ação ghost mais discreta. formAccent pode dar destaque a ações de formulário repetíveis; critical é reservado a consequências destrutivas e não deve ser usado para tornar controles comuns mais chamativos.
O padrão de Braid é sutil: um botão neutro é ghost, salvo indicação em contrário, enquanto definir um tom torna a variante implícita solid. Especificar ambas as props em uma ação principal deixa clara a hierarquia pretendida. Actions cuida do empilhamento habitual em dispositivos móveis e da disposição em linha em telas mais largas.
Sistema de design SEEK Braid: uma mensagem de erro com ação é melhor do que um botão indisponível
Use o contrato de campo controlado
O callback onChange de TextField recebe o React evento de entrada. O exemplo lê event.target.value, armazena o texto em edição e altera a busca aplicada somente quando a pessoa ativa Search. Um callback de limpeza é fornecido porque o controle não consegue limpar sozinho o estado da aplicação.
message explica o erro de consulta vazia, e o tom critical define seu estado visual. description é reservado a informações contextuais persistentes. Um componente Button do Braid desativado normalmente não é compatível; a ação permanece disponível para que a pessoa possa descobrir como prosseguir. A prévia offline também move o foco para o campo inválido.
Mantenha as edições no estado da consulta em rascunho.
Ao selecionar Search, exija uma consulta não vazia após remover os espaços em branco das extremidades.
Exiba uma mensagem crítica útil em caso de falha.
Aplique a consulta se ela for válida e mantenha um estado explícito para resultados vazios.
Sistema de design SEEK Braid: o exemplo usa apenas dados originais
Os resultados locais não representam vagas ativas
A prévia contém três registros fictícios de vagas, com metadados de cargo, cidade e local de trabalho. A busca compara o título e a cidade sem diferenciar maiúsculas de minúsculas. Ela não busca anúncios ativos no SEEK, e os resultados são identificados como exemplos.
Manter o texto em edição separado dos resultados aplicados torna a interação perceptível: editar um cargo não substitui silenciosamente os resultados atuais antes de pressionar Search. Clear search redefine os dois valores. Quando nenhum resultado corresponde, a lista informa o que ocorreu e mantém os controles de busca acessíveis.
Exiba a contagem de resultados após aplicar uma consulta.
Mantenha clara a última consulta aplicada durante a edição.
Não adicione um envio falso de Apply aos anúncios de exemplo.
Sistema de design SEEK Braid: use uma compilação que extraia os estilos de Braid
A instalação de um pacote é apenas uma parte da configuração
A configuração oficial é otimizada para sku. O estilo Vanilla Extract de Braid precisa de integração à compilação em um empacotador personalizado, enquanto o reset e o tema selecionado devem ser incluídos na ordem documentada. O código fornecido é uma entrada completa para um projeto sku compatível já existente, não uma afirmação de que uma tag de script aleatória possa executar Braid.
Braid executa verificações de desenvolvimento e avisos com base no ambiente. As orientações oficiais de compilação descrevem como remover as verificações e substituir o ambiente durante a compilação para produção. Mantenha essa consideração no fluxo de implementação; o exemplo offline HTML da página não depende de uma compilação de pacote.
SEEK Braid Exemplos de componentes do sistema de design
Exemplo interativo completo e independente
Salve o documento completo como index.html e abra-o em um navegador. Interpretação offline HTML original da composição de busca, da hierarquia e das orientações sobre pontos de interrupção de Braid; sem dados ativos do SEEK nem o ambiente de execução do Braid. As cores da prévia e o espaçamento físico são escolhas da aplicação.
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>
A busca considera as vagas fictícias incluídas. A entrada nativa de Braid exige sua compilação de extração de estilos e o tema seekJobs selecionado.
Consulta em rascunho, busca aplicada e recuperação explícita
Um TextField controlado valida uma consulta local, Actions agrupa dois estilos diferentes de botão e Card/Stack/Heading/Text renderizam resultados originais.
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 recebe o evento de entrada, não uma string simples.
Uma consulta vazia mantém Search disponível e explica o que deve ser informado.
Clear search redefine o texto em rascunho e os resultados aplicados.
04
SEEK Braid Configuração do agente de sistema de design
Ponto de partida para implementação
Entrada completa da aplicação para uma compilação sku existente, compatível diretamente com a configuração oficial. Empacotadores personalizados exigem integração com Vanilla Extract. A importação do reset deve permanecer em primeiro lugar. A prévia offline não afirma compilar o pacote nativo.
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>);
Um prompt para seu projeto
Prompt para agente de IA
Componha uma busca Braid usando o tema seekJobs, com o reset em primeiro lugar, o estado do evento TextField e Actions. Use explicitamente brandAccent solid para a busca principal e um reset ghost neutro. Permita tentativas de busca vazias e explique o erro; nunca desative o Button comum para ocultar a validação.
05
SEEK Braid Fontes e escopo do sistema de design
Referência independente OpenDesign. Anúncios de exemplo originais, sem vagas ativas nem envio de candidatura. As variáveis nomeadas de Braid são resolvidas pelo tema selecionado.
