The only thing that matters is the data your audience is came for. Design, layouts, make-up and decorations are just your tools to highlight the value.
Imagine you have 30 secs to pitch your data. What would you say? What decision maker need to know? How would you present it? What would you highlight? What would you hide?
That's it. That's the only thing that matters. Delete the noise. Make your audience satisfied.
Actualy, the most effective way to solve your problem
If you find a bug or have a feature request
To discuss a proper way or provide some feedback
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.
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.
While the grayscale palette forms the foundation, strategic use of color helps highlight key informational elements and establish visual hierarchy where necessary.
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 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.
A limited set of supporting colors is available for specific purposes like data visualization and thematic section coding:
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 colorFor 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.