Mixed-mode layout explorer
Adjust main, accent, and light surfaces, then compare strategies. Preview typography and primary actions follow simple contrast rules so readability stays intact across configurations.
On accent fills, label text uses light type for contrast.
Header band
Readable heading
Body copy adapts: dark text on light panels, light text on dark panels. Contrast stays in a safe range for long-form reading.
Secondary link
Main content
Readable heading
Body copy adapts: dark text on light panels, light text on dark panels. Contrast stays in a safe range for long-form reading.
Secondary link
Footer band
Readable heading
Body copy adapts: dark text on light panels, light text on dark panels. Contrast stays in a safe range for long-form reading.
Secondary link