Apply colors to a mobile screen and keep repeated parts consistent.
What you will learn.
Keep one grayscale finance screen and make two same-layout color options with recorded roles, contrast, and non-color state cues.
Before you begin.
Start with Build and compare small palettes and the color starter files. The source contains Cryptocurrency Project.sketch and a supplied preview. This particular Sketch file has not been verified in Figma Design. First try an imported copy and inspect its text and layers; if unusable, reconstruct only the single shown screen and label that preparation.
Learn the concept.
Apply color to a screen
Words to know.
Opacity
How solid or see-through a color or image is.
How transparent a part is
Component
A reusable design part, such as a chart or button.
One reusable control
Neutral color
A color such as white, gray, or near-black, often used for backgrounds and text.
A supporting neutral
Contrast
How different an item looks from its background. Text needs enough difference to be readable.
Visible difference between parts
The idea in practice
See a worked example.
Give each swatch a job, such as “main button” or “body text.”
For exampleLabel one swatch “background” and another “main button.”
Compare changes on the same screen so you can explain what improved.
For examplePut both versions of the same mobile screen side by side.
Inspect repeated items together to catch small accidental color differences.
For exampleCheck that every repeated menu item uses the same text color.
Worked finance roles. On this screen, keep the balance text, chart, selected navigation, and status in the same locations. Use dark text on a light background, an action color for the main control, and a visible selected marker plus color. Record the actual text/background HEX pair and measured contrast; do not assume a color looks sufficient. The source color example is not your required answer.
