Colour & composition / 4 min read
Choose colours with a job to do.
Turn a collection of swatches into usable colour roles, with a worked palette for a fictional workshop website.
Give the palette a specific job
Fieldnote is a fictional neighbourhood workshop website used throughout this studio exercise. Its example offer is “Make your first clay planter”, supported by “A two-hour beginner workshop. Materials included.” The design needs to make that information easy to read and give “View workshop dates” a clear place in the composition. This is a proposal for a made-up service, not a launched client project or a reported conversion improvement. Write those jobs down before choosing colours: a dependable reading surface, a strong text colour, a recognisable action treatment, and space for expressive illustrations. A swatch earns its place by serving one of those jobs.
Name roles that survive a redesign
Use semantic names such as surface, text, action-background, action-text, and illustration-accent. “Lime” describes an appearance; “action-background” explains where a colour belongs. In the Fieldnote proposal, surface is paper #f3f0e8, text is ink #18231d, and the primary action uses lime #d8ff3e with ink text. Orange #ff6b35 belongs to the decorative illustration. It is not approved here for body text, warning messages, or button labels. The same ink value can fill more than one role without creating more swatches. If the identity changes later, replace the token value while keeping its purpose understandable to the next person working on the site.
Judge the colours inside a page
The figure below applies those roles to Fieldnote rather than displaying equal squares alone. Paper occupies most of the surface, ink carries the message, lime marks the proposed action, and orange supports the workshop illustration. This distribution matters: filling half the page with lime would create a different composition even though the swatches had not changed. Start with one compact page and compare a calm reading area against an accent-heavy version. There is no compulsory percentage formula for every site. Keep the variant that makes the workshop information and the next action easier to identify, then check that judgement with people unfamiliar with the exercise.
Assign a job before adding a colour.
- Ink
#18231dBody text + headings - Paper
#f3f0e8Reading background - Lime
#d8ff3eAction accent + ink text - Orange
#ff6b35Illustration only
Approve pairs, not isolated colours
A colour cannot be declared readable without its partner and context. Record the foreground and background for body copy, buttons, links, focus indicators, and any text over imagery. W3C’s contrast guidance evaluates text against its background; a bright-looking accent is not proof that the words on it are readable. Use a contrast checker on the actual values and inspect the rendered type as well. These palette examples demonstrate roles, not a full accessibility certification. For a selected date, combine the colour treatment with visible wording or a shape change. An error needs an explanatory message; changing a border from green to orange would leave the meaning dependent on colour.
W3C: Contrast (Minimum) ↗W3C: Use of Color ↗Extend the system only when a state needs it
A booking interface will eventually need hover, keyboard focus, unavailable dates, errors, and confirmation. Do not make the decorative orange responsible for all of them. Sketch the required states first, define what each must communicate, then add or adjust tokens deliberately. A selected date might use ink and paper with a visible “Selected” label; an unavailable session should still explain why it cannot be chosen. Check those states on the background where they actually appear. If printed workshop cards become part of a real brief, commission a physical proof before treating the screen palette as a production specification. Paper and print processes require their own decisions.
Make a colour handover someone can use
Create a one-page specification containing the token name, value, intended role, approved foreground/background pair, and a real component example. Add one useful restriction: Fieldnote orange is decorative in this proposal, so it should not silently become a new text colour. As an exercise, apply the palette to a workshop card, a date-selection state, and an error message. Note which colours have a clear job and where a new token is genuinely needed. Finish with a verification checklist for contrast, non-colour cues, keyboard focus, and the actual display conditions. Record checks you completed separately from checks still planned; a tidy colour sheet is a starting point for testing, not evidence that testing happened.