Inspect and export accessible color systems.
This viewport renders layout components dynamically using your active colors. Inspect highlights, background contrast, and boundaries in a real-world setting.
Cards and dashboards blend using the secondary boundary color and accent backdrops, creating a clean reading hierarchy.
:root {
--background: #FBFAF7;
--foreground: #1C1917;
--primary: #7C2D12;
--secondary: #44403C;
--accent: #F5F5F4;
}