Color Usage

Vietnam Is Awesome is a diverse community with various activities and chapters for all age groups. The color system should stay recognizable while being flexible enough to adapt to different designs and applications.

palette.png

4 Tint Levels

From the four main colours, separate them into different tint levels with increasing values. The darkest colours are Tint 1, and the lightest colours are Tint 4.

tint.png

4 Ways To Mix Colors

There are four ways to combine tints according to different moods and situations: Monotone, Dynamic, Light Monotone, and Light Dynamic.

Monotone Theme

This colour scheme uses pairs of the same hue to create a calm and neutral feel.

Use a background colour from Tint 1 or Tint 2 with a headline in the same hue, like Magenta 1 paired with Magenta 3, ensuring sufficient contrast between the text and background. The body text should be white.

image.png
image-1.png
image-2.png
image-3.png

Dynamic Theme

This colour scheme uses pairs of different hues to create a bold and dynamic feel.

Body text should use white.Use a background colour from Tint 1 or 2 with a headline in the same hue, like Green 1 paired with Magenta 3, ensuring sufficient contrast between the text and background. The body text should be white.

image-4.png
image-5.png
image-6.png
image-7.png

Light Monotone Theme

This colour scheme uses pairs of the same hue to create a calm and neutral feel.

Use a background colour from Tint 4 with a headline in the same hue, like Magenta 4 paired with Magenta 1, ensuring sufficient contrast between the text and background. The body text should be black.

image-8.png
image-9.png
image-10.png
image-11.png

Light Dynamic Theme

This colour scheme uses pairs of different hues to create a bold and dynamic feel.

Use a background colour from Tint 4 with a headline in the different hue, like Magenta 4 paired with Magenta 1, ensuring sufficient contrast between the text and background. The body text should be black.

image-12.png
image-13.png
image-14.png
image-15.png

Examples

The colour theme for an application can be selected based on the specific context, mood, vibe, and sector.

image-16.png
image-17.png
image-18.png
image-19.png

Color Combinations To Avoid

Avoid using colour pairs with insufficient contrast, as they can cause discomfort and readability issues for the viewer.

Frame 2147229837.png
Avatar

Cōsmo