Colors & Palette

Color System

The NETWRIX project uses a carefully curated color palette with 14 distinct colors identified by letters (a through n). Each color serves specific purposes within the design system and is optimized for accessibility and brand consistency.

Location: src/scss/framework/_var/_vars.scss and src/scss/framework/foundation/color/_color.scss

Color Variables Structure

SCSS Definition

Location: src/scss/framework/_var/_vars.scss

// * COLORS
$color-a: #1A1536;
$color-b: #FCFAF5;
$color-c: #5851DB;
$color-d: #41F27C;
$color-e: #F4B400;
$color-f: #000000;
$color-g: #FAF6ED;
$color-h: #4D4D4D;
$color-i: #219EBC;
$color-j: #F36A1D;
$color-k: #C14589;
$color-l: #50C47A;
$color-m: #DB0024;
$color-n: #FFCCD5;

Color Options Map

$color-options: (
  a: $color-a,
  b: $color-b,
  c: $color-c,
  d: $color-d,
  e: $color-e,
  f: $color-f,
  g: $color-g,
  h: $color-h,
  i: $color-i,
  j: $color-j,
  k: $color-k,
  l: $color-l,
  m: $color-m,
  n: $color-n,
);

Color Usage

Text Colors

The color system automatically generates text color utility classes for each color in the palette using the prefix .f--color-*.

HTML Examples:

<!-- Navy text (primary brand color) -->
<h1 class="f--color-a">Secure Your Data with NETWRIX</h1>

<!-- Black text (default body text) -->
<p class="f--color-f">This is the main content text in black.</p>

<!-- Purple accent text -->
<a href="#" class="f--color-c">Learn More →</a>

<!-- Green highlight text -->
<span class="f--color-d">New Feature!</span>

<!-- Dark gray secondary text -->
<small class="f--color-h">Last updated: November 2025</small>

Generated CSS Classes:

Location: src/scss/framework/foundation/color/_color.scss

.f--color-a { color: #1A1536; }  // Navy
.f--color-b { color: #FCFAF5; }  // Cream
.f--color-c { color: #5851DB; }  // Purple
.f--color-d { color: #41F27C; }  // Green
.f--color-e { color: #F4B400; }  // Yellow
.f--color-f { color: #000000; }  // Black
// ... and so on for all colors

Background Colors

Background colors are available through the background system. The available background colors exclude some colors that aren’t suitable for backgrounds.

HTML Examples:

<!-- Navy background (dark sections) -->
<section class="f--background-a">
  <h2 class="f--color-b">Light text on dark background</h2>
</section>

<!-- Cream background (light sections) -->
<div class="f--background-b">
  <p class="f--color-f">Dark text on light background</p>
</div>

<!-- Green accent background -->
<div class="f--background-d">
  <span class="f--color-f">Highlighted content</span>
</div>

Background Color Options:

$colorbg-options: (
  a: $color-a,  // Navy
  b: $color-b,  // Cream
  c: $color-c,  // Purple
  d: $color-d,  // Green
  e: $color-e,  // Yellow
  f: $color-f,  // Black
  g: $color-g,  // Light Cream
  // h excluded (Dark Gray - not suitable for backgrounds)
  i: $color-i,  // Blue
  j: $color-j,  // Orange
  k: $color-k,  // Magenta
  l: $color-l,  // Success Green
  n: $color-n,  // Pink
);

Using Colors in SCSS

In Component Files

When creating custom components, use color variables directly in your SCSS:

@use "sass:map";
@use "@scssFoundation/foundation.scss" as *;
@use "@scss/framework/_var/_vars.scss" as *;

.c--my-component {
  @extend .f--background-a;    // Extend background color
  @extend .f--color-f;         // Extend text color
  border: 2px solid map.get($color-options, c);  // Purple border

  &__header {
    @extend .f--color-a;       // Extend heading color
  }

  &__link {
    @extend .f--color-c;       // Extend link color

    &:hover {
      @extend .f--color-d;     // Extend hover color
    }
  }
}

Color Accessibility

When using colors, always ensure sufficient contrast for accessibility:

High Contrast Combinations:

Dark text on light backgrounds: .f--color-f on .f--background-b
Light text on dark backgrounds: .f--color-b on .f--background-a
Accent text with proper contrast: .f--color-c on .f--background-b

Testing Contrast:

Use Figma Developer Mode to check contrast ratios
Ensure minimum 4.5:1 ratio for normal text
Ensure minimum 3:1 ratio for large text (18px+)

Color Best Practices

Do’s ✅

✅ Always use color variables ($color-a, $color-b, etc.) instead of hardcoded hex values
✅ Use .f--color-* utility classes for text colors in HTML
✅ Ensure sufficient contrast ratios for accessibility (use dark text on light backgrounds and vice versa)
✅ Refer to Figma for approved color combinations and use cases
✅ Use semantic meaning (green for success, red for errors, etc.)

Don’ts ❌

❌ Don’t use arbitrary color values like color: #123456 - always use defined tokens
❌ Don’t create new colors without consulting the design team and updating Figma
❌ Don’t use low-contrast color combinations that fail accessibility standards
❌ Don’t override color variables locally - they should remain global constants
❌ Don’t use background color h (dark gray) as it’s intentionally excluded

Color Quick Reference

Color	Variable	Hex	Main Use Case
A - Navy	`$color-a`	`#1A1536`	Brand, headers, dark backgrounds
B - Cream	`$color-b`	`#FCFAF5`	Light backgrounds, cards
C - Purple	`$color-c`	`#5851DB`	Links, interactive elements
D - Green	`$color-d`	`#41F27C`	Success, highlights
E - Yellow	`$color-e`	`#F4B400`	Warnings, attention
F - Black	`$color-f`	`#000000`	Body text, headings
G - Light Cream	`$color-g`	`#FAF6ED`	Soft backgrounds
H - Dark Gray	`$color-h`	`#4D4D4D`	Secondary text
I - Blue	`$color-i`	`#219EBC`	Info messages
J - Orange	`$color-j`	`#F36A1D`	Alerts, energy
K - Magenta	`$color-k`	`#C14589`	Special accents
L - Success Green	`$color-l`	`#50C47A`	Confirmations
M - Red	`$color-m`	`#DB0024`	Errors, critical alerts
N - Pink	`$color-n`	`#FFCCD5`	Soft accents

Common Color Patterns

Hero Section

<section class="f--background-a u--pt-15 u--pb-15">
  <h1 class="f--color-b">Hero Heading</h1>
  <p class="f--color-b">Hero description</p>
</section>

Content Section

<section class="f--background-b u--pt-10 u--pb-10">
  <h2 class="f--color-a">Section Heading</h2>
  <p class="f--color-f">Body content</p>
  <a href="#" class="f--color-c">Learn More</a>
</section>

Success Message

<div class="f--background-l">
  <p class="f--color-f">Success! Your changes have been saved.</p>
</div>

Error Message

<div class="f--background-m">
  <p class="f--color-b">Error: Please try again.</p>
</div>

Next Section

Continue to Typography System to learn about font families and the responsive typography scale.

Chapter 2 Overview - Back to foundations introduction
Typography System - Next section
Figma: NETWRIX UI Design - Foundations
Code: src/scss/framework/_var/_vars.scss - Color variables
Code: src/scss/framework/foundation/color/_color.scss - Color utilities