Sistema de diseño Pega Bolt.

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

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Service journey workshop</title><style>*{box-sizing:border-box}body{margin:0;background:#f5f7fb;color:#001f5f;font:16px/1.6 system-ui,sans-serif}header{background:#001f5f;color:white;padding:38px 5%;display:grid;grid-template-columns:1.6fr 1fr;gap:30px}small{letter-spacing:.13em;font-size:11px;text-transform:uppercase}h1{font-size:clamp(32px,4vw,48px);line-height:1.12;max-width:650px;margin:16px 0}header p{max-width:550px;color:#d7e2f2}svg{width:100%;max-width:310px;align-self:center;justify-self:center}main{display:grid;grid-template-columns:1fr 1.6fr;gap:40px;padding:32px 5%}h2{font-size:23px;line-height:1.25}aside p{font-size:14px}dl{font-size:14px}dt{font-weight:700;margin-top:18px}dd{margin:2px 0}section{background:white;border-top:3px solid #10a5ac}article{border-bottom:1px solid #d7e2f2}button{font:600 16px/1.5 system-ui;width:100%;display:flex;justify-content:space-between;gap:20px;text-align:left;padding:22px 24px;border:0;background:white;color:#001f5f;cursor:pointer}button:hover{background:#f0f5fc}button:focus-visible{outline:3px solid #005154;outline-offset:-4px}.answer{padding:0 24px 24px;color:#303744;font-size:15px}.answer p{margin:0}footer{padding:0 5% 22px;color:#555;font-size:11px}@media(max-width:700px){header{grid-template-columns:1fr;padding:28px 6%}svg{display:none}main{grid-template-columns:1fr;padding:24px 6%;gap:16px}button{padding:20px}dl{display:flex;flex-wrap:wrap;gap:24px}dt{margin:0}}</style><header><div><small>Field notes · Live workshop</small><h1>Make your service journey simpler.</h1><p>A practical session for turning a complex request into a clear next step.</p></div><svg viewBox="0 0 300 200" aria-hidden="true"><path d="M30 100H115M115 100V40H230M115 100V160H230" fill="none" stroke="#86cac6" stroke-width="4"/><circle cx="30" cy="100" r="22" fill="#f76923"/><rect x="95" y="80" width="40" height="40" rx="5" fill="#10a5ac"/><rect x="210" y="20" width="70" height="40" rx="6" fill="#d7e2f2"/><rect x="210" y="140" width="70" height="40" rx="6" fill="#ffc836"/></svg></header><main><aside><small>Before you join</small><h2>One journey.<br>A clearer direction.</h2><p>Map a request, find a point of friction, and rewrite the next step together.</p><dl><div><dt>Format</dt><dd>Live, small-group exercise</dd></div><div><dt>Length</dt><dd>45 minutes</dd></div><div><dt>Example only</dt><dd>No registration is collected</dd></div></dl></aside><div><h2>Useful to know</h2><section aria-label="Workshop questions"><article><h3 style="margin:0"><button aria-expanded="true" aria-controls="a1" id="q1">What should I bring?<span aria-hidden="true">−</span></button></h3><div class="answer" id="a1"><p>Bring a laptop and one workflow you want to simplify. A short description of the request and its current outcome is enough.</p></div></article><article><h3 style="margin:0"><button aria-expanded="false" aria-controls="a2" id="q2">Will there be a recording?<span aria-hidden="true">+</span></button></h3><div class="answer" id="a2" hidden><p>This workshop is live only. The written exercise is included so you can revisit the method with your team.</p></div></article><article><h3 style="margin:0"><button aria-expanded="false" aria-controls="a3" id="q3">Who is this session for?<span aria-hidden="true">+</span></button></h3><div class="answer" id="a3" hidden><p>Content teams and developers working on service journeys. No prior experience with the workshop format is required.</p></div></article></section></div></main><footer>Independent Bolt Twig interpretation · verified palette and spacing references · system font fallback</footer><script>const qs=[...document.querySelectorAll('button')];qs.forEach(b=>b.onclick=()=>{const open=b.getAttribute('aria-expanded')!=='true';qs.forEach(x=>{let yes=x===b&&open;x.setAttribute('aria-expanded',yes);x.lastElementChild.textContent=yes?'−':'+';document.getElementById(x.getAttribute('aria-controls')).hidden=!yes})});</script></html>

{% set questions %}
  {% include '@bolt-components-accordion/accordion-item.twig' with {
    trigger: 'What should I bring?',
    content: '<p>Bring a laptop and one workflow you want to simplify.</p>',
    open: true
  } only %}
  {% include '@bolt-components-accordion/accordion-item.twig' with {
    trigger: 'Will there be a recording?',
    content: '<p>This workshop is live only. The written exercise is included.</p>'
  } only %}
  {% include '@bolt-components-accordion/accordion-item.twig' with {
    trigger: 'Who is this session for?',
    content: '<p>Content teams and developers working on service journeys.</p>'
  } only %}
{% endset %}
{% include '@bolt-components-accordion/accordion.twig' with {
  content: questions,
  single: true,
  spacing: 'medium',
  icon_valign: 'top'
} only %}