Palette guide
How to use the Soft Orange, Orange and Red Terracotta Palette
Use the lightest color for backgrounds or open space, the darkest color for readable text and strong outlines, and the middle tones for surfaces, illustrations, or supporting elements. Reserve the most distinctive shade for accents and calls to action.
Test text and interface controls against their final backgrounds before publishing. Color appearance and contrast can change with font size, screen brightness, and surrounding colors.
CSS variables
:root {
--color-1: #F7D6BF;
--color-2: #E89C6C;
--color-3: #C9643A;
--color-4: #6B3525;
}