# Sistema de diseño SEEK Braid ## SEEK Braid Vista previa de la interfaz del sistema de diseño Edita y aplica una consulta de puesto o ciudad, inspecciona un resultado vacío y borra tanto el campo como la búsqueda aplicada. ## 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. ### Puntos de interrupción adaptables | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | mobile | 0 | Estilos base. | | tablet | 740px | Primera condición para tamaños mayores. | | desktop | 992px | Condición para escritorio. | | wide | 1200px | Condición para pantallas anchas. | ### Variable del tema API | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | vars.space.medium | Theme-scoped CSS expression | Úsala directamente; para operaciones aritméticas, se necesita calc. | | vars.space.gutter | Theme gutter expression | Separación del diseño. | | vars.backgroundColor.body | Theme body background | Superficie de la página. | | vars.backgroundColor.surface | Theme surface background | Superficie del contenedor. | | vars.backgroundColor.brandAccent | Theme brand action background | No des por supuesto un valor hexadecimal universal. | | vars.foregroundColor.neutral | Theme text role | Contenido principal. | | vars.foregroundColor.secondary | Theme secondary role | Metadatos. | | vars.borderColor.focus | Theme focus role | Foco visible. | | vars.borderRadius.standard | Theme radius expression | Forma estándar. | ### Diseño de caja API | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | component | div by default | Elige los elementos semánticos main, section o form según sea necesario. | | padding | Named space, responsive object allowed | Ejemplo: mediano para móviles y extragrande para tabletas. | | gap | Named spacing values | Espaciado entre elementos hermanos. | | background="customDark" | Context for custom dark surfaces | Permite que el comportamiento del primer plano se corresponda con el fondo. | | borderRadius | none / small / standard / large / xlarge / full | Forma resuelta por el tema. | ### Contrato de texto y campo | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | label / secondaryLabel / tertiaryLabel | Three label levels | Finalidad, contexto opcional y asistencia. | | description | Below-label context | Se anuncia al enfocar el campo. | | message + tone | critical / positive / caution / neutral | Explica el estado del campo. | | onClear | Callback required for clear action | La aplicación restablece el valor controlado. | | clearLabel | Accessible clear-control label | Localízalo. | ### Prominencia y comportamiento del botón | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | variant | solid / ghost / soft / transparent | Énfasis visual. | | tone | brandAccent / formAccent / critical / neutral | Significado de la acción. | | No explicit tone | Neutral ghost by default | Estilo discreto de referencia. | | Explicit tone, no variant | Solid default | Especifica ambos para evitar ambigüedades. | | size | standard / small | Tamaños admitidos. | | loading | Also disables interaction | Solo cuando haya trabajo pendiente de verdad. | | Ordinary disabled | Not supported | Permitir intentos y explicar los errores. | ### Semántica del texto | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | size | large / standard / small / xsmall | Escala tipográfica del tema. | | weight | regular / medium / strong | Énfasis del texto. | | component="p" | Paragraph element | La tipografía visual y la semántica son independientes. | | maxLines | Number | Limita el contenido visible generado por el usuario. | | tone="secondary" | Metadata emphasis | No sustituye a un rol de error. | ## Guía completa del sistema de diseño SEEK Braid Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. 1. Mantén las ediciones en el estado del borrador de la consulta. 2. Al pulsar Search, exige que la consulta no esté vacía después de quitar los espacios en blanco iniciales y finales. 3. Mostrar un mensaje crítico útil cuando se produzca un error. 4. Aplica la consulta si se procesa correctamente y conserva un estado explícito para indicar que no hay resultados. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. ``` 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.

``` Referencia de código - 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. ``` // 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(); ``` Referencia de código - 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. ## 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. ``` // 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(); ``` ### Una instrucción para tu proyecto ``` 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. ``` ## 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. - Configuración y compilación Orden de Reset, sku y Vanilla Extract. - BraidProvider Comportamiento del tema y del cuerpo incrustado. - Variables Expresiones de CSS con ámbito y nombres de funciones. - Puntos de interrupción Umbrales de diseño adaptable compartidos. - Box Elementos semánticos y propiedades de utilidad adaptables. - Texto Tamaño del texto, semántica y tonos contextuales. - Button Tono, variante y comportamiento desactivado. - TextField Etiquetas, errores y borrado. - Propiedades de TextField Tipos exactos de las funciones de retorno y de los valores controlados. ## Recursos relacionados con el sistema de diseño de SEEK Braid ### Segment Evergreen Una referencia de Evergreen con valores de tema reales, entrada controlada de etiquetas, coincidencia de reglas en tiempo real, una vía para recuperarse de un estado vacío y un diálogo de revisión nativo. ### Semi Design Crea una configuración secuencial del espacio de trabajo con los Steps básicos recomendados por Semi, Input y Switch controlados, tokens de tema reales y una elección explícita entre los paquetes React 18 y React 19. ### Semrush Intergalactic Una guía de Intergalactic con tokens semánticos y de gráficos actuales, controles de filtrado nativos, comparación con una escala fija, detalles de la selección y un conjunto de datos de ejemplo completo y reproducible. - [Referencia de implementación](https://seek-oss.github.io/braid-design-system/components/Button/) - [Fuente](https://seek-oss.github.io/braid-design-system/css/breakpoints/) - [Fuente](https://seek-oss.github.io/braid-design-system/css/vars/) - [Fuente](https://seek-oss.github.io/braid-design-system/components/Box/) - [Fuente](https://seek-oss.github.io/braid-design-system/components/TextField/) - [Fuente](https://seek-oss.github.io/braid-design-system/components/Button/) - [Fuente](https://seek-oss.github.io/braid-design-system/components/Text/) - [Consulta la especificación complementaria](https://seek-oss.github.io/braid-design-system/components/BraidProvider/) - [Consulta la especificación complementaria](https://seek-oss.github.io/braid-design-system/css/breakpoints/) - [Consulta la especificación complementaria](https://seek-oss.github.io/braid-design-system/components/Text/) - [Consulta la especificación complementaria](https://seek-oss.github.io/braid-design-system/components/Button/) - [Consulta la especificación complementaria](https://seek-oss.github.io/braid-design-system/components/TextField/) - [Consulta la especificación complementaria](https://seek-oss.github.io/braid-design-system/components/TextField/props/) - [Consulta la especificación complementaria](https://github.com/seek-oss/braid-design-system) - [Referencia de código](https://seek-oss.github.io/braid-design-system/components/Button/) - [Referencia de código](https://seek-oss.github.io/braid-design-system/components/TextField/props/) - [Configuración y compilación Orden de Reset, sku y Vanilla Extract.](https://github.com/seek-oss/braid-design-system) - [BraidProvider Comportamiento del tema y del cuerpo incrustado.](https://seek-oss.github.io/braid-design-system/components/BraidProvider/) - [Variables Expresiones de CSS con ámbito y nombres de funciones.](https://seek-oss.github.io/braid-design-system/css/vars/) - [Puntos de interrupción Umbrales de diseño adaptable compartidos.](https://seek-oss.github.io/braid-design-system/css/breakpoints/) - [Box Elementos semánticos y propiedades de utilidad adaptables.](https://seek-oss.github.io/braid-design-system/components/Box/) - [Texto Tamaño del texto, semántica y tonos contextuales.](https://seek-oss.github.io/braid-design-system/components/Text/) - [Button Tono, variante y comportamiento desactivado.](https://seek-oss.github.io/braid-design-system/components/Button/) - [TextField Etiquetas, errores y borrado.](https://seek-oss.github.io/braid-design-system/components/TextField/) - [Propiedades de TextField Tipos exactos de las funciones de retorno y de los valores controlados.](https://seek-oss.github.io/braid-design-system/components/TextField/props/)