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

<h2>TUI logo</h2>

<section class="sg-section">
  <p>The TUI logo consists of the TUI-Smile and the wordmark, both in the brand colour TUI-Red and is mainly used as
    one entity together with the claim.</p>
  <p>The specified minimum spacing around the TUI logo must be 1.5 * ’the eye’. No other elements may be placed in or
    extend into this defined protective zone. The minimum spacing also applies to the logo version without the claim
    and the single TUI-Smile.</p>
</section>

<section class="sg-section">
  <h3>Inline TUI Logotype</h3>
  <p>Used for main logo at TUI Nordic</p>
  {{>logo_tui_svg}}

</section>

<section class="sg-section">
  <div class="sg-grid sg-logo">
    {{#each logo-tui.logo-tui}}
      <div class="sg-item icon">
        <h3>{{headline}}</h3>
        <div>
          <img class="{{class-name}}" {{#if origin}}data-origin="svg" {{/if}}src="/cdn/logos/{{src}}" alt="TUI"/>
        </div>
      </div>
    {{/each}}
  </div>
</section>

<section class="sg-section">
  <h3>TUI Sub Brands</h3>
  <p class="preamble">
    The Nordic market has made tweaks from the original logos for improved web implementation.
    Visit the global brand page for unmodified logos and their complete separate graphical profiles.
  </p>
  <ul>
    <li>
      <p>Typography has been streamlined to the same TUI font we use on the web.
        The visual difference is for most cases not distinguishable and lets us implement the logos with HTML-text for
        improved accessibility and SEO-values, and of course consistency.
      </p>
    </li>
    <li>
      <p>
        The logo emblems has been streamlined to the same size in order for us to present the concepts in a consistent
        manner.
        Mainly for improved usability but also makes for a much improved implementation and maintanence of modules.
      </p>
    </li>
    <li>
      <p>
        Visit the global brand page for the original unmodified sub brand logos.
      </p>
    </li>
  </ul>
</section>

<h2>Nordic concept logos</h2>

<section class="sg-section flexbox-row concept-logo-container">
  <div class="flexbox-column">
    <h3>Concept logos small</h3>
    {{#each concepts-nordic.concepts}}
      <div class="tui-concept-logo-box">
        {{>concept_logo size='small'}}
      </div>
    {{/each}}
  </div>
  <div class="flexbox-column">
    <h3>Concept logos large</h3>
    {{#each concepts-nordic.concepts}}
      <div class="tui-concept-logo-box">
        {{>concept_logo}}
      </div>
    {{/each}}
  </div>
  <div class="flexbox-column">
    <h3>Squared</h3>
    {{#each concepts-nordic.concepts}}
      <div class="tui-concept-logo-box">
        {{>concept_logo squared=true}}
      </div>
    {{/each}}
  </div>
</section>

<section class="sg-section">
  <h3>Concept Banners</h3>
  {{#each concepts-nordic.concepts}}
    {{>concept_banner_svg}}
  {{/each}}
</section>

<section class="sg-section">
  <h3>Concept Tiles</h3>
  <div class="sg-grid sg-container">
    {{#each concepts-nordic.concepts}}
      <div>
        <div class="sg-item">
          {{>concept_tile conceptOrLabel=this}}
        </div>
      </div>
    {{/each}}
  </div>
</section>

<section class="sg-section">
  <h3>Concept colors</h3>
  <div class="sg-grid">
    {{#each color-concepts.conceptColors}}
      <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">
  <h3>Label logos large</h3>
  <div class="sg-grid">
    {{#each nordic-labels.labels}}
      <div class="sg-item">
        {{>label_logo name=name}}
      </div>
    {{/each}}
  </div>
</section>

<section class="sg-section">
  <h3>Logo in app symbol</h3>
  <p>Using icon font for this</p>
  {{>icon_mobile_app}}
</section>