# Pill brand identity guidelines


## Logo
<br>
<div class="brand-guidelines">
<div class="logo-row">
<div class="logo-full">
<img src="/logos/pill_logo_white.png" alt="Pill Engine logo" class="logo-mark logo-mark-png" />
<img src="/logos/pill_logo.svg" alt="Pill Engine logo" class="logo-mark logo-mark-svg" />
</div>
<div class="logo-variants">
<figure class="logo-variant">
<div class="logo-frame">
<img src="/logos/pill_icon.svg" alt="Pill icon in square" class="logo-icon" />
</div>
<figcaption>Icon in square</figcaption>
</figure>
<figure class="logo-variant">
<div class="logo-frame logo-frame-circle">
<img src="/logos/pill_icon.svg" alt="Pill icon in circle" class="logo-icon" />
</div>
<figcaption>Icon in circle</figcaption>
</figure>
</div>
</div>
<br>
<br>
</div>

You can find all logo files [here](https://pillengine.org/logos/)

## Fonts
<br>
<div class="brand-guidelines">
<div class="font-entry">
<div class="font-name font-name-chillax">Logo</div>
<div class="font-details">
<p class="font-meta">Chillax Variable | weight 600, tracking -50%</p>
<div class="font-samples">
<p class="font-sample font-sample-logo">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p class="font-sample font-sample-logo">abcdefghijklmnopqrstuvwxyz</p>
<p class="font-sample font-sample-logo">0123456789-*#/;</p>
</div>
</div>
</div>
<div class="font-entry">
<div class="font-name font-name-outfit">Heading</div>
<div class="font-details">
<p class="font-meta">Outfit | weight 700</p>
<div class="font-samples">
<p class="font-sample font-sample-heading">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p class="font-sample font-sample-heading">abcdefghijklmnopqrstuvwxyz</p>
<p class="font-sample font-sample-heading">0123456789-*#/;</p>
</div>
</div>
</div>
<div class="font-entry">
<div class="font-name font-name-outfit">Body</div>
<div class="font-details">
<p class="font-meta">Outfit | weight 300</p>
<div class="font-samples">
<p class="font-sample font-sample-body">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p class="font-sample font-sample-body">abcdefghijklmnopqrstuvwxyz</p>
<p class="font-sample font-sample-body">0123456789-*#/;</p>
</div>
</div>
</div>
</div>

## Colors
<br>
<div class="brand-guidelines">
<div class="color-palette">
<div class="color-swatch" data-color="#a3001f" role="button" tabindex="0" aria-label="Copy #a3001f">
<div class="color-swatch-fill" style="background:#a3001f"></div>
<div class="color-copy-hint"><span class="color-copy-badge"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></span></div>
<p class="color-hex">#a3001f</p>
<p class="color-rgb">163, 0, 31</p>
<p class="color-name">brand-800</p>
</div>
<div class="color-swatch" data-color="#b11c1c" role="button" tabindex="0" aria-label="Copy #b11c1c">
<div class="color-swatch-fill" style="background:#b11c1c"></div>
<div class="color-copy-hint"><span class="color-copy-badge"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></span></div>
<p class="color-hex">#b11c1c</p>
<p class="color-rgb">196, 28, 28</p>
<p class="color-name">brand-700</p>
</div>
<div class="color-swatch" data-color="#e0262e" role="button" tabindex="0" aria-label="Copy #e0262e">
<div class="color-swatch-fill" style="background:#e0262e"></div>
<div class="color-copy-hint"><span class="color-copy-badge"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></span></div>
<p class="color-hex">#e0262e</p>
<p class="color-rgb">230, 46, 46</p>
<p class="color-name">brand-600</p>
</div>
<div class="color-swatch color-swatch-featured" data-color="#f04444" role="button" tabindex="0" aria-label="Copy #f04444">
<div class="color-swatch-fill" style="background:#f04444"></div>
<div class="color-copy-hint"><span class="color-copy-badge"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></span></div>
<p class="color-hex">#f04444</p>
<p class="color-rgb">255, 68, 68</p>
<p class="color-name">brand-500</p>
</div>
<div class="color-swatch" data-color="#ff6363" role="button" tabindex="0" aria-label="Copy #ff6363">
<div class="color-swatch-fill" style="background:#ff6363"></div>
<div class="color-copy-hint"><span class="color-copy-badge"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></span></div>
<p class="color-hex">#ff6363</p>
<p class="color-rgb">255, 99, 99</p>
<p class="color-name">brand-400</p>
</div>
<div class="color-swatch" data-color="#ff9494" role="button" tabindex="0" aria-label="Copy #ff9494">
<div class="color-swatch-fill" style="background:#ff9494"></div>
<div class="color-copy-hint"><span class="color-copy-badge"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></span></div>
<p class="color-hex">#ff9494</p>
<p class="color-rgb">255, 148, 148</p>
<p class="color-name">brand-300</p>
</div>
<div class="color-swatch" data-color="#ffc2c2" role="button" tabindex="0" aria-label="Copy #ffc2c2">
<div class="color-swatch-fill" style="background:#ffc2c2"></div>
<div class="color-copy-hint"><span class="color-copy-badge"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></span></div>
<p class="color-hex">#ffc2c2</p>
<p class="color-rgb">255, 194, 194</p>
<p class="color-name">brand-200</p>
</div>
</div>
</div>

## Emoji
<div class="brand-guidelines">
<div class="font-emoji">
<br>
💊
</div>
</div>