guide.codex.storage/docs/visual-language/logo.mdx

---
title: Logo
sidebar_position: 1 
---

import { AssetCard } from '@site/src/components/mdx';

# Logo

## Choosing the right mark

Our mark is the primary brand element on our own properties, such as our websites and products. Here it can stand on its own.

When our brand is represented in other contexts, throughout the web or in products we do not own, it is usually best to use a lockup. Please do not edit, change, distort, recolor, or reconfigure the Logos mark. Our mark is the primary brand element on our own properties, such as our websites and products.

## Primary Mark

<div style={{display: "flex", gap: "16px"}}>
  <AssetCard
    title="Mark - Black"
    forceDownload
    previewSrc="/codex/logo/Mark/Large/PREVIEW-Codex-Mark-Black-Large.png"
    downloadable={[
      {
        title: "PNG",
        src: "/codex/logo/Mark/Large/Codex-Mark-Black-Large.png"
      },
      {
        title: "SVG",
        src: "/codex/logo/Mark/Large/Codex-Mark-Black-Large.svg"
      }
    ]}
  />

  <AssetCard
    title="Mark - White"
    forceDownload
    previewSrc="/codex/logo/Mark/Large/PREVIEW-Codex-Mark-White-Large.png"
    downloadable={[
      {
        title: "PNG",
        src: "/codex/logo/Mark/Large/Codex-Mark-White-Large.png"
      },
      {
        title: "SVG",
        src: "/codex/logo/Mark/Large/Codex-Mark-White-Large.svg"
      }
    ]}
  />
</div>

## Lockup — Vertical

These vertical lockups are best used arranged horizontally in a line.

<div style={{display: "flex", gap: "16px"}}>
  <AssetCard
    title="Vertical lockup - Black"
    forceDownload
    previewSrc="/codex/logo/Vertical lockup/Large/PREVIEW-Codex-Vertical lockup-Black-Large.png"
    downloadable={[
      {
        title: "PNG",
        src: "/codex/logo/Vertical lockup/Large/Codex-Vertical lockup-Black-Large.png"
      },
      {
        title: "SVG",
        src: "/codex/logo/Vertical lockup/Large/Codex-Vertical lockup-Black-Large.svg"
      }
    ]}
  />

  <AssetCard
    title="Vertical lockup - White"
    forceDownload
    previewSrc="/codex/logo/Vertical lockup/Large/PREVIEW-Codex-Vertical lockup-White-Large.png"
    downloadable={[
      {
        title: "PNG",
        src: "/codex/logo/Vertical lockup/Large/Codex-Vertical lockup-White-Large.png"
      },
      {
        title: "SVG",
        src: "/codex/logo/Vertical lockup/Large/Codex-Vertical lockup-White-Large.svg"
      }
    ]}
  />
</div>

## Lockup — Horizontal

These horizontal lockups are best used stacked vertically.

<div style={{display: "flex", gap: "16px"}}>
  <AssetCard
    title="Horizontal lockup - Black"
    forceDownload
    previewSrc="/codex/logo/Horizontal lockup/Large/PREVIEW-Codex-Horizontal lockup-Black-Large.png"
    downloadable={[
      {
        title: "PNG",
        src: "/codex/logo/Horizontal lockup/Large/Codex-Horizontal lockup-Black-Large.png"
      },
      {
        title: "SVG",
        src: "/codex/logo/Horizontal lockup/Large/Codex-Horizontal lockup-Black-Large.svg"
      }
    ]}
  />

  <AssetCard
    title="Horizontal lockup - White"
    forceDownload
    previewSrc="/codex/logo/Horizontal lockup/Large/PREVIEW-Codex-Horizontal lockup-White-Large.png"
    downloadable={[
      {
        title: "PNG",
        src: "/codex/logo/Horizontal lockup/Large/Codex-Horizontal lockup-White-Large.png"
      },
      {
        title: "SVG",
        src: "/codex/logo/Horizontal lockup/Large/Codex-Horizontal lockup-White-Large.svg"
      }
    ]}
  />
</div>

## Clearspace

When placing the logo, it’s important that it’s given enough space from other elements on the surface it’s presented on. The Clearspace is 50% of the width of the Logos mark. This Clearspace is accounted for as a margin in all our logo assets, so simply mind the edges of the image.

If you need to define the unit of space, the best way is to measure the bottom of any given mark to the edge of the image or the baseline of the logotype in the lockup to the bottom edge of the image.

![logos-guide-clearspace-mark.png](/logos-guide-clearspace-mark.png)

## Co-branding

Often, our brand marks will be used as a family or in different combinations. All of our marks and lockups are designed to work together. The two major rules here are the consistency of size and the consistency of style.

Hierarchy is determined by the placement order, the most important being left in the case of horizontal layouts, or top in the vertical case. Vertical lockups are used in horizontal layouts and horizontal lockups in vertical layouts.

- All marks should be the same size
- Priority is determined by order, not scale
- All marks should be the same style
- Do not mix lockups and non-lockups
- Do not mix vertical lockups with horizontal lockups