<div class="sg-colors">
<p class="sg-colors__family-name">Night</p>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #0f2f4d">
<div class="color-info-box">
<p class="color-name">night-120</p>
<p class="color-hex">#0f2f4d</p>
<p style="font-size: 24px; color: #0f2f4d">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-night-120</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-night-120</code>
</div>
</div>
</div>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #12385d">
<div class="color-info-box">
<p class="color-name">night-100</p>
<p class="color-hex">#12385d</p>
<p style="font-size: 24px; color: #12385d">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-night-100</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-night-100</code>
</div>
</div>
</div>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #41607d">
<div class="color-info-box">
<p class="color-name">night-80</p>
<p class="color-hex">#41607d</p>
<p style="font-size: 24px; color: #41607d">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-night-80</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-night-80</code>
</div>
</div>
</div>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #71889e">
<div class="color-info-box">
<p class="color-name">night-60</p>
<p class="color-hex">#71889e</p>
<p style="font-size: 24px; color: #71889e">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-night-60</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-night-60</code>
</div>
</div>
</div>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #a0afbe">
<div class="color-info-box">
<p class="color-name">night-40</p>
<p class="color-hex">#a0afbe</p>
<p style="font-size: 24px; color: #a0afbe">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-night-40</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-night-40</code>
</div>
</div>
</div>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #d0d7df">
<div class="color-info-box">
<p class="color-name">night-20</p>
<p class="color-hex">#d0d7df</p>
<p style="font-size: 24px; color: #d0d7df">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-night-20</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-night-20</code>
</div>
</div>
</div>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #e7ebef">
<div class="color-info-box">
<p class="color-name">night-10</p>
<p class="color-hex">#e7ebef</p>
<p style="font-size: 24px; color: #e7ebef">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-night-10</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-night-10</code>
</div>
</div>
</div>
</div>
<div class="sg-colors">
<p class="sg-colors__family-name">Sky</p>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #2b72b1">
<div class="color-info-box">
<p class="color-name">sky-120</p>
<p class="color-hex">#2b72b1</p>
<p style="font-size: 24px; color: #2b72b1">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-sky-120</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-sky-120</code>
</div>
</div>
</div>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #548dc0">
<div class="color-info-box">
<p class="color-name">sky-100</p>
<p class="color-hex">#548dc0</p>
<p style="font-size: 24px; color: #548dc0">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-sky-100</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-sky-100</code>
</div>
</div>
</div>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #73a2cb">
<div class="color-info-box">
<p class="color-name">sky-80</p>
<p class="color-hex">#73a2cb</p>
<p style="font-size: 24px; color: #73a2cb">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-sky-80</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-sky-80</code>
</div>
</div>
</div>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #a3c1db">
<div class="color-info-box">
<p class="color-name">sky-60</p>
<p class="color-hex">#a3c1db</p>
<p style="font-size: 24px; color: #a3c1db">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-sky-60</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-sky-60</code>
</div>
</div>
</div>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #b3cbe1">
<div class="color-info-box">
<p class="color-name">sky-40</p>
<p class="color-hex">#b3cbe1</p>
<p style="font-size: 24px; color: #b3cbe1">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-sky-40</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-sky-40</code>
</div>
</div>
</div>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #d3e0eb">
<div class="color-info-box">
<p class="color-name">sky-20</p>
<p class="color-hex">#d3e0eb</p>
<p style="font-size: 24px; color: #d3e0eb">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-sky-20</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-sky-20</code>
</div>
</div>
</div>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #e9eff5">
<div class="color-info-box">
<p class="color-name">sky-10</p>
<p class="color-hex">#e9eff5</p>
<p style="font-size: 24px; color: #e9eff5">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-sky-10</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-sky-10</code>
</div>
</div>
</div>
</div>
<div class="sg-colors">
<p class="sg-colors__family-name">Sun</p>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #fab72d">
<div class="color-info-box">
<p class="color-name">sun-120</p>
<p class="color-hex">#fab72d</p>
<p style="font-size: 24px; color: #fab72d">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-sun-120</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-sun-120</code>
</div>
</div>
</div>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #ffcd00">
<div class="color-info-box">
<p class="color-name">sun-100</p>
<p class="color-hex">#ffcd00</p>
<p style="font-size: 24px; color: #ffcd00">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-sun-100</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-sun-100</code>
</div>
</div>
</div>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #ffd733">
<div class="color-info-box">
<p class="color-name">sun-80</p>
<p class="color-hex">#ffd733</p>
<p style="font-size: 24px; color: #ffd733">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-sun-80</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-sun-80</code>
</div>
</div>
</div>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #ffe166">
<div class="color-info-box">
<p class="color-name">sun-60</p>
<p class="color-hex">#ffe166</p>
<p style="font-size: 24px; color: #ffe166">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-sun-60</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-sun-60</code>
</div>
</div>
</div>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #ffeb99">
<div class="color-info-box">
<p class="color-name">sun-40</p>
<p class="color-hex">#ffeb99</p>
<p style="font-size: 24px; color: #ffeb99">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-sun-40</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-sun-40</code>
</div>
</div>
</div>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #fff5cc">
<div class="color-info-box">
<p class="color-name">sun-20</p>
<p class="color-hex">#fff5cc</p>
<p style="font-size: 24px; color: #fff5cc">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-sun-20</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-sun-20</code>
</div>
</div>
</div>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #fffae5">
<div class="color-info-box">
<p class="color-name">sun-10</p>
<p class="color-hex">#fffae5</p>
<p style="font-size: 24px; color: #fffae5">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-sun-10</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-sun-10</code>
</div>
</div>
</div>
</div>
<div class="sg-colors">
<p class="sg-colors__family-name">Secondary</p>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #3d4147">
<div class="color-info-box">
<p class="color-name">text-100</p>
<p class="color-hex">#3d4147</p>
<p style="font-size: 24px; color: #3d4147">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-text-100</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-text-100</code>
</div>
</div>
</div>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #f3f5f8">
<div class="color-info-box">
<p class="color-name">page-100</p>
<p class="color-hex">#f3f5f8</p>
<p style="font-size: 24px; color: #f3f5f8">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-page-100</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-page-100</code>
</div>
</div>
</div>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #f9fbfc">
<div class="color-info-box">
<p class="color-name">soft-100</p>
<p class="color-hex">#f9fbfc</p>
<p style="font-size: 24px; color: #f9fbfc">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-soft-100</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-soft-100</code>
</div>
</div>
</div>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #ffffff">
<div class="color-info-box">
<p class="color-name">basic-white</p>
<p class="color-hex">#ffffff</p>
<p style="font-size: 24px; color: #ffffff">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-basic-white-100</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-basic-white-100</code>
</div>
</div>
</div>
</div>
<div class="sg-colors">
<p class="sg-colors__family-name">Aviation</p>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #12385d">
<div class="color-info-box">
<p class="color-name">imbarchi</p>
<p class="color-hex">#12385d</p>
<p style="font-size: 24px; color: #12385d">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-imbarchi</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-imbarchi</code>
</div>
</div>
</div>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #165f33">
<div class="color-info-box">
<p class="color-name">arrivi</p>
<p class="color-hex">#165f33</p>
<p style="font-size: 24px; color: #165f33">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-arrivi</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-arrivi</code>
</div>
</div>
</div>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #a9262a">
<div class="color-info-box">
<p class="color-name">check-in</p>
<p class="color-hex">#a9262a</p>
<p style="font-size: 24px; color: #a9262a">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-check-in</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-check-in</code>
</div>
</div>
</div>
</div>
<div class="sg-colors">
<p class="sg-colors__family-name">Parking</p>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #194f90">
<div class="color-info-box">
<p class="color-name">general</p>
<p class="color-hex">#194f90</p>
<p style="font-size: 24px; color: #194f90">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-general</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-general</code>
</div>
</div>
</div>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #0075c4">
<div class="color-info-box">
<p class="color-name">p1-p2</p>
<p class="color-hex">#0075c4</p>
<p style="font-size: 24px; color: #0075c4">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-p1-p2</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-p1-p2</code>
</div>
</div>
</div>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #0075c4">
<div class="color-info-box">
<p class="color-name">p1</p>
<p class="color-hex">#0075c4</p>
<p style="font-size: 24px; color: #0075c4">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-p1</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-p1</code>
</div>
</div>
</div>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #00a6aa">
<div class="color-info-box">
<p class="color-name">p2</p>
<p class="color-hex">#00a6aa</p>
<p style="font-size: 24px; color: #00a6aa">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-p2</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-p2</code>
</div>
</div>
</div>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #ffa300">
<div class="color-info-box">
<p class="color-name">p3</p>
<p class="color-hex">#ffa300</p>
<p style="font-size: 24px; color: #ffa300">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-p3</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-p3</code>
</div>
</div>
</div>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #a2ce1b">
<div class="color-info-box">
<p class="color-name">p4</p>
<p class="color-hex">#a2ce1b</p>
<p style="font-size: 24px; color: #a2ce1b">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-p4</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-p4</code>
</div>
</div>
</div>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #9296ee">
<div class="color-info-box">
<p class="color-name">p5</p>
<p class="color-hex">#9296ee</p>
<p style="font-size: 24px; color: #9296ee">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-p5</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-p5</code>
</div>
</div>
</div>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #51c3f1">
<div class="color-info-box">
<p class="color-name">p6</p>
<p class="color-hex">#51c3f1</p>
<p style="font-size: 24px; color: #51c3f1">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-p6</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-p6</code>
</div>
</div>
</div>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #ed0016">
<div class="color-info-box">
<p class="color-name">p-express</p>
<p class="color-hex">#ed0016</p>
<p style="font-size: 24px; color: #ed0016">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-p-express</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-p-express</code>
</div>
</div>
</div>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #596066">
<div class="color-info-box">
<p class="color-name">premium</p>
<p class="color-hex">#596066</p>
<p style="font-size: 24px; color: #596066">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-premium</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-premium</code>
</div>
</div>
</div>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #b0009b">
<div class="color-info-box">
<p class="color-name">waitzone</p>
<p class="color-hex">#b0009b</p>
<p style="font-size: 24px; color: #b0009b">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-waitzone</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-premwaitzoneium</code>
</div>
</div>
</div>
</div>
<div class="sg-colors">
<p class="sg-colors__family-name">Status</p>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #3ba671">
<div class="color-info-box">
<p class="color-name">positive</p>
<p class="color-hex">#3ba671</p>
<p style="font-size: 24px; color: #3ba671">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-positive</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-positive</code>
</div>
</div>
</div>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #d62c40">
<div class="color-info-box">
<p class="color-name">negative</p>
<p class="color-hex">#d62c40</p>
<p style="font-size: 24px; color: #d62c40">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-negative</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-negative</code>
</div>
</div>
</div>
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: #fb8001">
<div class="color-info-box">
<p class="color-name">warning</p>
<p class="color-hex">#fb8001</p>
<p style="font-size: 24px; color: #fb8001">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
<div class="classes">
<span class="class-desc">Text color:</span>
<code class="class-name">u-color-warning</code>
</div>
<div class="classes">
<span class="class-desc">Background color:</span>
<code class="class-name">u-bg-color-warning</code>
</div>
</div>
</div>
</div>
{{!-- NIGHT --}}
<div class="sg-colors">
<p class="sg-colors__family-name">Night</p>
{{#each night }}
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: {{ this.code }}">
<div class="color-info-box">
<p class="color-name">{{ this.value }}</p>
<p class="color-hex">{{ this.code }}</p>
<p style="font-size: 24px; color: {{ this.code }}">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
{{#each this.classes }}
<div class="classes">
<span class="class-desc">{{ this.desc }}:</span>
<code class="class-name">{{ this.name }}</code>
</div>
{{/each}}
</div>
</div>
{{/each}}
</div>
{{!-- SKY --}}
<div class="sg-colors">
<p class="sg-colors__family-name">Sky</p>
{{#each sky }}
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: {{ this.code }}">
<div class="color-info-box">
<p class="color-name">{{ this.value }}</p>
<p class="color-hex">{{ this.code }}</p>
<p style="font-size: 24px; color: {{ this.code }}">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
{{#each this.classes }}
<div class="classes">
<span class="class-desc">{{ this.desc }}:</span>
<code class="class-name">{{ this.name }}</code>
</div>
{{/each}}
</div>
</div>
{{/each}}
</div>
{{!-- SUN --}}
<div class="sg-colors">
<p class="sg-colors__family-name">Sun</p>
{{#each sun }}
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: {{ this.code }}">
<div class="color-info-box">
<p class="color-name">{{ this.value }}</p>
<p class="color-hex">{{ this.code }}</p>
<p style="font-size: 24px; color: {{ this.code }}">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
{{#each this.classes }}
<div class="classes">
<span class="class-desc">{{ this.desc }}:</span>
<code class="class-name">{{ this.name }}</code>
</div>
{{/each}}
</div>
</div>
{{/each}}
</div>
{{!-- TEXT --}}
<div class="sg-colors">
<p class="sg-colors__family-name">Secondary</p>
{{#each text }}
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: {{ this.code }}">
<div class="color-info-box">
<p class="color-name">{{ this.value }}</p>
<p class="color-hex">{{ this.code }}</p>
<p style="font-size: 24px; color: {{ this.code }}">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
{{#each this.classes }}
<div class="classes">
<span class="class-desc">{{ this.desc }}:</span>
<code class="class-name">{{ this.name }}</code>
</div>
{{/each}}
</div>
</div>
{{/each}}
{{#each page }}
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: {{ this.code }}">
<div class="color-info-box">
<p class="color-name">{{ this.value }}</p>
<p class="color-hex">{{ this.code }}</p>
<p style="font-size: 24px; color: {{ this.code }}">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
{{#each this.classes }}
<div class="classes">
<span class="class-desc">{{ this.desc }}:</span>
<code class="class-name">{{ this.name }}</code>
</div>
{{/each}}
</div>
</div>
{{/each}}
{{#each soft }}
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: {{ this.code }}">
<div class="color-info-box">
<p class="color-name">{{ this.value }}</p>
<p class="color-hex">{{ this.code }}</p>
<p style="font-size: 24px; color: {{ this.code }}">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
{{#each this.classes }}
<div class="classes">
<span class="class-desc">{{ this.desc }}:</span>
<code class="class-name">{{ this.name }}</code>
</div>
{{/each}}
</div>
</div>
{{/each}}
{{#each basic-white }}
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: {{ this.code }}">
<div class="color-info-box">
<p class="color-name">{{ this.value }}</p>
<p class="color-hex">{{ this.code }}</p>
<p style="font-size: 24px; color: {{ this.code }}">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
{{#each this.classes }}
<div class="classes">
<span class="class-desc">{{ this.desc }}:</span>
<code class="class-name">{{ this.name }}</code>
</div>
{{/each}}
</div>
</div>
{{/each}}
</div>
{{!-- AVIATION --}}
<div class="sg-colors">
<p class="sg-colors__family-name">Aviation</p>
{{#each aviation }}
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: {{ this.code }}">
<div class="color-info-box">
<p class="color-name">{{ this.value }}</p>
<p class="color-hex">{{ this.code }}</p>
<p style="font-size: 24px; color: {{ this.code }}">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
{{#each this.classes }}
<div class="classes">
<span class="class-desc">{{ this.desc }}:</span>
<code class="class-name">{{ this.name }}</code>
</div>
{{/each}}
</div>
</div>
{{/each}}
</div>
{{!-- PARKING --}}
<div class="sg-colors">
<p class="sg-colors__family-name">Parking</p>
{{#each parking }}
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: {{ this.code }}">
<div class="color-info-box">
<p class="color-name">{{ this.value }}</p>
<p class="color-hex">{{ this.code }}</p>
<p style="font-size: 24px; color: {{ this.code }}">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
{{#each this.classes }}
<div class="classes">
<span class="class-desc">{{ this.desc }}:</span>
<code class="class-name">{{ this.name }}</code>
</div>
{{/each}}
</div>
</div>
{{/each}}
</div>
{{!-- STATUS --}}
<div class="sg-colors">
<p class="sg-colors__family-name">Status</p>
{{#each status }}
<div class="sg-colors__item">
<div class="sg-colors__itemShape">
<div class="sg-color__pattern" style="background-color: {{ this.code }}">
<div class="color-info-box">
<p class="color-name">{{ this.value }}</p>
<p class="color-hex">{{ this.code }}</p>
<p style="font-size: 24px; color: {{ this.code }}">Aa</p>
</div>
</div>
</div>
<div class="sg-colors__itemInfos">
{{#each this.classes }}
<div class="classes">
<span class="class-desc">{{ this.desc }}:</span>
<code class="class-name">{{ this.name }}</code>
</div>
{{/each}}
</div>
</div>
{{/each}}
</div>
{
"night": [
{
"value": "night-120",
"code": "#0f2f4d",
"classes": [
{
"desc": "Text color",
"name": "u-color-night-120"
},
{
"desc": "Background color",
"name": "u-bg-color-night-120"
}
]
},
{
"value": "night-100",
"code": "#12385d",
"classes": [
{
"desc": "Text color",
"name": "u-color-night-100"
},
{
"desc": "Background color",
"name": "u-bg-color-night-100"
}
]
},
{
"value": "night-80",
"code": "#41607d",
"classes": [
{
"desc": "Text color",
"name": "u-color-night-80"
},
{
"desc": "Background color",
"name": "u-bg-color-night-80"
}
]
},
{
"value": "night-60",
"code": "#71889e",
"classes": [
{
"desc": "Text color",
"name": "u-color-night-60"
},
{
"desc": "Background color",
"name": "u-bg-color-night-60"
}
]
},
{
"value": "night-40",
"code": "#a0afbe",
"classes": [
{
"desc": "Text color",
"name": "u-color-night-40"
},
{
"desc": "Background color",
"name": "u-bg-color-night-40"
}
]
},
{
"value": "night-20",
"code": "#d0d7df",
"classes": [
{
"desc": "Text color",
"name": "u-color-night-20"
},
{
"desc": "Background color",
"name": "u-bg-color-night-20"
}
]
},
{
"value": "night-10",
"code": "#e7ebef",
"classes": [
{
"desc": "Text color",
"name": "u-color-night-10"
},
{
"desc": "Background color",
"name": "u-bg-color-night-10"
}
]
}
],
"sky": [
{
"value": "sky-120",
"code": "#2b72b1",
"classes": [
{
"desc": "Text color",
"name": "u-color-sky-120"
},
{
"desc": "Background color",
"name": "u-bg-color-sky-120"
}
]
},
{
"value": "sky-100",
"code": "#548dc0",
"classes": [
{
"desc": "Text color",
"name": "u-color-sky-100"
},
{
"desc": "Background color",
"name": "u-bg-color-sky-100"
}
]
},
{
"value": "sky-80",
"code": "#73a2cb",
"classes": [
{
"desc": "Text color",
"name": "u-color-sky-80"
},
{
"desc": "Background color",
"name": "u-bg-color-sky-80"
}
]
},
{
"value": "sky-60",
"code": "#a3c1db",
"classes": [
{
"desc": "Text color",
"name": "u-color-sky-60"
},
{
"desc": "Background color",
"name": "u-bg-color-sky-60"
}
]
},
{
"value": "sky-40",
"code": "#b3cbe1",
"classes": [
{
"desc": "Text color",
"name": "u-color-sky-40"
},
{
"desc": "Background color",
"name": "u-bg-color-sky-40"
}
]
},
{
"value": "sky-20",
"code": "#d3e0eb",
"classes": [
{
"desc": "Text color",
"name": "u-color-sky-20"
},
{
"desc": "Background color",
"name": "u-bg-color-sky-20"
}
]
},
{
"value": "sky-10",
"code": "#e9eff5",
"classes": [
{
"desc": "Text color",
"name": "u-color-sky-10"
},
{
"desc": "Background color",
"name": "u-bg-color-sky-10"
}
]
}
],
"sun": [
{
"value": "sun-120",
"code": "#fab72d",
"classes": [
{
"desc": "Text color",
"name": "u-color-sun-120"
},
{
"desc": "Background color",
"name": "u-bg-color-sun-120"
}
]
},
{
"value": "sun-100",
"code": "#ffcd00",
"classes": [
{
"desc": "Text color",
"name": "u-color-sun-100"
},
{
"desc": "Background color",
"name": "u-bg-color-sun-100"
}
]
},
{
"value": "sun-80",
"code": "#ffd733",
"classes": [
{
"desc": "Text color",
"name": "u-color-sun-80"
},
{
"desc": "Background color",
"name": "u-bg-color-sun-80"
}
]
},
{
"value": "sun-60",
"code": "#ffe166",
"classes": [
{
"desc": "Text color",
"name": "u-color-sun-60"
},
{
"desc": "Background color",
"name": "u-bg-color-sun-60"
}
]
},
{
"value": "sun-40",
"code": "#ffeb99",
"classes": [
{
"desc": "Text color",
"name": "u-color-sun-40"
},
{
"desc": "Background color",
"name": "u-bg-color-sun-40"
}
]
},
{
"value": "sun-20",
"code": "#fff5cc",
"classes": [
{
"desc": "Text color",
"name": "u-color-sun-20"
},
{
"desc": "Background color",
"name": "u-bg-color-sun-20"
}
]
},
{
"value": "sun-10",
"code": "#fffae5",
"classes": [
{
"desc": "Text color",
"name": "u-color-sun-10"
},
{
"desc": "Background color",
"name": "u-bg-color-sun-10"
}
]
}
],
"text": [
{
"value": "text-100",
"code": "#3d4147",
"classes": [
{
"desc": "Text color",
"name": "u-color-text-100"
},
{
"desc": "Background color",
"name": "u-bg-color-text-100"
}
]
}
],
"page": [
{
"value": "page-100",
"code": "#f3f5f8",
"classes": [
{
"desc": "Text color",
"name": "u-color-page-100"
},
{
"desc": "Background color",
"name": "u-bg-color-page-100"
}
]
}
],
"soft": [
{
"value": "soft-100",
"code": "#f9fbfc",
"classes": [
{
"desc": "Text color",
"name": "u-color-soft-100"
},
{
"desc": "Background color",
"name": "u-bg-color-soft-100"
}
]
}
],
"basic-white": [
{
"value": "basic-white",
"code": "#ffffff",
"classes": [
{
"desc": "Text color",
"name": "u-color-basic-white-100"
},
{
"desc": "Background color",
"name": "u-bg-color-basic-white-100"
}
]
}
],
"aviation": [
{
"value": "imbarchi",
"code": "#12385d",
"classes": [
{
"desc": "Text color",
"name": "u-color-imbarchi"
},
{
"desc": "Background color",
"name": "u-bg-color-imbarchi"
}
]
},
{
"value": "arrivi",
"code": "#165f33",
"classes": [
{
"desc": "Text color",
"name": "u-color-arrivi"
},
{
"desc": "Background color",
"name": "u-bg-color-arrivi"
}
]
},
{
"value": "check-in",
"code": "#a9262a",
"classes": [
{
"desc": "Text color",
"name": "u-color-check-in"
},
{
"desc": "Background color",
"name": "u-bg-color-check-in"
}
]
}
],
"parking": [
{
"value": "general",
"code": "#194f90",
"classes": [
{
"desc": "Text color",
"name": "u-color-general"
},
{
"desc": "Background color",
"name": "u-bg-color-general"
}
]
},
{
"value": "p1-p2",
"code": "#0075c4",
"classes": [
{
"desc": "Text color",
"name": "u-color-p1-p2"
},
{
"desc": "Background color",
"name": "u-bg-color-p1-p2"
}
]
},
{
"value": "p1",
"code": "#0075c4",
"classes": [
{
"desc": "Text color",
"name": "u-color-p1"
},
{
"desc": "Background color",
"name": "u-bg-color-p1"
}
]
},
{
"value": "p2",
"code": "#00a6aa",
"classes": [
{
"desc": "Text color",
"name": "u-color-p2"
},
{
"desc": "Background color",
"name": "u-bg-color-p2"
}
]
},
{
"value": "p3",
"code": "#ffa300",
"classes": [
{
"desc": "Text color",
"name": "u-color-p3"
},
{
"desc": "Background color",
"name": "u-bg-color-p3"
}
]
},
{
"value": "p4",
"code": "#a2ce1b",
"classes": [
{
"desc": "Text color",
"name": "u-color-p4"
},
{
"desc": "Background color",
"name": "u-bg-color-p4"
}
]
},
{
"value": "p5",
"code": "#9296ee",
"classes": [
{
"desc": "Text color",
"name": "u-color-p5"
},
{
"desc": "Background color",
"name": "u-bg-color-p5"
}
]
},
{
"value": "p6",
"code": "#51c3f1",
"classes": [
{
"desc": "Text color",
"name": "u-color-p6"
},
{
"desc": "Background color",
"name": "u-bg-color-p6"
}
]
},
{
"value": "p-express",
"code": "#ed0016",
"classes": [
{
"desc": "Text color",
"name": "u-color-p-express"
},
{
"desc": "Background color",
"name": "u-bg-color-p-express"
}
]
},
{
"value": "premium",
"code": "#596066",
"classes": [
{
"desc": "Text color",
"name": "u-color-premium"
},
{
"desc": "Background color",
"name": "u-bg-color-premium"
}
]
},
{
"value": "waitzone",
"code": "#b0009b",
"classes": [
{
"desc": "Text color",
"name": "u-color-waitzone"
},
{
"desc": "Background color",
"name": "u-bg-color-premwaitzoneium"
}
]
}
],
"status": [
{
"value": "positive",
"code": "#3ba671",
"classes": [
{
"desc": "Text color",
"name": "u-color-positive"
},
{
"desc": "Background color",
"name": "u-bg-color-positive"
}
]
},
{
"value": "negative",
"code": "#d62c40",
"classes": [
{
"desc": "Text color",
"name": "u-color-negative"
},
{
"desc": "Background color",
"name": "u-bg-color-negative"
}
]
},
{
"value": "warning",
"code": "#fb8001",
"classes": [
{
"desc": "Text color",
"name": "u-color-warning"
},
{
"desc": "Background color",
"name": "u-bg-color-warning"
}
]
}
]
}
No notes defined.