← Living Brand index

The Living Styleguide

Tab Lab · compare options, land on one live result
Comparison
01

Compare configurations, commit to one

Three real choices, not three facets of one topic. Clicking a tab doesn't just reveal more text — it recomputes a structured result and states where that choice breaks.
Not the same as plain tabs

Teaching Elements' tabs swap a paragraph — parallel, comparable facts about one thing. Tab Lab swaps a result — named fields plus a stated boundary — for a decision with real consequences per option. If the panel underneath is prose, use plain tabs. If it's fields and a tradeoff, use this.

Tab Lab · agent permission modes

Same agent, three ways to let it act

Markup shape: a .tl-tabs button row (each button carries the label and a short kicker), a .tl-result panel with a summary line, a four-cell dl, and one .tl-boundary aside whose accent color can shift per option via a CSS custom property (--tlc) the same way the section-accent token on the index cards works.

Created for you, with ❤️ by Robert Evans · The AI Design Architect