Découvrez Braid à travers une composition originale de recherche d’emploi : des variables propres à chaque thème, quatre véritables points de rupture, du texte contextuel, des styles de boutons distincts et un champ contrôlé qui explique les erreurs de validation au lieu de désactiver l’action.
Interprétation hors ligne originale HTML de la composition, de la hiérarchie et des consignes de points de rupture de la recherche Braid ; aucune donnée SEEK en temps réel ni aucun moteur Braid. Les couleurs d’aperçu et l’espacement physique sont des choix propres à l’application. · Référence de mise en œuvre
02
Référence de conception du système de design SEEK Braid
Références actuelles des composants Braid et de CSS. Les tailles nommées sont résolues selon le thème sélectionné ; aucune équivalence en pixels non vérifiée ni aucun nom de variable CSS généré n’est inventé ici. L’exemple natif sélectionne explicitement seekJobs.
Système de design SEEK Braid : un thème sélectionné définit le contrat visuel
Le fournisseur, la réinitialisation et les variables générées fonctionnent ensemble
Braid prend en charge plusieurs thèmes du groupe SEEK. Sa variable API contient des expressions CSS avec portée ; les noms comme vars.space.medium sont donc des références stables, tandis que l’identifiant de propriété personnalisée généré ne doit pas être reproduit manuellement. L’exemple sélectionne seekJobs via BraidProvider.
La réinitialisation doit être importée avant les autres styles Braid. Dans une application intégrée, styleBody={false} peut empêcher le fournisseur de modifier l’arrière-plan et l’espacement du corps de page hôte. Cette option ne supprime pas la nécessité du contexte de thème.
Système de design SEEK Braid : les valeurs adaptatives utilisent les espacements nommés du thème
Conservez les quatre véritables conditions de point de rupture
Les seuils partagés sont de 0 pour mobile, 740px pour tablette, 992px pour ordinateur de bureau et 1200px pour grand écran. L’exemple natif modifie le remplissage au seuil tablette au moyen d’un objet de propriétés adaptatives. Il ne duplique pas une requête média CSS pour ce même changement.
La valeur d’espacement medium d’un thème n’est pas présentée ici comme une valeur en pixels supposée. Box et Stack sont à privilégier pour l’espacement. vars est la solution de repli de bas niveau lorsqu’une mise en page ne peut pas être exprimée avec ces composants ; comme ses valeurs sont des expressions CSS, la multiplication doit utiliser calc et non une opération arithmétique numérique JavaScript.
Système de design SEEK Braid : les rôles de texte héritent du contexte de couleur qui les entoure
Choisissez séparément la hiérarchie et la sémantique
Text propose des tailles et des graisses nommées, tandis que Heading exprime la hiérarchie des titres. La ville associée à un emploi peut utiliser le ton secondaire, mais le titre doit rester suffisamment mis en évidence pour permettre d’identifier le résultat. Text peut afficher un paragraphe au moyen de component="p" lorsque le contenu en est un, au lieu de choisir un élément HTML uniquement pour son apparence par défaut.
Braid adapte les tons de premier plan aux contextes d’arrière-plan sombre. Avec une image d’origine ou un arrière-plan personnalisé, un contexte Box customDark exprime cette relation. Il ne faut pas supposer qu’un div dont la couleur est définie manuellement offre le même comportement contextuel.
Système de design SEEK Braid : le ton exprime le sens ; la variante, le niveau de mise en évidence
Réservez la couleur d’accent de marque à l’action de recherche
L’exemple associe explicitement la variante solid au ton brandAccent pour le bouton Search jobs. Clear search est une action ghost plus discrète. formAccent peut mettre en évidence les actions de formulaire répétables ; critical est réservé aux conséquences destructrices et ne doit pas servir à rendre des commandes ordinaires plus visibles.
Le comportement par défaut de Braid est nuancé : un bouton neutre est ghost sauf indication contraire, tandis que la définition d’un ton entraîne implicitement la variante solid. Préciser les deux propriétés pour une action clé permet de clarifier la hiérarchie souhaitée. Actions gère l’empilement habituel sur mobile et la disposition en ligne sur les écrans plus larges.
Système de design SEEK Braid : un message d’erreur qui indique comment agir vaut mieux qu’un bouton indisponible
Respectez le contrat du champ contrôlé
Le rappel onChange de TextField reçoit l’événement React input. L’exemple lit event.target.value, stocke le texte provisoire et ne modifie la recherche appliquée que lorsque l’utilisateur active Search. Un rappel de réinitialisation est fourni, car le contrôle ne peut pas, à lui seul, effacer l’état de l’application.
message explique l’erreur liée à une requête vide et le ton critical en définit l’état visuel. description est réservé au contexte persistant. Un Braid Button désactivé classique n’est pas pris en charge ; l’action reste disponible afin que la personne puisse comprendre comment poursuivre. L’aperçu hors ligne déplace également le focus vers le champ invalide.
Conservez les modifications dans l’état de la requête provisoire.
Lors de la recherche, exigez une requête non vide après suppression des espaces en début et fin.
Afficher un message critique utile en cas d’échec.
Appliquez la requête si elle est valide et conservez un état explicite pour les résultats vides.
Système de design SEEK Braid : l’exemple ne recherche que dans les données d’origine
Des résultats locaux ne signifient pas que les offres d’emploi sont à jour.
L’aperçu contient trois offres d’emploi fictives, avec des métadonnées sur le poste, la ville et le lieu de travail. La recherche compare le titre et la ville sans tenir compte de la casse. Elle ne récupère pas les offres SEEK en temps réel, et les résultats sont indiqués comme des exemples.
En séparant le texte saisi des résultats appliqués, l’interaction reste compréhensible : modifier un poste ne remplace pas silencieusement les résultats actuels avant d’avoir appuyé sur Rechercher. Effacer la recherche réinitialise les deux valeurs. Lorsqu’aucun résultat ne correspond, la liste l’indique et les commandes de recherche restent accessibles.
Afficher le nombre de résultats après l’application d’une requête.
Pendant la modification, garder la dernière requête appliquée clairement identifiable.
Ne pas ajouter de faux bouton de candidature aux offres d’exemple.
Utilisez une compilation qui extrait les styles de Braid pour le système de design SEEK Braid
L’installation d’un package ne représente qu’une partie de la configuration
La configuration officielle est optimisée pour sku. Le style de Braid basé sur Vanilla Extract nécessite une intégration à la compilation dans un bundler personnalisé, tandis que la réinitialisation et le thème sélectionné doivent être intégrés à l’application dans l’ordre indiqué dans la documentation. Le code fourni constitue un point d’entrée complet pour un projet sku compatible existant ; il ne prétend pas que Braid fonctionne à partir d’une balise de script quelconque.
Braid effectue des assertions en développement et émet des avertissements en fonction de l’environnement. Les instructions officielles de compilation indiquent comment supprimer les assertions et remplacer l’environnement au moment de la compilation pour la production. Tenez compte de cet aspect dans le processus d’implémentation ; l’exemple hors ligne HTML de la page ne dépend pas de la compilation de ce package.
Exemples de composants du système de design SEEK Braid
Exemple interactif autonome complet
Enregistrez le document complet sous le nom index.html et ouvrez-le dans un navigateur. Interprétation hors ligne HTML originale de la composition de recherche, de la hiérarchie et des recommandations sur les points de rupture de Braid ; aucun runtime Braid ni donnée SEEK en direct. Les couleurs de l’aperçu et l’espacement physique relèvent des choix de l’application.
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 recherche porte sur les offres fictives incluses. Le point d’entrée natif de Braid nécessite la compilation d’extraction des styles et le thème seekJobs sélectionné.
Requête en cours, recherche appliquée et réinitialisation explicite
Un TextField contrôlé valide une requête locale, Actions regroupe deux styles de bouton distincts, et Card/Stack/Heading/Text affichent des résultats originaux.
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 reçoit l’événement de saisie, et non une chaîne brute.
Si la requête est vide, le bouton Rechercher reste accessible et indique quoi saisir.
Effacer la recherche réinitialise le texte saisi et les résultats appliqués.
04
Configuration d’agent pour le système de design SEEK Braid
Point de départ de l’implémentation
Point d’entrée complet pour une compilation sku existante, prise en charge directement par la configuration officielle. Les bundlers personnalisés nécessitent une intégration de Vanilla Extract. L’importation de la réinitialisation doit rester en premier. L’aperçu hors ligne ne prétend pas compiler le package natif.
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 pour votre projet
Prompt pour l’agent IA
Composez une recherche Braid avec le thème seekJobs, la réinitialisation en premier, l’état de l’événement TextField et Actions. Utilisez solid avec brandAccent pour l’unique recherche principale et ghost avec un style neutre pour la réinitialisation. Autorisez les tentatives de recherche vides et expliquez l’erreur ; ne désactivez jamais le bouton Button standard pour masquer la validation.
05
Sources et périmètre du système de design SEEK Braid
Référence OpenDesign indépendante. Offres d’exemple originales, sans postes vacants en direct ni envoi de candidature. Les variables Braid nommées sont résolues par le thème sélectionné.
