A color palette establishes a page’s visual tone and supports a consistent theme. It commonly coordinates colors with fonts, borders, and spacing, while often reflecting a logo or brand identity. section 4.1 section 11.1.2
Choose palette colors as part of the theme rather than changing them with screen width. Apply shared text colors through inheritable properties where possible, then override controls or other exceptions deliberately. section 4.1 section 8.0
A practical palette can coordinate:
- A primary color and an accent color for visual emphasis. section 10.3.1
- Text, links, buttons, inputs, error messages, and headings across the interface. section 8.2
- Fallback colors for effects that may require a separate image-based declaration. section 10.3.1
Checkout input border
Use the primary and accent colors in a linear gradient for an input’s bottom border. Keep a solid color fallback, then apply the gradient through border-image. This gives the form a recognizable visual relationship with the rest of the application. section 10.3.1
Listing 10.4 Styling input fields that aren’t of type radio or checkbox
input:not([type="radio"], [type="checkbox"]) {
font-size: 1rem;
font-family: inherit;
color: inherit;
border: none; #1
border-bottom: solid 1px var(--primary); #2
border-image: linear-gradient(to right, var(--primary), var(--accent)) 1; #3
padding: 0 0 .25rem;
width: 100%;
}
Inspect the complete input rule to see palette colors applied with inherited typography, a fallback border, and a primary-to-accent gradient. section 10.3.1
