A closer description to Namirial’s official color palette.

What is the aim?

Basically we provide our main software solutions white labeled, which means we want to stick to Black/White/Gray and add an accent color which can be exchanged by any company if they want to. Our new accent color is Teal with stands for nature and sustainability, which highlights the mission of Namirial. Making business greener.

For eCommerce, Social Marketing and Employer Branding we use Teal in richer way, which makes us more visible as a company. 

For Namirial’s Vertical Solution Products (VSP) we use Sandstone as additional color.

Check out the up to date color palette here: Official Color Palette on Figma

Last update on 8.11.2023

Color codes for copy/paste

Functional

Brand Gradients

Name	Starting Color	Ending Color	CSS	LESS variable	Preview
Light Breeze	Accent gray #E6EEEE	Gray light 90 #F8F8F7	linear-gradient(102.44deg, #E6EEEE 16.2%, #F8F8F7 84.55%)	@theme-light-breeze
Dark Ground	Gray base #35364A	Black #111820	linear-gradient(102.44deg, #35364A 16.2%, #111820 84.55%)	@theme-dark-ground
Light Ground	Gray light 90 #F8F8F7	Gray light 80 #EBEBED	linear-gradient(102.44deg, #F8F8F7 16.2%, #EBEBED 84.55%)	@theme-light-ground
Dark Ocean	Teal dark 40 #00645E	Teal dark 20 #00857E	linear-gradient(102.44deg, #00645E 16.2%, #00857E 84.55%)	@theme-dark-ocean
Dark Wave	Teal dark 60 #00423F	Gray base #35364A	linear-gradient(102.44deg, #00423F 16.2%, #35364A 84.55%)	@theme-dark-wave
Light Ocean	Teal light 20 #33B8B1	Teal light 50 #80D3CE	linear-gradient(102.44deg, #33B8B1 16.2%, #80D3CE 84.55%)	@theme-light-ocean
Dark Stone Wall (VSP)	Sandstone dark #686258	Black #111820	linear-gradient(180deg, #686258 0%, #111820 100%);	@theme-dark-stone-wall
Light Stone Wall (VSP)	Sandstone #E7DBC3	Sandstone Light #FBF8F1	linear-gradient(102.44deg, #E7DBC3 16.2%, #FBF8F1 84.55%)	@theme-light-stone-wall

How to use the color palette? (Real life examples)

Brand Colors

• Used for logo design, typography, icons, graphics and highlighting UI elements

Basic Colors

• Used in common context, for texts and backgrounds

Grayscale

• Used for typography, backgrounds and functional UI elements

Functional Colors

• Used for status messages like notifications, errors, warnings and success messages. In general colors should follow basic color conventions, like green for success, blue for info/help, orange for warning, red for errors. 

Gradient Backgrounds

• Used for highlighting backgrounds and graphical work

Additional colors

• Used to differentiate in terms various context. Namirial invented the additional color shade ‘Sandstone’ for the Vertical Solutions, like Gestionali (HR software). Mainly used to differ in backgrounds and for icons.

Accessibility of Color

Color Contrast Check 

• Normal text, text in images and important elements without texts (e.g. Icons) requires a contrast ratio of at least 4.5:1 (Level AA). For larger text starting from 18pt or 14pt bold a ratio of 3:0:1 is required. WCAG 2.0 – 1.4.3
• Graphics and user interface components (such as form input borders) requires a contrast ratio of at least 3:0:1. WCAG 2.1 – 1.4.11
• Excluded from color contrast requirements are mouse-over and interactive elements, which are not restricted to understand the UI or disabled. 

Tools for checking contrast color:

• https://webaim.org/resources/contrastchecker/
• Figma Plugin: A11y – Color Conrast Checker

• Chrome color picker in the developer tool

Color Blindness

• Designing for Color Blindness: Color should not be used as the only method of conveying information, indicating a reaction to action, or distinguishing a visual element. 
• The Namirial color palette is color blind safe. Used tool: https://color.adobe.com/create/color-accessibility

Color Naming 

The goal is to achieve a aligned communication about colors. So that each team, Designers, Developers and Marketing is aware of Namirial’s color names. Therefore some points are relevant to know:

• Considering color variants with 10 – 100 mixing tone (black) and tint (white). More flexible due to more variants of one color. 
• Name the colors what it is than what it looks like to be independent from color names. So avoid color names like purple and find additional wordings, which is more descriptive, like base, accent, neutral, light, dark, error, success, info, warning, gradient. 
• The naming for technical purpose consists of theme(prefix)-colordescription-colorvariant. E.g. theme-accent-light-20
  • Use instead Black – “UI darkest” 
  • Use instead White – “UI lightest”
  • Use instead Gray – “Neutral”
  • Use instead Teal – “Accent”
•  See complete naming list below:

 Naming List

/*Basic Colors*/
/*Used in common context, for texts and backgrounds*/
@theme-ui-lightest: #ffffff; 
@theme-ui-darkest: #111820;

/*Brand Colors*/
/*Used for typography, buttons, icons, graphics and highlighting UI elements*/
@theme-accent-base: #00a69d; 
@theme-accent-light-20: #33b8b1; 
@theme-accent-light-50: #80d3ce; 
@theme-accent-dark-60: #00423f;
@theme-accent-dark-20: #00857e; 
@theme-accent-dark-40: #00645e; 
@theme-accent-light-80: #ccedeb;
@theme-accent-neutral: #E6EEEE; 

/*Grayscales*/
/*Used for typography, icons, backgrounds and functional UI elements */
@theme-neutral-base:#35364A; 
@theme-neutral-light-20:#686f77;
@theme-neutral-light-40:#91949C;
@theme-neutral-light-60:#cdcfd2;
@theme-neutral-light-80:#ebebed;
@theme-neutral-light-90:#f8f8f7;

/*Functional Colors*/
/*Used for status messages like notifications, errors, warnings and success messages*/
@theme-success-base:#056E4B; 
@theme-success-dark:#04583c; 
@theme-success-light:#cde2db; 
@theme-info-base:#005e8c; 
@theme-info-dark:#004b70; 
@theme-info-light:#ccdfe8; 
@theme-warning-base:#c65015; 
@theme-warning-dark:#9e4011; 
@theme-warning-light:#f4dcd0; 
@theme-error-base:#b50600; 
@theme-error-dark:#910500; 
@theme-error-light:#f0cdcc; 

/*Gradiant Backgrounds*/
/*Used for highlighting backgrounds and graphical work*/
@theme-dark-ground: linear-gradient(102.44deg, #35364A 16.2%, #111820 84.55%);
@theme-dark-wave: linear-gradient(102.44deg, #00423F 16.2%, #35364A 84.55%);
@theme-dark-ocean: linear-gradient(102.44deg, #00645E 16.2%, #00857E 84.55%);
@theme-light-breeze: linear-gradient(102.44deg, #E6EEEE 16.2%, #F8F8F7 84.55%);
@theme-light-ground: linear-gradient(102.44deg, #F8F8F7 16.2%, #EBEBED 84.55%);
@theme-light-ocean: linear-gradient(102.44deg, #33B8B1 16.2%, #80D3CE 84.55%);