Conoce Braid mediante una composición original de búsqueda de empleo: variables limitadas al tema, cuatro puntos de ruptura reales, texto contextual, tonos de botón diferenciados y un campo controlado que explica la validación en lugar de desactivar la acción.
Interpretación original sin conexión de HTML basada en la composición de búsqueda, la jerarquía y las indicaciones sobre puntos de interrupción de Braid; no usa datos activos de SEEK ni el entorno de ejecución de Braid. Los colores de la vista previa y el espaciado físico son decisiones de la aplicación. · Referencia de implementación
02
Sistema de diseño SEEK Braid Referencia de diseño del sistema
Referencias actuales de componentes de Braid y de CSS. Los tamaños con nombre se resuelven mediante el tema seleccionado; aquí no se inventan equivalencias en píxeles sin verificar ni nombres de variables CSS generados. El ejemplo nativo selecciona explícitamente seekJobs.
Sistema de diseño SEEK Braid: un tema seleccionado resuelve el contrato visual
El proveedor, el restablecimiento y las variables generadas funcionan conjuntamente
Braid se dirige a varios temas del grupo SEEK. Su variable API contiene expresiones CSS con ámbito, por lo que nombres como vars.space.medium son referencias estables, mientras que el identificador de la propiedad personalizada generada no debe reproducirse manualmente. El ejemplo selecciona seekJobs mediante BraidProvider.
El restablecimiento debe importarse antes que los demás estilos de Braid. En una aplicación incrustada, styleBody={false} puede evitar que el proveedor cambie el fondo y el espaciado del body de la aplicación anfitriona. Esa opción no elimina la necesidad del contexto del tema.
Sistema de diseño SEEK Braid: los valores responsivos usan el espacio con nombre del tema
Conserva las cuatro condiciones reales de los puntos de interrupción
Los umbrales compartidos son: móvil en cero, tableta en 740px, escritorio en 992px y pantalla ancha en 1200px. El ejemplo nativo cambia el relleno en el umbral de tableta mediante un objeto de propiedades responsivas. No duplica una consulta de medios CSS para ese mismo cambio.
Aquí no se documenta el espaciado medium de un tema como un valor en píxeles supuesto. Box y Stack son la primera opción para el espaciado. vars es la alternativa de nivel inferior cuando un diseño no puede expresarse con esos componentes; como sus valores son expresiones CSS, la multiplicación debe hacerse con calc, no mediante aritmética numérica JavaScript.
Sistema de diseño SEEK Braid: los roles de Text transmiten el contexto de color que los rodea
Elige la jerarquía y la semántica de forma independiente
Text ofrece tamaños y pesos con nombre, mientras que Heading expresa la jerarquía de títulos. La ciudad de una oferta de empleo puede usar un tono secundario, pero el título debe conservar suficiente prominencia para identificar el resultado. Text puede representar un párrafo mediante component="p" cuando el contenido es un párrafo, en vez de elegir un elemento HTML solo por su apariencia predeterminada.
Braid ajusta los tonos de primer plano para contextos con fondos oscuros. Si se usa una imagen original o un fondo personalizado, el contexto customDark de Box comunica esa relación. No se puede dar por hecho que un div con color aplicado manualmente ofrezca el mismo comportamiento contextual.
Sistema de diseño SEEK Braid: tone indica el significado; variant, la prominencia
Reserva el acento de marca para la acción de búsqueda
El ejemplo combina explícitamente la variante solid con brandAccent para Search jobs. Clear search es una acción ghost más discreta. formAccent puede destacar acciones de formulario repetibles; critical se reserva para consecuencias destructivas y no debe usarse para hacer más visibles los controles habituales.
El comportamiento predeterminado de Braid tiene matices: un botón neutro es ghost, salvo que se especifique otra cosa, mientras que establecer un tone hace que la variante implícita sea solid. Indicar ambas propiedades en una acción clave deja clara la jerarquía prevista. Actions gestiona la disposición habitual: en columna en móviles y en línea en pantallas más anchas.
Sistema de diseño SEEK Braid: es preferible un error con una acción disponible a un botón no disponible
Usa el contrato del campo controlado
La función de devolución de llamada onChange de TextField recibe el evento React input. El ejemplo lee event.target.value, almacena el texto del borrador y cambia la búsqueda aplicada solo cuando el usuario activa Search. Se proporciona una función de devolución de llamada para borrar, porque el control no puede borrar el estado de la aplicación por sí solo.
message explica un error de consulta vacía y el tono critical proporciona su estado visual. description se reserva para el contexto persistente. Los botones Braid normales con el atributo disabled no son compatibles; la acción permanece disponible para que el visitante pueda averiguar cómo continuar. La vista previa sin conexión también mueve el foco al campo no válido.
Mantén las ediciones en el estado del borrador de la consulta.
Al pulsar Search, exige que la consulta no esté vacía después de quitar los espacios en blanco iniciales y finales.
Mostrar un mensaje crítico útil cuando se produzca un error.
Aplica la consulta si se procesa correctamente y conserva un estado explícito para indicar que no hay resultados.
Sistema de diseño SEEK Braid: el ejemplo solo busca en datos originales
Los resultados locales no implican que haya vacantes activas
La vista previa contiene tres registros ficticios de ofertas de empleo con metadatos sobre el puesto, la ciudad y el lugar de trabajo. La búsqueda compara el título y la ciudad sin distinguir entre mayúsculas y minúsculas. No obtiene ofertas activas de SEEK y los resultados están etiquetados como ejemplos.
Mantener separados el texto del borrador y los resultados aplicados permite observar la interacción: editar un puesto no sustituye silenciosamente los resultados actuales antes de pulsar Search. Clear search restablece ambos valores. Si no hay coincidencias en la lista, se indica el resultado y los controles de búsqueda siguen disponibles.
Muestra el número de resultados después de aplicar una consulta.
Haz que la última consulta aplicada siga siendo comprensible mientras se edita.
No añadas un envío ficticio de Apply a las ofertas de ejemplo.
Sistema de diseño SEEK Braid: usa una compilación que extraiga los estilos de Braid
Instalar un paquete es solo una parte de la configuración
La configuración oficial está optimizada para sku. Los estilos Vanilla Extract de Braid requieren integración con el proceso de compilación en un empaquetador personalizado, y el restablecimiento y el tema seleccionado deben incorporarse a la aplicación en el orden documentado. El código proporcionado es una entrada completa para un proyecto sku compatible ya existente; no afirma que Braid pueda ejecutarse con una etiqueta de script cualquiera.
Braid realiza aserciones durante el desarrollo y advertencias según el entorno. La guía oficial de compilación indica que, para producción, se deben eliminar las aserciones y sustituir el entorno en el momento de compilar. Ten en cuenta este aspecto en el flujo de implementación; el HTML ejemplo sin conexión de la página no depende de la compilación de esos paquetes.
Ejemplos de componentes del sistema de diseño SEEK Braid
Muestra interactiva independiente completa
Guarda el documento completo como index.html y ábrelo en un navegador. Interpretación original sin conexión HTML de la composición de búsqueda, la jerarquía y las pautas de puntos de interrupción de Braid; no incluye datos activos de SEEK ni el entorno de ejecución de Braid. Los colores de la vista previa y el espaciado físico son decisiones de la aplicación.
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 búsqueda se aplica a las ofertas de empleo ficticias incluidas. La entrada nativa de Braid requiere una compilación que extraiga los estilos y el tema seekJobs seleccionado.
Consulta en borrador, búsqueda aplicada y recuperación explícita
Un TextField controlado valida una consulta local; Actions agrupa dos estilos distintos de botón; y Card/Stack/Heading/Text muestran resultados originales.
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 recibe el evento de entrada, no una cadena sin procesar.
Una consulta vacía mantiene disponible la búsqueda y explica qué se debe introducir.
Al borrar la búsqueda se restablecen tanto el texto del borrador como los resultados aplicados.
04
Configuración del agente de diseño de sistema de diseño SEEK Braid
Punto de partida para la implementación
Punto de entrada completo de la aplicación para una compilación sku existente, compatible directamente con la configuración oficial. Los empaquetadores personalizados requieren la integración de Vanilla Extract. La importación de Reset debe permanecer primero. La vista previa sin conexión no afirma compilar el paquete 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>);
Una instrucción para tu proyecto
Instrucción para el agente
Compón una búsqueda de Braid con el tema seekJobs, Reset primero, el estado del evento de TextField y Actions. Usa explícitamente brandAccent solid para la única búsqueda principal y un Reset neutral con variante ghost. Permite los intentos de búsqueda vacíos y explica el error; nunca desactives el Button habitual para ocultar la validación.
05
Fuentes y alcance del sistema de diseño de SEEK Braid
Referencia independiente de OpenDesign. Listados de muestra originales, sin vacantes activas ni envío de solicitudes. Las variables de Braid indicadas se resuelven mediante el tema seleccionado.
