# Morpho Brand Guidelines

> Official Morpho brand assets and rules: logos, Powered by Morpho badge, token, colors, typography, graphics and icons. Source: https://brand.morpho.org

Use only the official asset URLs below. Do not redraw, recolor or approximate the Morpho logo.

## Logos

- [Morpho vertical logo, for light backgrounds](https://brand.morpho.org/logos/Morpho-logo-vertical-lightmode.svg)
- [Morpho vertical logo, for dark backgrounds](https://brand.morpho.org/logos/Morpho-logo-vertical-darkmode.svg)
- [Morpho symbol, for light backgrounds](https://brand.morpho.org/logos/Morpho-logo-symbol-lightmode.svg)
- [Morpho symbol, for dark backgrounds](https://brand.morpho.org/logos/Morpho-logo-symbol-darkmode.svg)
- [Morpho horizontal logo, for light backgrounds](https://brand.morpho.org/logos/Morpho-logo-horizontal-lightmode.svg)
- [Morpho horizontal logo, for dark backgrounds](https://brand.morpho.org/logos/Morpho-logo-horizontal-darkmode.svg)
- [Morpho logo with background](https://brand.morpho.org/logos/Morpho-with-background-logo.svg)
- [Brand kit with all assets (zip)](https://cdn.morpho.org/assets/brand-kit/morpho-brand-kit.zip)

## Powered by Morpho

- [Powered by Morpho badge, two lines, for light backgrounds](https://brand.morpho.org/powered-by-morpho/PoweredbyMorpho-1-lightmode.svg)
- [Powered by Morpho badge, two lines, for dark backgrounds](https://brand.morpho.org/powered-by-morpho/PoweredbyMorpho-1-darkmode.svg)
- [Powered by Morpho badge, stacked, for light backgrounds](https://brand.morpho.org/powered-by-morpho/PoweredbyMorpho-2-lightmode.svg)
- [Powered by Morpho badge, stacked, for dark backgrounds](https://brand.morpho.org/powered-by-morpho/PoweredbyMorpho-2-darkmode.svg)
- [Powered by Morpho badge, inline, for light backgrounds](https://brand.morpho.org/powered-by-morpho/PoweredbyMorpho-3-lightmode.svg)
- [Powered by Morpho badge, inline, for dark backgrounds](https://brand.morpho.org/powered-by-morpho/PoweredbyMorpho-3-darkmode.svg)

The web component renders the badge. Load it from the Morpho site with the snippet below, keeping its `integrity` and `crossorigin` attributes. Set `theme` to "light" on light backgrounds and "dark" on dark backgrounds.

```html
<!-- Powered by Morpho badge web component -->
<script
  src="https://brand.morpho.org/snippet.v1.js"
  integrity="sha384-o5vctdoI4K119T6AU2kFx3S1utrEqZdzkZwcW39c6p97FLU1fqqG0heM5xLbiYip"
  crossorigin="anonymous"
></script>

<!-- placement: "center", "bottom-left", "bottom-right", "top-left" or "top-right" -->
<powered-by-morpho
  theme="light"
  placement="center"
></powered-by-morpho>
```

## Token

- [Token icon (zip)](https://cdn.morpho.org/assets/brand-kit/morpho-token-icon.zip)

## Colors

The first value of each family is its main color.

- Blue: #3C80FF, #5792FF, #86B1FF
- Light Blue: #DEE8FC, #EDF3FE, #FFFFFF
- Black: #15181A, #2C313A, #464F60

## Typography

- FK Grotesk: headlines
- Untitled Sans: body text
- FK Grotesk Mono: captions and labels

The typefaces are licensed and are not distributed on this site.

## Graphics

Gradient shapes, used as backgrounds and section visuals.

- [Circle in circle](https://brand.morpho.org/graphics/gradient-shape-circle-in-circle.svg)
- [Square in square](https://brand.morpho.org/graphics/gradient-shape-square-in-square.svg)
- [Circle swap](https://brand.morpho.org/graphics/gradient-shape-circle-swap.svg)

## Icons

Line icons for navigation, product features and diagram nodes.

- [Midnight icon](https://brand.morpho.org/icons/icon-midnight.png)
- [Blue icon](https://brand.morpho.org/icons/icon-blue.png)
- [Audit icon](https://brand.morpho.org/icons/icon-audit.png)
- [Vaults Protocol icon](https://brand.morpho.org/icons/icon-vaults-protocol.png)
- [Earn icon](https://brand.morpho.org/icons/icon-earn.png)
- [Markets icon](https://brand.morpho.org/icons/icon-markets.png)