← Framework comparison

Framework adoption test

Applies one sentinel Style Guide (deliberately odd values nothing uses by default — hot-pink brand, 13px radius, a 350-weight test font) to every framework via the same theming code the live switcher uses (framework-theme.js), then reads the rendered result back out of each iframe (descending into web-component shadow DOM) and asserts the Style Guide actually arrived. A green row = the dovetail reaches that framework with no babysitting. A red cell tells you exactly what didn't land.

Loading frameworks…
Framework Brand colourRadius (13px)Font pairingHeading weight (350)

Reading a ✗: a red is the framework resisting that dimension, not a mapping bug. The one standing red is Beer CSS radius — Material Design fixes its own shape scale, so it won't take an arbitrary corner radius. Everything else adopts the full signature. (Frameworks that needed a forced override to get there — daisyUI's oklch vars, Vanilla/Cirrus's !important defaults — are noted as slightly higher-friction to dovetail, even though they pass.)

Live iframes the test reads from (sentinel guide applied):