Design

Color Scheme

Brand Colors

Primary brand colors are used for elements that must reflect AIN’s brand.

Color-ain
rgb(74, 140, 255)
Color-ain-dark
rgb(45, 114, 235)
Color-ain-bright
rgb(64, 63, 255)
Color-global
rgb(85, 107, 204)
Color-executive
rgb(49, 112, 143)
Color-pro
rgb(85, 160, 240)
Color-novice
rgb(85, 198, 204)

Grey Colors

Grey colors are used for text, backgrounds, lines and borders. Smoke and Snow have two darker shades, which are used for icons and backgrounds.

Color-darker
rgb(27, 32, 47)
Color-grey-lightest
rgb(246, 249, 251)
Color-dark
rgb(37, 49, 66)
Color-dark-mid
rgb(79, 87, 102)
Color-dark-light
rgb(99, 111, 123)
Color-grey-warm
rgb(151, 156, 166)
Color-grey
rgb(205, 211, 217)
Color-grey-cool
rgb(180, 195, 211)
Color-grey-cooler
rgb(216, 226, 236)
Color-grey-light
rgb(223, 233, 242)
Color-grey-lighter
rgb(242, 246, 249)

UI Colors

The main UI colors are used for action buttons, alert messages, and form elements. Input fields, for example, can get positive and negative feedback, whereas alert messages can have warning feedback.

Red
rgb(255, 73, 73)
Yellow
rgb(252, 207, 80)
Blue
rgb(0, 140, 255)
Green
rgb(19, 206, 102)
<h4>Brand Colors</h4>

<p>Primary brand colors are used for elements that must reflect AIN’s brand.</p>

<div class="f-color-chips">
	<div class="f-color-chip">
		<div class="f-color-chip__name">Color-ain</div>
		<div class="f-color-chip__color">rgb(74, 140, 255)</div>
	</div>
</div>
<div class="f-color-chips">
	<div class="f-color-chip">
		<div class="f-color-chip__name">Color-ain-dark</div>
		<div class="f-color-chip__color">rgb(45, 114, 235)</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Color-ain-bright</div>
		<div class="f-color-chip__color">rgb(64, 63, 255)</div>
	</div>
</div>
<div class="f-color-chips">
	<div class="f-color-chip">
		<div class="f-color-chip__name">Color-global</div>
		<div class="f-color-chip__color">rgb(85, 107, 204)</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Color-executive</div>
		<div class="f-color-chip__color">rgb(49, 112, 143)</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Color-pro</div>
		<div class="f-color-chip__color">rgb(85, 160, 240)</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Color-novice</div>
		<div class="f-color-chip__color">rgb(85, 198, 204)</div>
	</div>
</div>


<h4>Grey Colors</h4>

<p>Grey colors are used for text, backgrounds, lines and borders. Smoke and Snow have two darker shades, which are used for icons and backgrounds.</p>

<div class="f-color-chips">
	<div class="f-color-chip">
		<div class="f-color-chip__name">Color-darker</div>
		<div class="f-color-chip__color">rgb(27, 32, 47)</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Color-grey-lightest</div>
		<div class="f-color-chip__color">rgb(246, 249, 251)</div>
	</div>
</div>
<div class="f-color-chips">
	<div class="f-color-chip">
		<div class="f-color-chip__name">Color-dark</div>
		<div class="f-color-chip__color">rgb(37, 49, 66)</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Color-dark-mid</div>
		<div class="f-color-chip__color">rgb(79, 87, 102)</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Color-dark-light</div>
		<div class="f-color-chip__color">rgb(99, 111, 123)</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Color-grey-warm</div>
		<div class="f-color-chip__color">rgb(151, 156, 166)</div>
	</div>
</div>
<div class="f-color-chips">
	<div class="f-color-chip">
		<div class="f-color-chip__name">Color-grey</div>
		<div class="f-color-chip__color">rgb(205, 211, 217)</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Color-grey-cool</div>
		<div class="f-color-chip__color">rgb(180, 195, 211)</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Color-grey-cooler</div>
		<div class="f-color-chip__color">rgb(216, 226, 236)</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Color-grey-light</div>
		<div class="f-color-chip__color">rgb(223, 233, 242)</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Color-grey-lighter</div>
		<div class="f-color-chip__color">rgb(242, 246, 249)</div>
	</div>
</div>


<h4>UI Colors</h4>

<p>The main UI colors are used for action buttons, alert messages, and form elements. Input fields, for example, can get positive and negative feedback, whereas alert messages can have warning feedback.</p>

<div class="f-color-chips">
	<div class="f-color-chip">
		<div class="f-color-chip__name">Red</div>
		<div class="f-color-chip__color">rgb(255, 73, 73)</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Yellow</div>
		<div class="f-color-chip__color">rgb(252, 207, 80)</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Blue</div>
		<div class="f-color-chip__color">rgb(0, 140, 255)</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Green</div>
		<div class="f-color-chip__color">rgb(19, 206, 102)</div>
	</div>
</div>
<div class="f-color-chips">
</div>
<div class="f-color-chips">
</div>