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.
| Framework | Brand colour | Radius (13px) | Font pairing | Heading 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.)