Briefle words · UI design
Tinted surface
A lightly colored background that signals a status (warning, success) while the text on it stays dark.
Say it to an AI
Trial-ending warning banner inside the invoicing app. Use a pale amber tinted surface with dark amber/brown text and icon, and a deep amber button with white text. Every element must pass WCAG AA contrast ratio: 4.5:1 for text, 3:1 for the icon and button shape.
How an expert would brief the stronger version of “Trial warning banner”.
See it
Try it as a puzzle →In-app warning banner for an invoicing tool whose free trial is ending.
Why: Both banners share the same cream warning tint; A carries the color into the border and icon, not into low-contrast text.
Related words
Room 4 · Color
Learn “Tinted surface” in a five-minute lesson