# Sistema de diseño Pega Bolt ## Vista previa de la interfaz del sistema de diseño Pega Bolt Prueba la lista de preguntas con un solo elemento abierto, junto a un resumen editorial ilustrado. ## Referencia de diseño del sistema de diseño Pega Bolt Referencia pública de Bolt Twig Pattern Lab. Los valores rem son fluidos y dependen del elemento raíz de la página; no interpretes todos los valores rem como múltiplos fijos de 16 px. La composición de la vista previa y la ilustración son originales. ### Funciones de los colores de marca | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --bolt-color-navy | #001f5f | Color de fondo principal de la marca. | | --bolt-color-navy-dark | #081c45 | Fondo más oscuro. | | --bolt-color-navy-xlight | #d7e2f2 | Superficie de marca pálida. | | --bolt-color-teal | #10a5ac | Acento de la ilustración; no es automáticamente accesible como texto del cuerpo. | | --bolt-color-teal-xdark | #005154 | Opción de verde azulado más oscuro. | | --bolt-color-orange | #f76923 | Acento cálido. | | --bolt-color-yellow | #ffc836 | Acento de resaltado. | ### Espaciado en dos ejes | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --bolt-spacing-x-xsmall | 0.3875rem | Usa la escala horizontal para el espaciado en el eje x y la escala vertical para el espaciado en el eje y. | | --bolt-spacing-x-small | 0.775rem | Usa la escala horizontal para el espaciado en el eje x y la escala vertical para el espaciado en el eje y. | | --bolt-spacing-x-medium | 1.55rem | Usa la escala horizontal para el espaciado en el eje x y la escala vertical para el espaciado en el eje y. | | --bolt-spacing-x-large | 3.1rem | Usa la escala horizontal para el espaciado en el eje x y la escala vertical para el espaciado en el eje y. | | --bolt-spacing-y-xsmall | 0.3375rem | Usa la escala horizontal para el espaciado en el eje x y la escala vertical para el espaciado en el eje y. | | --bolt-spacing-y-small | 0.675rem | Usa la escala horizontal para el espaciado en el eje x y la escala vertical para el espaciado en el eje y. | | --bolt-spacing-y-medium | 1.35rem | Usa la escala horizontal para el espaciado en el eje x y la escala vertical para el espaciado en el eje y. | | --bolt-spacing-y-large | 2.7rem | Usa la escala horizontal para el espaciado en el eje x y la escala vertical para el espaciado en el eje y. | ### Fundamentos tipográficos | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --bolt-type-font-size-display | 3.75rem | En relación con el elemento raíz fluido; elige las etiquetas semánticas de encabezado de forma independiente. | | --bolt-type-font-size-xxlarge | 2.35rem | En relación con el elemento raíz fluido; elige las etiquetas semánticas de encabezado de forma independiente. | | --bolt-type-font-size-large | 1.4rem | En relación con el elemento raíz fluido; elige las etiquetas semánticas de encabezado de forma independiente. | | --bolt-type-font-size-regular | 1rem | En relación con el elemento raíz fluido; elige las etiquetas semánticas de encabezado de forma independiente. | | --bolt-type-font-size-small | 0.9rem | En relación con el elemento raíz fluido; elige las etiquetas semánticas de encabezado de forma independiente. | | Font family | Open Sans | Familias tipográficas para el texto del cuerpo y los titulares en los fundamentos publicados. | | Weights | 300 / 400 / 600 / 700 / 800 | De ligera a extranegrita; carga los archivos de fuente correspondientes. | ### Densidad de página | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Attribute | data-bolt-info-density | Se define solo en el elemento html. | | comfortable | Larger font and spacing | Densidad pensada para facilitar la lectura. | | regular | Default | El atributo se puede omitir. | | compact | Smaller font and spacing | No lo apliques como modificador local de una tarjeta. | ### Composición del acordeón | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | single | false by default | true limita el acordeón a un solo elemento abierto. | | spacing | medium | El esquema enumera none, xsmall, small, medium y large. | | icon_valign | center | top alinea el icono con los activadores de varias líneas. | | no_separator | false | Mantén los separadores para distinguir los límites entre preguntas. | | box_shadow | false | Sombra envolvente opcional. | | item.open | false | Expande un elemento inicial. | | item.inactive | false | Elemento contraído sin icono de alternancia. | | item.trigger | Content | Escribe una pregunta significativa en lugar de la etiqueta predeterminada. | ## Guía completa del sistema de diseño Pega Bolt 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 Pega Bolt: elige la implementación de Bolt ### Twig y React tienen contratos distintos > Esta guía se centra en la implementación pública de Bolt Twig / Pattern Lab. La página de inicio actual de Bolt también ofrece BoltDS React para aplicaciones y portales; ambas implementaciones tienen documentación y versiones independientes. La vista previa es una interpretación independiente de HTML, no un entorno de ejecución de Bolt. El ejemplo es un recurso de taller con un resumen visible y preguntas opcionales. Encaja de forma natural con la implementación de Twig, orientada al contenido: la jerarquía editorial es lo primero, mientras que el acordeón permite consultar material complementario cuando se necesita. Una aplicación creada con BoltDS React debe seguir esa documentación en lugar de copiar las rutas de espacios de nombres de Twig. Consulta la especificación complementaria ## Sistema de diseño Pega Bolt: estructura en azul marino y acentos brillantes limitados ### Una superficie de lectura de marca La paleta publicada incluye azul marino #001f5f, verde azulado #10a5ac y naranja #f76923. El ejemplo usa el azul marino en un encabezado editorial destacado y el verde azulado y el naranja como acentos de la ilustración. Estos tonos son valores fundamentales, no una garantía de que todas las combinaciones sean adecuadas para texto pequeño. Los datos del recurso aparecen sobre superficies blancas y azul marino pálido. El diagrama ramificado decorativo representa un taller sobre cómo simplificar la experiencia de un servicio; es una ilustración original, no un logotipo de Pega ni un diagrama oficial. Consulta la especificación complementaria ## Sistema de diseño Pega Bolt: tipografía fluida y medidas legibles ### Los valores rem no equivalen a cantidades fijas de píxeles Bolt publica un tamaño regular de 1rem, uno grande de 1.4rem, uno xxlarge de 2.35rem y uno display de 3.75rem. El elemento raíz se escala según la ventana gráfica y la densidad, por lo que convertir toda la tabla con una base fija de 16 px elimina el comportamiento previsto. Los fundamentos especifican Open Sans para el texto del cuerpo y los titulares. La vista previa independiente usa una fuente del sistema local como alternativa porque no incluye archivos de fuentes. Mantiene un título claro, un antetítulo compacto y párrafos cómodos, sin afirmar que la tipografía sea idéntica píxel a píxel. Consulta la especificación complementaria ## Sistema de diseño Pega Bolt: los ritmos horizontal y vertical son distintos ### Evita sustituirlos por una escala genérica de ocho puntos El espaciado horizontal mediano es de 1.55rem, mientras que el vertical mediano es de 1.35rem. La misma diferencia se mantiene en el espaciado grande, con 3.1rem y 2.7rem. Usa la escala x entre objetos adyacentes y la escala y entre secciones apiladas. La vista previa mantiene la introducción y la lista de preguntas en columnas separadas en pantallas anchas, y luego las apila en un punto de ruptura local de 700 px. Ese punto de ruptura es una decisión de la aplicación, no un token de Bolt. Las etiquetas largas de las preguntas se ajustan junto al icono sin reducir el tamaño del texto. Consulta la especificación complementaria ## Sistema de diseño Pega Bolt: crea la lista de preguntas con Twig ### Los elementos son contenido capturado, no una propiedad de datos Cada invocación de accordion-item.twig proporciona un activador y contenido. Un bloque set de Twig captura los elementos renderizados; el elemento principal recibe ese marcado mediante content. El ejemplo completo anterior abre la primera pregunta y usa single: true. spacing controla el relleno de los elementos e icon_valign controla la alineación del icono. Mantén los separadores cuando las preguntas deban tener límites claros. El indicador inactive no es un control de formulario deshabilitado: contrae el contenido y oculta el icono. - Mantén las fechas, los requisitos previos y la disponibilidad fuera de las respuestas contraídas. - Usa el activador para plantear una pregunta concreta. - Evita incluir otro acordeón dentro de una respuesta. Consulta la especificación complementaria ## Sistema de diseño Pega Bolt: expandir sin perder la posición de lectura ### Una respuesta a la vez La interpretación de HTML usa botones reales, aria-expanded, aria-controls y paneles de respuesta ocultos. Al hacer clic en una pregunta cerrada, se abre y se cierra la respuesta anterior; al hacer clic en la pregunta abierta, se contrae. El foco permanece en el botón activador. Esto refleja el comportamiento de un solo elemento abierto seleccionado, sin depender de Bolt JavaScript. La vista previa no implementa la vinculación profunda de Bolt ni afirma ejecutar el entorno de ejecución del componente nativo. En Bolt nativo, cuando está habilitado el modo de un solo elemento, un elemento vinculado mediante un enlace profundo tiene prioridad sobre uno abierto inicialmente. Consulta la especificación complementaria ## La densidad del sistema de diseño Pega Bolt corresponde a toda la página ### Una configuración raíz, no una propiedad del componente Bolt reconoce los valores comfortable, regular y compact mediante data-bolt-info-density en el elemento html. Regular es el valor predeterminado. Comfortable aumenta el tamaño del texto y el espaciado; compact reduce ambos. No apliques el atributo raíz a un acordeón esperando un cambio de densidad por componente compatible. Para esta página de lectura, la vista previa mantiene una composición editorial cómoda y fija, en lugar de simular el motor de densidad nativo. Consulta la especificación complementaria ## Integra el componente real en contexto en el sistema de diseño Pega Bolt ### Usa el entorno documentado El comando de instalación tiene sentido dentro de una aplicación Bolt Twig que resuelve los espacios de nombres de los componentes y compila los recursos necesarios. El repositorio público ofrece un entorno de desarrollo completo mediante yarn setup y yarn start. Es un entorno de referencia, no una implementación de producción en dos líneas. 1. Elige Twig para implementar el contenido renderizado en el servidor y confirma su versión en tu aplicación. 2. Instala el paquete del acordeón, registra su espacio de nombres Twig existente mediante la configuración de la aplicación Bolt e incluye los recursos compilados del proyecto. 3. Renderiza el ejemplo completo de preguntas y, luego, verifica la expansión de un solo elemento, los activadores con texto en varias líneas y la navegación con teclado en el proyecto real. Consulta la especificación complementaria ## Ejemplos de componentes del sistema de diseño Pega Bolt ### Muestra interactiva independiente completa Guarda el documento completo como index.html y ábrelo en un navegador. Interpretación independiente de HTML/CSS de los fundamentos de Bolt Twig y del comportamiento de un solo acordeón. Tipografía alternativa del sistema; sin el entorno de ejecución de Bolt. ``` Service journey workshop
Field notes · Live workshop

Make your service journey simpler.

A practical session for turning a complex request into a clear next step.

Useful to know

Bring a laptop and one workflow you want to simplify. A short description of the request and its current outcome is enough.

``` Referencia de código - La pila de preguntas con un solo elemento abierto no implementa la vinculación profunda de Bolt. El ejemplo Twig es la vía de integración nativa; los datos esenciales del taller permanecen visibles fuera de las respuestas contraídas. ### Preguntas del taller con una respuesta abierta Renderiza cada pregunta con la plantilla del elemento, captura su marcado y pásalo al acordeón principal. ``` {% set questions %} {% include '@bolt-components-accordion/accordion-item.twig' with { trigger: 'What should I bring?', content: '

Bring a laptop and one workflow you want to simplify.

', open: true } only %} {% include '@bolt-components-accordion/accordion-item.twig' with { trigger: 'Will there be a recording?', content: '

This workshop is live only. The written exercise is included.

' } only %} {% include '@bolt-components-accordion/accordion-item.twig' with { trigger: 'Who is this session for?', content: '

Content teams and developers working on service journeys.

' } only %} {% endset %} {% include '@bolt-components-accordion/accordion.twig' with { content: questions, single: true, spacing: 'medium', icon_valign: 'top' } only %} ``` Referencia de código - Úsalo dentro de una aplicación Bolt Twig configurada. El componente oficial no ofrece una entrada de uso con HTML sin procesar. - single limita la expansión simultánea. La vinculación profunda tiene prioridad sobre un elemento abierto inicialmente. - El esquema indica que large es la opción de espaciado más amplia, aunque un ejemplo de la documentación usa xlarge; este ejemplo se ajusta al esquema. ## Configuración del agente de IA del sistema de diseño Pega Bolt ### Punto de partida para la implementación El comando del paquete añade el componente, no un sitio web independiente. Usa el espacio de nombres Twig registrado en el proyecto, @bolt-components-accordion, y los recursos Bolt compilados. La configuración de desarrollo del repositorio y la integración de la aplicación son vías distintas; ninguna corresponde al BoltDS React API actual. ``` # In an existing Bolt Twig application with its asset pipeline configured: npm install @bolt/components-accordion # To inspect the complete official development environment instead: git clone https://github.com/boltdesignsystem/bolt.git cd bolt yarn setup yarn start ``` ### Una instrucción para tu proyecto ``` Crea una página de recursos para un taller en Bolt Twig con la paleta azul marino y verde azulado verificada, una jerarquía tipográfica fluida y escalas de espaciado x/y independientes. Mantén visibles los datos esenciales. Compón accordion-item.twig dentro de accordion.twig con single true y espaciado medium. No uses rutas Twig como API de React. ``` ## Fuentes y alcance del sistema de diseño Pega Bolt Esta guía se centra en la implementación pública de Bolt Twig / Pattern Lab. La página de inicio actual de Bolt también ofrece BoltDS React para aplicaciones y portales; ambas implementaciones tienen documentación y versiones independientes. La vista previa es una interpretación independiente de HTML, no un entorno de ejecución de Bolt. - Implementaciones de Bolt Puntos de entrada de React y Twig. - Tokens de color de marca Paleta de Pega y variables CSS. - Espaciado Escalas x e y independientes. - Tipografía Tamaños fluidos en rem y familias tipográficas. - Densidad de la información Configuración de densidad para toda la página. - Esquema del acordeón Propiedades Twig, plantilla del elemento y restricciones de interacción. ## Recursos relacionados del sistema de diseño Pega Bolt ### Porsche sistema de diseño Explora Porsche Design System v4 con espaciado fluido, esquemas de color CSS, tipografía Porsche Next y un configurador con dos opciones. La referencia incluye expresiones reales de tokens y una entrada Vite completa que usa los eventos actuales de controles segmentados. ### Red Hat PatternFly Usa PatternFly para crear un espacio de trabajo de operaciones: referencias semánticas a tokens, tarjetas de servicio seleccionables, selección masiva de tres estados, revisión del alcance y código nativo completo de React. ### REI Cedar Crea un selector de preparación de pedidos concreto con Cedar, mosaicos nativos de Vue, valores reales de tokens, navegación completa con teclado y una composición adaptable de productos. - [Referencia de implementación](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html) - [Fuente](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-00-color/index.html) - [Fuente](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-05-spacing/index.html) - [Fuente](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-10-typography/index.html) - [Fuente](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-20-information-density/index.html) - [Fuente](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html) - [Consulta la especificación complementaria](https://boltdesignsystem.com/) - [Consulta la especificación complementaria](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-00-color/index.html) - [Consulta la especificación complementaria](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-10-typography/index.html) - [Consulta la especificación complementaria](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-05-spacing/index.html) - [Consulta la especificación complementaria](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html) - [Consulta la especificación complementaria](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-20-information-density/index.html) - [Referencia de código](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html) - [Implementaciones de Bolt Puntos de entrada de React y Twig.](https://boltdesignsystem.com/) - [Tokens de color de marca Paleta de Pega y variables CSS.](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-00-color/index.html) - [Espaciado Escalas x e y independientes.](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-05-spacing/index.html) - [Tipografía Tamaños fluidos en rem y familias tipográficas.](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-10-typography/index.html) - [Densidad de la información Configuración de densidad para toda la página.](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-20-information-density/index.html) - [Esquema del acordeón Propiedades Twig, plantilla del elemento y restricciones de interacción.](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html)