Preview Frame
Style
Token references resolve from the active theme; the frame never hardcodes a colour value directly.
Token Mapping
| Element | Token |
|---|---|
| Canvas surface (light) | {semantic.surface-default} |
| Border | {semantic.border-subtle} |
| Canvas surface (dark) | {semantic.surface-inverse} |
| Canvas text (dark) | {semantic.ink-on-inverse} |
Structure
The container carries data-theme="light" or data-theme="dark"; CSS rules
scoped to [data-theme='dark'] override the surface-palette tokens on the
canvas. The toolbar sits top-right, above the canvas, and does not scroll
with previewed content.
Important Information
Design System disclosure
This site provides open-source design tokens, documentation, and self-hostable software published by Woodfine Capital Projects Inc. Information here is for general reference only and does not constitute an offer, warranty, or a guarantee of fitness for any particular purpose. Statements regarding planned, intended, or targeted future features are forward-looking and subject to change without notice; they are not undertaken to be updated except as required by law.