Framing

Problem/solution framing and section structure. Set up the narrative before diving into features.

Challenge / Solution Split

A two-column grid pairing a section headline with an illustration or custom component. Used to present a problem and its solution side by side.

When to use: Product pages that need to frame a pain point before presenting the solution. Works well as a pair — one for the challenge, one for the solution.

The Challenge

Debugging Live Traffic is Painful

Traditional tools stop working the moment HTTPS encryption enters the picture.

Illustration slot
The Solution

Inspect Live Traffic in your Browser

A local browser-based view of all HTTP/S traffic on a single host.

Illustration slot

Section Template

A bordered section headline with a two-column grid of check items. Used for feature breakdowns and capability lists.

When to use: Listing capabilities or benefits under a clear section heading.

Key Features

Zero Code Changes

Deploy without touching application code or build pipelines.

Prove Data Residency

Generate reports that definitively prove regulated data has not left a defined boundary.