Principles
Guidance to success
This section outlines our core design do’s and don’ts, the practical stuff that keeps GES work clear, consistent, and on-brand.
While other sections focus on what to do, this page highlights what to watch out for. These aren’t hard rules, but they’re strong recommendations. Good design sometimes breaks convention, but it should never break clarity, accessibility, or purpose.
Colour with typography
In most cases, stick to solid colours from a single colour family when applying colour to typography. This ensures clarity, cohesion, and consistency across brand touchpoints.
While experienced designers may explore exceptions, these guidelines are the standard for maintaining a clean, professional look.
Do use colour tones from the same colour family.
*Don’t combine different colour families.
Do use solid colours on typography.
*Don’t use gradients on typography.
Colour with backgrounds
Use solid backgrounds in approved mid-tone levels (400, 500, or 700) to ensure readability and brand consistency.
Gradients and off-tone levels can create contrast issues or visual noise, so they are best avoided unless handled with care by experienced designers.
Do use solid coloured backgrounds.
*Don’t use gradient backgrounds.
Do use colour levels 400, 500, and 700 for background colours.
Don’t use colour levels 100, 200, 300, 600, or 800 as background colours.
Colour with elements
When using brand elements like the spiral, ensure colour and contrast feel intentional and balanced. Use mid-to-dark tones for clarity, and keep high-contrast applications subtle to avoid clashing with text or other content.
These treatments are most effective when used with restraint, not as visual noise.
Do use ‘thin’ spiral element as 500 colour on 700 background colour
Don’t use ‘thin’ spiral element as 100, 200, 300 colour.
Do use ‘thick’ spiral element as subtle background.
Don’t use ‘thick’ spiral element as high contrast background that conflicts with text.
Colour with photography
Pair background colours with photography thoughtfully, using complementary or analogous tones that enhance rather than compete.
Avoid clashes or off-brand choices by sticking to the approved palette and keeping harmony between image and background.
Do use background colours that are complementary to photography colour schemes.
Don’t use background colours that clash with photography or aren’t within Using our colours.
Do use background colours that are analogous to photography colour schemes.
Don’t use background colours that clash with photography or aren’t within Using our colours.
Colour with photography
We also use neutral backgrounds if the available shades of the product’s primary colour do not allow enough contrast for the image to shine.
Do use a neutral background to ensure contrast with the product.
Don’t use the product’s primary color as a background if there isn’t enough contrast to ensure the product is legible.
Making it legible
To keep text legible over photography, apply a soft oval feathered gradient behind the text as your first step. In most cases, we also recommend adding a subtle black scrim (#000000 at 5–20% opacity) over the full image to reduce visual noise and improve clarity.
Always use your judgment based on the image. The goal is to support legibility without harsh overlays or distracting shapes.
Do apply a 5% black scrim across the whole image, add a radial or linear gradient behind the text, and use a subtle drop shadow to keep text clear and legible.
Don’t place text directly over busy or very light/dark areas without a scrim, gradient, or shadow. All text must meet a minimum contrast ratio of 4.5:1.
Previous
Expression
Next
Voice and Tone
© Gudstuff Design Ltd
All Rights Reserved
Principles
Guidance to success
This section outlines our core design do’s and don’ts, the practical stuff that keeps GES work clear, consistent, and on-brand.
While other sections focus on what to do, this page highlights what to watch out for. These aren’t hard rules, but they’re strong recommendations. Good design sometimes breaks convention, but it should never break clarity, accessibility, or purpose.
Colour with typography
In most cases, stick to solid colours from a single colour family when applying colour to typography. This ensures clarity, cohesion, and consistency across brand touchpoints.
While experienced designers may explore exceptions, these guidelines are the standard for maintaining a clean, professional look.
Do use colour tones from the same colour family.
*Don’t combine different colour families.
Do use solid colours on typography.
*Don’t use gradients on typography.
Colour with backgrounds
Use solid backgrounds in approved mid-tone levels (400, 500, or 700) to ensure readability and brand consistency.
Gradients and off-tone levels can create contrast issues or visual noise, so they are best avoided unless handled with care by experienced designers.
Do use solid coloured backgrounds.
*Don’t use gradient backgrounds.
Do use colour levels 400, 500, and 700 for background colours.
Don’t use colour levels 100, 200, 300, 600, or 800 as background colours.
Colour with elements
When using brand elements like the spiral, ensure colour and contrast feel intentional and balanced. Use mid-to-dark tones for clarity, and keep high-contrast applications subtle to avoid clashing with text or other content.
These treatments are most effective when used with restraint, not as visual noise.
Do use ‘thin’ spiral element as 500 colour on 700 background colour
Don’t use ‘thin’ spiral element as 100, 200, 300 colour.
Do use ‘thick’ spiral element as subtle background.
Don’t use ‘thick’ spiral element as high contrast background that conflicts with text.
Colour with photography
Pair background colours with photography thoughtfully, using complementary or analogous tones that enhance rather than compete.
Avoid clashes or off-brand choices by sticking to the approved palette and keeping harmony between image and background.
Do use background colours that are complementary to photography colour schemes.
Don’t use background colours that clash with photography or aren’t within Using our colours.
Do use background colours that are analogous to photography colour schemes.
Don’t use background colours that clash with photography or aren’t within Using our colours.
Colour with photography
We also use neutral backgrounds if the available shades of the product’s primary colour do not allow enough contrast for the image to shine.
Do use a neutral background to ensure contrast with the product.
Don’t use the product’s primary color as a background if there isn’t enough contrast to ensure the product is legible.
Making it legible
To keep text legible over photography, apply a soft oval feathered gradient behind the text as your first step. In most cases, we also recommend adding a subtle black scrim (#000000 at 5–20% opacity) over the full image to reduce visual noise and improve clarity.
Always use your judgment based on the image. The goal is to support legibility without harsh overlays or distracting shapes.
Do apply a 5% black scrim across the whole image, add a radial or linear gradient behind the text, and use a subtle drop shadow to keep text clear and legible.
Don’t place text directly over busy or very light/dark areas without a scrim, gradient, or shadow. All text must meet a minimum contrast ratio of 4.5:1.
Previous
Expression
Next
Voice and Tone
© Gudstuff Design Ltd
All Rights Reserved
Principles
Guidance to success
This section outlines our core design do’s and don’ts, the practical stuff that keeps GES work clear, consistent, and on-brand.
While other sections focus on what to do, this page highlights what to watch out for. These aren’t hard rules, but they’re strong recommendations. Good design sometimes breaks convention, but it should never break clarity, accessibility, or purpose.
Colour with typography
In most cases, stick to solid colours from a single colour family when applying colour to typography. This ensures clarity, cohesion, and consistency across brand touchpoints.
While experienced designers may explore exceptions, these guidelines are the standard for maintaining a clean, professional look.
Do use colour tones from the same colour family.
*Don’t combine different colour families.
Do use solid colours on typography.
*Don’t use gradients on typography.
Colour with backgrounds
Use solid backgrounds in approved mid-tone levels (400, 500, or 700) to ensure readability and brand consistency.
Gradients and off-tone levels can create contrast issues or visual noise, so they are best avoided unless handled with care by experienced designers.
Do use solid coloured backgrounds.
*Don’t use gradient backgrounds.
Do use colour levels 400, 500, and 700 for background colours.
Don’t use colour levels 100, 200, 300, 600, or 800 as background colours.
Colour with elements
When using brand elements like the spiral, ensure colour and contrast feel intentional and balanced. Use mid-to-dark tones for clarity, and keep high-contrast applications subtle to avoid clashing with text or other content.
These treatments are most effective when used with restraint, not as visual noise.
Do use ‘thin’ spiral element as 500 colour on 700 background colour.
Don’t use ‘thin’ spiral element as 100, 200, 300 colour.
Do use ‘thick’ spiral element as subtle background.
Don’t use ‘thick’ spiral element as high contrast background that conflicts with text.
Colour with photography
Pair background colours with photography thoughtfully, using complementary or analogous tones that enhance rather than compete.
Avoid clashes or off-brand choices by sticking to the approved palette and keeping harmony between image and background.
Do use background colours that are complementary to photography colour schemes.
Don’t use background colours that clash with photography or aren’t within Using our colours.
Do use background colours that are analogous to photography colour schemes.
Don’t use background colours that clash with photography or aren’t within Using our colours.
To improve contrast
We also use neutral backgrounds if the available shades of the product’s primary colour do not allow enough contrast for the image to shine.
Do use a neutral background to ensure contrast with the product.
Don’t use the product’s primary color as a background if there isn’t enough contrast to ensure the product is legible.
Making it legible
To keep text legible over photography, apply a soft oval feathered gradient behind the text as your first step. In most cases, we also recommend adding a subtle black scrim (#000000 at 5–20% opacity) over the full image to reduce visual noise and improve clarity.
Always use your judgment based on the image. The goal is to support legibility without harsh overlays or distracting shapes.
Do apply a 5% black scrim across the whole image, add a radial or linear gradient behind the text, and use a subtle drop shadow to keep text clear and legible.
Don’t place text directly over busy or very light/dark areas without a scrim, gradient, or shadow. All text must meet a minimum contrast ratio of 4.5:1.
Previous
Expression
Next
Voice and Tone
© Gudstuff Design Ltd
All Rights Reserved