Editorial Dawn
Warm neutrals, crisp type and measured accent colors give blog layouts, marketing pages and resource hubs a calm tone.
Eight semantic colors
Click any swatch to copy its exact HEX value.
Measured text contrast
Scores use WCAG 2.x relative luminance. Check all interactive states and surrounding content in your final product.
Preview it in context
Try this full theme on four realistic sample products. Switch between previews and desktop or mobile widths.
Make room
for better
ideas.
We shape distinctive brands and digital experiences with thoughtful design and a human point of view.
Creative by design — Est. 2026
01 03attention ↗
More meaning.
A visual language built for the things people actually use.
Where it works best
Blogs, documentation, agency sites and newsletters. A warm, readable theme for content sites and authority pages. A useful design system makes the important actions stand out while supporting long passages, empty states, cards and navigation.
What to customize first
Preserve the background and text contrast; adjust the warm primary to your publication identity. Start with brand-facing accents, then recheck action labels against their backgrounds and muted text against the canvas.
When to choose another direction
Highly technical dark-mode products and vivid startup launch experiences. Changing the color of every role usually creates more work than selecting an initially compatible foundation.
Implementation guide for Editorial Dawn
Map these values to the eight semantic roles rather than copying colors onto random elements. Use background for the page, surface for cards, text for primary copy, muted for secondary labels, border for dividers, primary for calls to action, secondary for supporting elements and accent only when attention is deserved. Test focus, hover, error and success states separately because this starter palette does not dictate those states.
:root {
--theme-background: #F7F1E6;
--theme-surface: #FFFCF6;
--theme-text: #1D2A37;
--theme-muted: #6F7A86;
--theme-primary: #EA7C4D;
--theme-secondary: #5A9D72;
--theme-accent: #204058;
--theme-border: #DBCAB1;
--theme-on-primary: #111827;
}