# Visual Identity

> Logos, icons, and brand colors available for embedding DiapStash on your website.

All visual identity assets are hosted in the [`ds-assets`](https://gitlab.com/diapstash/ds-assets) GitLab repository and served directly from `https://diapstash.com/diapstash/assets/`.

You are free to use them to integrate DiapStash on your website. Please do not alter the colors or proportions of the logos.

## Logos

### DiapStash

<nuxt-img alt="DiapStash logo" className="h-12,inline-block" height="48" src="https://diapstash.com/diapstash/assets/DiapStash.svg">



</nuxt-img>

<table>
<thead>
  <tr>
    <th>
      Format
    </th>
    
    <th>
      GitLab
    </th>
    
    <th>
      Direct link
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      PNG
    </td>
    
    <td>
      <a href="https://gitlab.com/diapstash/ds-assets/-/blob/main/DiapStash.png" rel="nofollow">
        View on GitLab
      </a>
    </td>
    
    <td>
      <a href="https://diapstash.com/diapstash/assets/DiapStash.png" rel="nofollow">
        <code>
          https://diapstash.com/diapstash/assets/DiapStash.png
        </code>
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      SVG
    </td>
    
    <td>
      <a href="https://gitlab.com/diapstash/ds-assets/-/blob/main/DiapStash.svg" rel="nofollow">
        View on GitLab
      </a>
    </td>
    
    <td>
      <a href="https://diapstash.com/diapstash/assets/DiapStash.svg" rel="nofollow">
        <code>
          https://diapstash.com/diapstash/assets/DiapStash.svg
        </code>
      </a>
    </td>
  </tr>
</tbody>
</table>

### DStash Foundation

<nuxt-img alt="DStash Foundation logo" className="h-12,inline-block" height="48" src="https://diapstash.com/diapstash/assets/dstash-foundation.svg">



</nuxt-img>

<table>
<thead>
  <tr>
    <th>
      Format
    </th>
    
    <th>
      GitLab
    </th>
    
    <th>
      Direct link
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      PNG
    </td>
    
    <td>
      <a href="https://gitlab.com/diapstash/ds-assets/-/blob/main/dstash-foundation.png" rel="nofollow">
        View on GitLab
      </a>
    </td>
    
    <td>
      <a href="https://diapstash.com/diapstash/assets/dstash-foundation.png" rel="nofollow">
        <code>
          https://diapstash.com/diapstash/assets/dstash-foundation.png
        </code>
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      SVG
    </td>
    
    <td>
      <a href="https://gitlab.com/diapstash/ds-assets/-/blob/main/dstash-foundation.svg" rel="nofollow">
        View on GitLab
      </a>
    </td>
    
    <td>
      <a href="https://diapstash.com/diapstash/assets/dstash-foundation.svg" rel="nofollow">
        <code>
          https://diapstash.com/diapstash/assets/dstash-foundation.svg
        </code>
      </a>
    </td>
  </tr>
</tbody>
</table>

## Icons

These are the alternative app icons available in the [Appearance settings](/application/settings/appearance).

### Default

<nuxt-img alt="Default icon" className="h-12,inline-block,rounded-md" height="48" src="https://diapstash.com/diapstash/assets/icons/Default.svg">



</nuxt-img>

<table>
<thead>
  <tr>
    <th>
      Format
    </th>
    
    <th>
      GitLab
    </th>
    
    <th>
      Direct link
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      PNG
    </td>
    
    <td>
      <a href="https://gitlab.com/diapstash/ds-assets/-/blob/main/icons/Default.png" rel="nofollow">
        View on GitLab
      </a>
    </td>
    
    <td>
      <a href="https://diapstash.com/diapstash/assets/icons/Default.png" rel="nofollow">
        <code>
          https://diapstash.com/diapstash/assets/icons/Default.png
        </code>
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      SVG
    </td>
    
    <td>
      <a href="https://gitlab.com/diapstash/ds-assets/-/blob/main/icons/Default.svg" rel="nofollow">
        View on GitLab
      </a>
    </td>
    
    <td>
      <a href="https://diapstash.com/diapstash/assets/icons/Default.svg" rel="nofollow">
        <code>
          https://diapstash.com/diapstash/assets/icons/Default.svg
        </code>
      </a>
    </td>
  </tr>
</tbody>
</table>

### Diaper

<nuxt-img alt="Diaper icon" className="h-12,inline-block,rounded-md" height="48" src="https://diapstash.com/diapstash/assets/icons/Diaper.svg">



</nuxt-img>

<table>
<thead>
  <tr>
    <th>
      Format
    </th>
    
    <th>
      GitLab
    </th>
    
    <th>
      Direct link
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      PNG
    </td>
    
    <td>
      <a href="https://gitlab.com/diapstash/ds-assets/-/blob/main/icons/Diaper.png" rel="nofollow">
        View on GitLab
      </a>
    </td>
    
    <td>
      <a href="https://diapstash.com/diapstash/assets/icons/Diaper.png" rel="nofollow">
        <code>
          https://diapstash.com/diapstash/assets/icons/Diaper.png
        </code>
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      SVG
    </td>
    
    <td>
      <a href="https://gitlab.com/diapstash/ds-assets/-/blob/main/icons/Diaper.svg" rel="nofollow">
        View on GitLab
      </a>
    </td>
    
    <td>
      <a href="https://diapstash.com/diapstash/assets/icons/Diaper.svg" rel="nofollow">
        <code>
          https://diapstash.com/diapstash/assets/icons/Diaper.svg
        </code>
      </a>
    </td>
  </tr>
</tbody>
</table>

### Discreet

<nuxt-img alt="Discreet icon" className="h-12,inline-block,rounded-md" height="48" src="https://diapstash.com/diapstash/assets/icons/Discreet.svg">



</nuxt-img>

<table>
<thead>
  <tr>
    <th>
      Format
    </th>
    
    <th>
      GitLab
    </th>
    
    <th>
      Direct link
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      SVG
    </td>
    
    <td>
      <a href="https://gitlab.com/diapstash/ds-assets/-/blob/main/icons/Discreet.svg" rel="nofollow">
        View on GitLab
      </a>
    </td>
    
    <td>
      <a href="https://diapstash.com/diapstash/assets/icons/Discreet.svg" rel="nofollow">
        <code>
          https://diapstash.com/diapstash/assets/icons/Discreet.svg
        </code>
      </a>
    </td>
  </tr>
</tbody>
</table>

### Stack

<nuxt-img alt="Stack icon" className="h-12,inline-block,rounded-md" height="48" src="https://diapstash.com/diapstash/assets/icons/Stack.svg">



</nuxt-img>

<table>
<thead>
  <tr>
    <th>
      Format
    </th>
    
    <th>
      GitLab
    </th>
    
    <th>
      Direct link
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      PNG
    </td>
    
    <td>
      <a href="https://gitlab.com/diapstash/ds-assets/-/blob/main/icons/Stack.png" rel="nofollow">
        View on GitLab
      </a>
    </td>
    
    <td>
      <a href="https://diapstash.com/diapstash/assets/icons/Stack.png" rel="nofollow">
        <code>
          https://diapstash.com/diapstash/assets/icons/Stack.png
        </code>
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      SVG
    </td>
    
    <td>
      <a href="https://gitlab.com/diapstash/ds-assets/-/blob/main/icons/Stack.svg" rel="nofollow">
        View on GitLab
      </a>
    </td>
    
    <td>
      <a href="https://diapstash.com/diapstash/assets/icons/Stack.svg" rel="nofollow">
        <code>
          https://diapstash.com/diapstash/assets/icons/Stack.svg
        </code>
      </a>
    </td>
  </tr>
</tbody>
</table>

## Colors

The three primary colors used across DiapStash and the DStash Foundation.

### Stash Purple

<span style="display:inline-block;width:48px;height:48px;background-color:#47289B;border-radius:6px;vertical-align:middle;border:1px solid rgba(0,0,0,0.1)">



</span>



- Hex: `#47289B`
- RGB: `rgb(71, 40, 155)`

### Stash Blue

<span style="display:inline-block;width:48px;height:48px;background-color:#22B4D2;border-radius:6px;vertical-align:middle;border:1px solid rgba(0,0,0,0.1)">



</span>



- Hex: `#22B4D2`
- RGB: `rgb(34, 180, 210)`

### Foundation Pink

<span style="display:inline-block;width:48px;height:48px;background-color:#D45B9D;border-radius:6px;vertical-align:middle;border:1px solid rgba(0,0,0,0.1)">



</span>



- Hex: `#D45B9D`
- RGB: `rgb(212, 91, 157)`