Colors

Primary Colors

Secondary Colors

Approved Color Combinations

Color pairings play a critical role in ensuring that NEXTDC designs are both visually appealing and accessible to all audiences.

Contrast for Accessibility

When selecting colors for text, icons, charts, or UI elements, always prioritize high-contrast combinations. Good contrast not only improves legibility for everyone but is essential for meeting WCAG accessibility standards.

For example:

• Dark on Light — Space Cadet with Berry Bloom and White, C Amber Sun, or Charcoal with Light Gray.

• Light on Dark — White on Space Cadet, Amber Sun on Black, or Cool Breeze on Space Cadet.

Poor contrast (e.g., light text on a light background) should be avoided as it can cause readability issues, especially for people with low vision or color vision deficiencies.

Brand-Approved Pairings

The combinations shown above are tested and approved for use in NEXTDC brand applications. These ensure a balance between brand alignment, visual harmony, and accessibility.

Approved pairings work well for:

• Headlines and Body Text — e.g., Space Cadet with White for maximum legibility.

• UI Elements — such as buttons, menus, or alerts, where clarity is key.

• Charts and Data Visualization — to make each category or series distinct and easy to read.

Using Gradients

In some cases, a gradient can add visual interest while still staying within brand parameters.

Gradients can be used for:

• Illustrations & Icons — to add depth or a modern, dynamic feel.

• Graphs & Infographics — to show data progression or create smooth visual transitions.

• Background Accents — behind key visuals or in section dividers for digital layouts.

When using gradients:

• Keep them within the approved palette (e.g., transitioning from a base color to its tint or shade).

• Ensure text placed over gradients still meets contrast requirements.

Tints and Shades

Intro to Tints and Shades

The NEXTDC brand color palette is built on a set of colors (shown in the middle row above). These are the foundation of our visual identity and should be used as the primary colors in most applications.

However, to give our designs greater flexibility and depth, each base color can be expanded into tints and shades:

• Tints — lighter variations of a base color, created by adding white.

• Shades — darker variations, created by adding black.

By using tints and shades, we can introduce more visual hierarchy, improve contrast, and adapt the palette for a variety of design needs — all while staying on-brand.

When to Use Tints and Shades

• Depth & Emphasis — Use tints and shades to create shadows, overlays, or to make important elements stand out.

• Illustrations & Infographics — Use lighter or darker tones for background elements, secondary details, or to separate layers.

• Charts & Graphs — Apply tints or shades to show different data series while keeping the visual connection to the base brand color.

• UI & Web Design — Use tints or shades for hover states, secondary buttons, or subtle background sections.

Things to Avoid

When choosing and combining colors, keep these pitfalls in mind to maintain clarity, accessibility, and visual harmony:

1. Insufficient Contrast

   • Avoid pairing colors that are too similar in brightness or hue, especially for text on backgrounds.

   • Always test contrast ratios to meet WCAG accessibility standards — aim for at least 4.5:1 for body text and 3:1 for large text.

2. Vibrating Color Pairs

   • Steer clear of combinations that create visual “buzz” or strain the eyes, such as pure red against pure blue, or bright magenta against neon green.

3. Too Many Colors at Once

   • Limit the active palette in a single layout to maintain cohesion.A general guideline: 1–2 dominant colors, 2–3 accent colors, and neutrals.