You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
462 lines
25 KiB
462 lines
25 KiB
{{ define "main" }}
|
|
<style>
|
|
|
|
</style>
|
|
<div class="al-body-container">
|
|
<section class="al-page-index">
|
|
<div class="al-index-branding-container">
|
|
<div class="container al-py-lg">
|
|
<div class="branding" >
|
|
<h1 class="pb-2 text-center">AlmaLinux Branding</h1>
|
|
<p class="al-wysiwyg p">
|
|
These are the official brand guidelines of the AlmaLinux OS brand and assets. We want to make it easy for anyone to integrate AlmaLinux OS in all media formats while respecting our brand and legal/licensing restrictions.
|
|
<br><br>You can find and download full brandbook and more logo & icon options in the AlmaLinux OS <a href="https://github.com/AlmaLinux/almalinux.org/tree/master/static/branding">GitHub repository</a>.
|
|
</p>
|
|
<small class="al-wysiwyg p"><b>
|
|
Note that by using these resources, you accept our Terms of Service.
|
|
Usage of these resources may also be covered by the AlmaLinux OS End User Agreement and our Privacy Policy.
|
|
</b>
|
|
</small>
|
|
</div>
|
|
|
|
<div class="al-index-backed-by al-py-lg" >
|
|
<h2 class="pb-2 text-center border-bottom" class="border-bottom">AlmaLinux OS Logo</h2>
|
|
<div class="al-article-content pb-3 al-wysiwyg" class="al-article-content">
|
|
<section>
|
|
<p>
|
|
We are very proud of our logo, and we require that you follow these guidelines to ensure it always looks its
|
|
best.
|
|
<ul>
|
|
<li>The AlmaLinux OS Logo should be used mostly with the Science Blue and Atlantis colors.</li>
|
|
<li>The negative AlmaLinux OS Logo can be used on dark image backgrounds with high contrast between them.</li>
|
|
<li>The AlmaLinux OS Logo has a neat proportion of 1:5.2 Ratio width. These proportions were chosen carefully and
|
|
they are not to be changed.</li>
|
|
<li>The AlmaLinux OS Logo should never be smaller than 160px in digital or 45mm in print.</li>
|
|
<li>It is important that the appearance of the logo remains consistent. The logo should not be misiterpreted, modified, or added to. No attemp should be made to alter the logo in any way. Its orientation, color and composition should remain as indicated and there are no execptions.</li>
|
|
</ul>
|
|
</p>
|
|
<div class="group-logo" class="group-logo">
|
|
<div class="branding-logo" class="branding-logo">
|
|
<img loading="lazy" src="/branding/Almalinux-logo-v2.svg" alt="AlmaLinux logo" class="almalinux-logo" class="almalinux-logo">
|
|
<a href="https://github.com/AlmaLinux/almalinux.org/blob/master/static/branding/Almalinux-logo-v2.svg" style="margin-top: 10px;">Download SVG</a>
|
|
</div>
|
|
<div div class="branding-logo" class="branding-logo">
|
|
<img loading="lazy" src="/branding/Almalinux-logo-white-v2.png" alt="AlmaLinux logo" class="almalinux-logo" class="almalinux-logo">
|
|
<a href="https://github.com/AlmaLinux/almalinux.org/blob/master/static/branding/Almalinux-logo-white-v2.png" style="margin-top: 10px;">Download SVG</a>
|
|
</div>
|
|
</div>
|
|
<div class="group-logo" class="group-logo">
|
|
<div class="branding-logo" class="branding-logo">
|
|
<img loading="lazy" src="/branding/almalinux_logo_square.png" alt="AlmaLinux logo" class="almalinux-logo" style="width: 45%; height: 100%;">
|
|
<a href="" style="margin-top: 10px;">Download SVG</a>
|
|
</div>
|
|
<div class="branding-logo" class="branding-logo">
|
|
<img loading="lazy" src="/branding/Almalinux-logo-v2-4.png" alt="AlmaLinux logo" class="almalinux-logo" style="width: 45%; height: 100%;">
|
|
<a href="" style="margin-top: 10px;">Download SVG</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<div class="al-index-backed-by al-py-lg" >
|
|
<h2 class="pb-2 text-center border-bottom" class="border-bottom">AlmaLinux OS Icon</h2>
|
|
<div class="al-article-content pb-3 al-wysiwyg" class="al-article-content">
|
|
<section>
|
|
<ul>
|
|
<li>The AlmaLinux OS icon should be used as the official Favicon only in Science Blue.</li>
|
|
<li>The negative icon should be used for social as user/company image such as Whatsapp, Facebook, Linkendln, etc.</li>
|
|
<li>Monochrome version icon should be used on documents that are printed in black & white.</li>
|
|
<li>The AlmaLinux OS icon should never be smaller than 22px in digital or 6.3mm in print.</li>
|
|
</ul>
|
|
<div class="group-icon" class="group-icon">
|
|
<div class="branding-icon" class="branding-icon">
|
|
<img loading="lazy" src="/branding/AlmaLinux Icon.svg" alt="AlmaLinux logo" class="almalinux-logo" class="almalinux-logo">
|
|
<a href="https://github.com/AlmaLinux/almalinux.org/blob/master/static/branding/AlmaLinux%20Icon.svg" style="margin-top: 10px;">Download SVG</a>
|
|
</div>
|
|
<div class="branding-icon" class="branding-icon">
|
|
<img loading="lazy" src="/branding/AlmaLinux Icon Circle.svg" alt="AlmaLinux logo" class="almalinux-logo" class="almalinux-logo">
|
|
<a href="https://github.com/AlmaLinux/almalinux.org/blob/master/static/branding/AlmaLinux%20Icon%20Circle.svg" style="margin-top: 10px;">Download SVG</a>
|
|
</div>
|
|
<div class="branding-icon" class="branding-icon">
|
|
<img loading="lazy" src="/branding/icon-bw.svg" alt="AlmaLinux logo" class="almalinux-logo" class="almalinux-logo">
|
|
<a href="https://github.com/AlmaLinux/almalinux.org/blob/master/static/branding/icon-bw.svg" style="margin-top: 10px;">Download SVG</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="almalinux-color-container" >
|
|
<h2 class="pb-2 text-center border-bottom" class="border-bottom">AlmaLinux OS Color Palette
|
|
</h2>
|
|
<div class="al-article-content pb-3 al-wysiwyg" class="al-article-content">
|
|
<section>
|
|
<p>
|
|
The colors selected for the AlmaLinux OS signature reflect the company's values. The colors have been
|
|
specifically chosen to represent the brand and should not be altered under any circumstance.
|
|
</p>
|
|
<div class="color-palette-container" class="group-icon">
|
|
<div class="color-palette-column" class="color-palette-column">
|
|
<h4 style="margin-top: -5px;">Science Blue</h4>
|
|
<div class="science-blue-container"
|
|
style="display: flex; flex-direction: column; padding: 5px; background-color: white;">
|
|
<div class="science-blue-item"
|
|
style="display: flex; align-items: center; justify-content: space-around; background-color: #004bbc; margin-bottom: 5px; height: 15%">
|
|
<div class="science-blue-text" style="padding: 10px; text-align: center;">
|
|
<span>
|
|
#004BBC
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="science-blue-item"
|
|
style="display: flex; align-items: center; justify-content: space-around; background-color: #0069DA; margin-bottom: 5px; height: 55%;">
|
|
<div class="science-blue-text" style="padding: 10px; text-align: center;">
|
|
<span>
|
|
#0069DA
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="science-blue-item"
|
|
style="display: flex; align-items: center; justify-content: space-around; background-color: #1e87f8; margin-bottom: 5px; height: 15%">
|
|
<div class="science-blue-text" style="padding: 10px; text-align: center;">
|
|
<span>
|
|
#1E87F8
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="science-blue-item"
|
|
style="display: flex; align-items: center; justify-content: space-around; background-color: #2891ff; margin-bottom: 5px; height: 15%">
|
|
<div class="science-blue-text" style="padding: 10px; text-align: center;">
|
|
<span>
|
|
#2891FF
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="color-palette-text">
|
|
<p>
|
|
<b>Hex</b> #0069DA<br>
|
|
<b>RGB</b> 0 105 218<br>
|
|
<b>CMYK</b> 100 52 0 15<br>
|
|
<b>Pantone</b> 2725<br>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-palette-column" class="color-palette-column">
|
|
<h4 style="margin-top: -5px;">Atlantis</h4>
|
|
<div class="atlantis-container"
|
|
style="display: flex; flex-direction: column; padding: 5px; background-color: white;">
|
|
<div class="atlantis-item"
|
|
style="display: flex; align-items: center; justify-content: space-around; background-color: #68bc11; margin-bottom: 5px; height: 15%">
|
|
<div class="atlantis-text" style="padding: 10px; text-align: center; color: #082336;">
|
|
<span>
|
|
#68BC11
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="atlantis-item"
|
|
style="display: flex; align-items: center; justify-content: space-around; background-color: #86da2f; margin-bottom: 5px; height: 55%;">
|
|
<div class="atlantis-text" style="padding: 10px; text-align: center; color: #082336;">
|
|
<span>
|
|
#86DA2F
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="atlantis-item"
|
|
style="display: flex; align-items: center; justify-content: space-around; background-color: #a4f84d; margin-bottom: 5px; height: 15%">
|
|
<div class="atlantis-text" style="padding: 10px; text-align: center; color: #082336;">
|
|
<span>
|
|
#A4F84D
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="atlantis-item"
|
|
style="display: flex; align-items: center; justify-content: space-around; background-color: #aeff57; margin-bottom: 5px; height: 15%">
|
|
<div class="atlantis-text" style="padding: 10px; text-align: center; color: #082336;">
|
|
<span>
|
|
#AEFF57
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="color-palette-text">
|
|
<p>
|
|
<b>Hex</b> #86DA2F<br>
|
|
<b>RGB</b> 134 218 47<br>
|
|
<b>CMYK</b> 39 0 78 15<br>
|
|
<b>Pantone</b> 802<br>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-palette-column" class="color-palette-column">
|
|
<h4 style="margin-top: -5px;">Candelight</h4>
|
|
<div class="candlelight-container"
|
|
style="display: flex; flex-direction: column; padding: 5px; background-color: white;">
|
|
<div class="candlelight-item"
|
|
style="display: flex; align-items: center; justify-content: space-around; background-color: #e1ad00; margin-bottom: 5px; height: 15%">
|
|
<div class="candlelight-text" style="padding: 10px; text-align: center; color: #082336;">
|
|
<span>
|
|
#E1AD00
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="candlelight-item"
|
|
style="display: flex; align-items: center; justify-content: space-around; background-color: #ffcb11; margin-bottom: 5px; height: 55%;">
|
|
<div class="candlelight-text" style="padding: 10px; text-align: center; color: #082336;">
|
|
<span>
|
|
#FFCB11
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="candlelight-item"
|
|
style="display: flex; align-items: center; justify-content: space-around; background-color: #ffe930; margin-bottom: 5px; height: 15%">
|
|
<div class="candlelight-text" style="padding: 10px; text-align: center; color: #082336;">
|
|
<span>
|
|
#FFE930
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="candlelight-item"
|
|
style="display: flex; align-items: center; justify-content: space-around; background-color: #fff33a; margin-bottom: 5px; height: 15%">
|
|
<div class="candlelight-text" style="padding: 10px; text-align: center; color: #082336;">
|
|
<span>
|
|
#FFF33A
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="color-palette-text">
|
|
<p>
|
|
<b>Hex</b> #FFCB12<br>
|
|
<b>RGB</b> 255 203 18<br>
|
|
<b>CMYK</b> 0 20 93 0<br>
|
|
<b>Pantone</b> 803<br>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-palette-column" class="color-palette-column">
|
|
<h4 style="margin-top: -5px;">Black Pearl</h4>
|
|
<div class="black-pearl-container"
|
|
style="display: flex; flex-direction: column; padding: 5px; background-color: white;">
|
|
<div class="black-pearl-item"
|
|
style="display: flex; align-items: center; justify-content: space-around; background-color: #000518; margin-bottom: 5px; height: 15%">
|
|
<div class="black-pearl-text" style="padding: 10px; text-align: center;">
|
|
<span>
|
|
#000518
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="black-pearl-item"
|
|
style="display: flex; align-items: center; justify-content: space-around; background-color: #082336; margin-bottom: 5px; height: 55%;">
|
|
<div class="black-pearl-text" style="padding: 10px; text-align: center;">
|
|
<span>
|
|
#082336
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="black-pearl-item"
|
|
style="display: flex; align-items: center; justify-content: space-around; background-color: #264154; margin-bottom: 5px; height: 15%">
|
|
<div class="black-pearl-text" style="padding: 10px; text-align: center;">
|
|
<span>
|
|
#264154
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="black-pearl-item"
|
|
style="display: flex; align-items: center; justify-content: space-around; background-color: #304B5E; margin-bottom: 5px; height: 15%">
|
|
<div class="black-pearl-text" style="padding: 10px; text-align: center;">
|
|
<span>
|
|
#304B5E
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="color-palette-text">
|
|
<p>
|
|
<b>Hex</b> #082336<br>
|
|
<b>RGB</b> 8 35 54<br>
|
|
<b>CMYK</b> 85 35 0 79<br>
|
|
<b>Pantone</b> Neutral Black<br>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-palette-column" class="color-palette-column">
|
|
<h4 style="margin-top: -5px;">Soft Peach</h4>
|
|
<div class="soft-peach-container"
|
|
style="display: flex; flex-direction: column; padding: 5px; background-color: white;;">
|
|
<div class="soft-peach-item"
|
|
style="display: flex; align-items: center; justify-content: space-around; background-color: #dcd7d7; margin-bottom: 5px; height: 15%">
|
|
<div class="soft-peach-text" style="padding: 10px; text-align: center; color: #082336;">
|
|
<span>
|
|
#DCD7D7
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="soft-peach-item"
|
|
style="display: flex; align-items: center; justify-content: space-around; background-color: #faf5f5; margin-bottom: 5px; height: 55%;">
|
|
<div class="soft-peach-text" style="padding: 10px; text-align: center; color: #082336;">
|
|
<span>
|
|
#FAF5F5
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="soft-peach-item"
|
|
style="display: flex; align-items: center; justify-content: space-around; background-color: #ffffff; margin-bottom: 5px; height: 15%">
|
|
<div class="soft-peach-text" style="padding: 10px; text-align: center; color: #082336;">
|
|
<span>
|
|
#FFFFFF
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="soft-peach-item"
|
|
style="display: flex; align-items: center; justify-content: space-around; background-color: #ffffff; margin-bottom: 5px; height: 15%">
|
|
<div class="soft-peach-text" style="padding: 10px; text-align: center; color: #082336;">
|
|
<span>
|
|
#FFFFFF
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="color-palette-text">
|
|
<p>
|
|
<b>Hex</b> #FAF5F5<br>
|
|
<b>RGB</b> 250 245 245<br>
|
|
<b>CMYK</b> 0 2 2 2<br>
|
|
<b>Pantone</b> 7604<br>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-palette-column" class="color-palette-column">
|
|
<h4 style="margin-top: -5px;">Sunburnt Cyclops</h4>
|
|
<div class="sunburnt-cyclops-container"
|
|
style="display: flex; flex-direction: column; padding: 5px; background-color: white;">
|
|
<div class="sunburnt-cyclops-item"
|
|
style="display: flex; align-items: center; justify-content: space-around; background-color: #e1282b; margin-bottom: 5px; height: 15%">
|
|
<div class="sunburnt-cyclops-text" style="padding: 10px; text-align: center;">
|
|
<span>
|
|
#E1282B
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="sunburnt-cyclops-item"
|
|
style="display: flex; align-items: center; justify-content: space-around; background-color: #FF4649; margin-bottom: 5px; height: 55%;">
|
|
<div class="sunburnt-cyclops-text" style="padding: 10px; text-align: center;">
|
|
<span>
|
|
#FF4649
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="sunburnt-cyclops-item"
|
|
style="display: flex; align-items: center; justify-content: space-around; background-color: #FF6467; margin-bottom: 5px; height: 15%">
|
|
<div class="sunburnt-cyclops-text" style="padding: 10px; text-align: center; color: #082336;">
|
|
<span>
|
|
#FF6467
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="sunburnt-cyclops-item"
|
|
style="display: flex; align-items: center; justify-content: space-around; background-color: #ff6e71; margin-bottom: 5px; height: 15%">
|
|
<div class="sunburnt-cyclops-text" style="padding: 10px; text-align: center; color: #082336;">
|
|
<span>
|
|
#FF6E71
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="color-palette-text">
|
|
<p>
|
|
<b>Hex</b> #FF4649<br>
|
|
<b>RGB</b> 255 70 73<br>
|
|
<b>CMYK</b> 0 73 71 0<br>
|
|
<b>Pantone</b> Warm Red<br>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="almalinux-font-container" >
|
|
<h2 class="pb-2 text-center border-bottom" class="border-bottom">AlmaLinux OS Fonts</h2>
|
|
<div class="al-article-content pb-3 al-wysiwyg" class="al-article-content">
|
|
<section>
|
|
<p>
|
|
The primary font is <a href="https://fonts.google.com/specimen/Montserrat">Montserrat</a> and it has weight: Light, Medium, and SemiBold.
|
|
</p>
|
|
<div class="group-font" class="group-icon">
|
|
<div class="font-branding" class="font-branding">
|
|
<div class="font-item" class="font-item">
|
|
<span style="letter-spacing: 0.80px; font-size: xxx-large; font-weight: 300;">
|
|
Aa
|
|
</span>
|
|
<span style="letter-spacing: 0.80px; font-weight: 300;">
|
|
AlmaLinux OS
|
|
</span>
|
|
</div>
|
|
<div class="font-line" class="font-line"></div>
|
|
<div class="font-item" style="display: flex; flex-direction: column; padding-left: 15px;">
|
|
<span style="letter-spacing: 0.80px; font-weight: 300;">
|
|
<i>Light</i><br>
|
|
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
|
abcdefghiklmnopqrstuvwxyz<br>
|
|
1234567890
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="font-branding" class="font-branding">
|
|
<div class="font-item" class="font-item">
|
|
<span style="letter-spacing: 0.80px; font-size: xxx-large;">
|
|
Aa
|
|
</span>
|
|
<span style="letter-spacing: 0.80px;">
|
|
AlmaLinux OS
|
|
</span>
|
|
</div>
|
|
<div class="font-line" class="font-line"></div>
|
|
<div class="font-item" style="display: flex; flex-direction: column; padding-left: 15px;">
|
|
<span style="letter-spacing: 0.80px;">
|
|
<i>Medium</i><br>
|
|
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
|
abcdefghiklmnopqrstuvwxyz<br>
|
|
1234567890
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="font-branding" class="font-branding">
|
|
<div class="font-item" class="font-item">
|
|
<span style="letter-spacing: 0.80px; font-size: xxx-large; font-weight: 600;">
|
|
Aa
|
|
</span>
|
|
<span style="letter-spacing: 0.80px; font-weight: 600;">
|
|
AlmaLinux OS
|
|
</span>
|
|
</div>
|
|
<div class="font-line" class="font-line"></div>
|
|
<div class="font-item" style="display: flex; flex-direction: column; padding-left: 15px;">
|
|
<span style="letter-spacing: 0.80px; font-weight: 600;">
|
|
<i>SemiBold</i><br>
|
|
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
|
abcdefghiklmnopqrstuvwxyz<br>
|
|
1234567890
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
{{ end }}
|
|
|