---
title: Colors
layout: common-ux-layout.hbs
---

<strong>Nordic additions</strong>
<p>Additionaly to the colors defined in the global profile the Nordic market also use its own ‘Red Nordic’ and ‘Blue
  Nordic’. The red is used as the bright part of the TUI button gradient but also in other cases when the red needs to
  be on top of for example darker images. The blue is primarily used as the link color for better readability but we
  have also started to use it as the background color in the subnav to be able to use white text on to that needs this
  improved contrast for readability.</p>


<section class="sg-section">
  <div class="sg-grid">
    {{#each colors.acro}}
      <div class="sg-item">
        <label>
          <span class="button-heading">${{scssName}}</span>
        </label>
        <div class="sg-item border"></div>
        {{>color}}
      </div>
    {{/each}}
  </div>
</section>

<section class="sg-section">
  <div class="sg-grid">
    {{#each colors.others}}
    <div class="sg-item">
      {{#if scssName}}
      <label>
        <span class="button-heading">${{scssName}}</span>
      </label>
      <div class="sg-item border"></div>
      {{>color}}
      {{/if}}
    </div>
    {{/each}}
  </div>
</section>

<section class="sg-section">
  <div class="sg-grid">
    {{#each colors.blues}}
    <div class="sg-item">
      <label>
        <span class="button-heading">${{scssName}}</span>
      </label>
      <div class="sg-item border"></div>
      {{>color}}
    </div>
    {{/each}}
  </div>
</section>


<section class="sg-section">
  <div class="sg-grid">
    {{#each colors.colorsToFix}}
      <div class="sg-item">
        <label>
          <span class="button-heading">${{scssName}}</span>
        </label>
        <div class="sg-item border"></div>
        {{>color}}
      </div>
    {{/each}}
  </div>
</section>
