Color System

Neutral Foundation

The style system employs a neutral monochromatic palette as its foundation for presenting information. Visual hierarchy is established primarily through typographic techniques and grid structure rather than relying on color differentiation.

This approach helps maintain focus on content while ensuring accessibility and reducing cognitive load for users. The restraint in color usage creates a professional, timeless aesthetic that won’t quickly feel dated.

For the design and development team, it eliminates the paradox of choice that comes with access to 16.7 million possible HEX colors, streamlining decision-making and ensuring consistency.

Grayscale Palette

Black and white serve as the foundational contrast colors in the system. The grayscale palette between them performs a supporting function, ensuring comfortable information perception and helping users intuitively distinguish between primary and secondary information.

The core grayscale palette consists of three primary and five supplementary shades that are used throughout the template:

These settings can be adjusted in your global stylesheet according to specific project needs:

// css/modules/colors/_base.scss
    
// Base Colors 

--black: #000; // Text color
--white: #fff; // Used for blocks highlighting

// Grays Family 

--gray-light: #f0f0f0; // Used for backgrounds
--gray: #cccccc; // Used for borders, dividers
--gray-dark: #333333; // Used for secondary text

--gray-lightest: #fafafa; // Used for cards backgrounds
--gray-mid-light: #e4e4e4; // Used for secondary backgrounds
--gray-trans: #888888; // Used for disabled states
--gray-mid-dark: #666666; // Used for labels, captions
--gray-darkest: #191919; // Used for highlighting light-grays

These grays are implemented across all levels of the interface - from section backgrounds to specialized text elements like blockquotes, citations, and preformatted text blocks.

Accent Colors

While the grayscale palette forms the foundation, strategic use of color helps highlight key informational elements and establish visual hierarchy where necessary.

Brand Color

The most prominent color in the system is defined by the --brand-color variable. This color is primarily used for links and supporting elements, ensuring brand recognition and consistency throughout the interface.

// css/modules/colors/_brand.scss
    
--brand-color: #00ff4e; // Primary brand color
--brand-color-light: #d8f9d1; // Lighter variant for hover states
--brand-color-dark: #00b300; // Darker variant for active states

Technical Colors

Technical colors are used to highlight important info: statuses, warnings, and errors.

Technical colors should be used strictly for their intended purpose — a designer must avoid inflating the importance of content that isn’t truly critical.

Supporting Colors

A limited set of supporting colors is available for specific purposes like data visualization and thematic section coding:

Technical Implementation

Using these colors in your project is straightforward. To apply colors to elements, simply assign one of the following class patterns:

• {color-name} - Applies the color to text
• {color-name}-bg - Applies the color as a background
• {color-name}-link - Formats the element as a link with the specified color

For example:

Remember that just because these color classes are available doesn’t mean they should be used extensively. The most effective interfaces often use color sparingly, relying on it only when necessary to highlight truly important information or actions.