SynthMock
Consistency comes from assigning colors a job. Let the interface carry the brand accent, the background establish the setting, and the device finish remain a stable material choice.
Try it in SynthMock
Start with a Duo scene.
Use a reusable template as your starting point, then apply the choices in this article.
A paid plan is required to use templates and export.
Give each color a responsibility
A campaign becomes difficult to manage when the source UI, background, lighting and type all compete to announce the brand. Choose which element gets the strongest accent. In a screen-led Duo presentation, that is often an existing interface element: the selected tab, illustration or main action.
Keep the background supportive rather than sampling the brightest pixel from the app by default. A related low-intensity color can hold the scene together without making the device boundary disappear. Evaluate them with the actual interface and surrounding page rather than assuming a hue communicates the same thing to every audience.
Three directions to sketch
Use one of these briefs to start a comparison. None requires recoloring the hardware: Night Sky and Star White remain separate finish choices inside the scene.
| Direction | Background role | Interface emphasis |
|---|---|---|
| Quiet daylight | Pale pearl or sage, restrained contrast | One existing product accent |
| Evening studio | Deep slate or blue with visible edge light | A clear selected item or bright image |
| Warm editorial | Soft peach or muted gold | Neutral UI with a deliberate focal element |
Vary composition before varying color
A useful campaign set can contain a cover view, an open hero and a detail of the hinge, all with the same palette. Different crops and source states provide variety while the background remains recognizable. Changing the palette on every image may be appropriate for a collection, but it weakens the sense that a single sequence belongs together.
Write the chosen background, finish and main interface accent into a small art-direction note. Include an approved reference image rather than relying on color names alone. When a later export appears inconsistent, compare the camera and light as well as the palette: reflected light can alter the apparent color of a surface without its setting having changed. Keep a final page-level proof so the campaign is reviewed as a set.
Final pass
Before you call it finished
- Assign the strongest accent to one meaningful element.
- Document the finish and background with a reference image.
- Review the whole asset family on its intended page.
Make the next version yours.
Explore Duo templates ↗