Color

02 Primary colors

Our primary colors are the foundation of the Squad22 identity. Turquoise is the hero color: it appears large, in backgrounds and in the logo's '22.

Nocturne comes from the website and carries text and dark backgrounds. For accessibility, turquoise never goes on white or paper. There the highlight is rose or signal blue, never both in the same piece. For text smaller than 24 px on light backgrounds, use dark rose.

02 Secondary colors

Secondary colors add depth and structure. Rose is turquoise's complement on the color wheel and takes its place whenever the background is light.

Paper and toner come from the photocopy language of our posts. Toner is supporting text on dark backgrounds only; on light, use graphite. Night blue and graphite work as alternative dark backgrounds. Sky sits halfway between turquoise and signal blue on the color wheel (206°) and bridges the two.

02 Tertiary colors

The turquoise scale has five steps with the same hue and saturation, changing only lightness: 90%, 70%, 50%, 35% and 20%.

The blue scale follows the same five lightness steps: 90%, 70%, 58% (signal blue), 35% and 20%.

02 Tertiary colors

The rose scale follows the same steps: 90%, 70%, 60% (rose), 35% and 20%. Use it for alerts, comparisons and to mark what changed. Dark rose is the version for small text on light backgrounds.

Nocturne tones organize information in layers and separate reading levels.

02 Neutral colors

Neutral colors provide structure, contrast and balance. They support primary and secondary colors and are used for typography, backgrounds and layout elements that shouldn't compete with the message.

02 Color hierarchy

Color hierarchy decides which color speaks first.

Turquoise leads: it is the first color people associate with Squad22. Nocturne and white form the reading base. On light backgrounds, rose or signal blue takes over turquoise's role, depending on the piece's color.

Secondary and tertiary colors support the content. Use them to tell sections apart, mark data or draw attention to a point.

02 Color combos

Color combinations strengthen meaning and add clarity.

Turquoise on nocturne is the brand's strongest combination. On light backgrounds, the highlight moves to rose or signal blue: turquoise on white or paper has no contrast.

Rose and turquoise together vibrate a lot: use them in small areas and never in the logo.

Signal blue and rose never share a piece. Each post picks one and uses it from start to finish, with the same weight: background, highlight and numbers.

Always check legibility and balance, especially with saturated colors.

02 Color wheel

Complementary

Turquoise + rose

Highlights, alerts and what changed. Rose sits 8° from turquoise's exact opposite, close enough to work as its complement.

Triad

Turquoise + yellow + magenta

Three colors 120° apart. Charts and data with several series. Yellow is also the highlighter for markups.

Analogous

Mint + turquoise + sky

Neighbors 30° from turquoise. Gradients, data backgrounds and calm illustrations.

Split complementary

Turquoise + orange + raspberry

The two neighbors of the exact opposite (356°), 30° on each side. Campaigns and events that need more energy.

All supporting colors were calculated on the wheel from turquoise (176°). They never replace the primary colors.

02 Gradient

Brand gradient: turquoise, sky and signal blue, the analogous colors from the wheel. Use only on large backgrounds and covers, never on text or the logo.

Photo gradient: nocturne from 0 to 100%, to make text over images readable.

02 Usage examples

Use turquoise for what needs to be seen first: numbers, highlights and calls to action. Nocturne and signal blue hold the background.

With saturated colors, pair them with nocturne, white or paper for legibility. Avoid large areas of turquoise and rose in the same piece.