Brand geometric-pattern background for heroes, section headers, cover cards. Add `overlay="brand"` (or deep/scrim) when placing white text on top.

```jsx
<PatternPanel pattern="insight" overlay="brand" style={{padding:48,borderRadius:16}}>
  <h2 style={{color:'#fff'}}>Bring the world a little closer</h2>
</PatternPanel>
```

The Community and Insight SVGs live in this artifact's asset store under `assets/patterns`. `style` merges last, so where files cannot be fetched (the live preview here) set `background` yourself with the pattern inline: `overlayGradient, url(data:…)`. The overlay gradients are `brand` = `linear-gradient(160deg,rgba(38,56,196,.72),rgba(10,20,90,.82))`, `deep` = `linear-gradient(160deg,rgba(15,30,140,.80),rgba(10,20,90,.92))`, `scrim` = `linear-gradient(0deg,rgba(10,20,90,.85),rgba(10,20,90,.15))`.