How to Brand your Sanity Studio
Tags: webdev, react, css, tutorial
Published: 2019-09-04 07:45:34

---
title: How to Brand your Sanity Studio
published: true
description: A step-by-step guide to how to style and brand Sanity Studio
tags: webdev, react, css, tutorial
canonical_url: https://www.sanity.io/docs/how-to-brand-your-studio
cover_image: https://thepracticaldev.s3.amazonaws.com/i/3w6h6olesobzda9132p7.png
---

At Sanity, we have made sure that our editing environment, the Studio, comes with a default look that is easy to use and great look at, but sometimes you want to customize it to your own liking. In other systems you would need to provide custom CSS to override selectors, creating brittle dependencies, or change the internal CSS and thereby making future upgrades hard. However, in Sanity you can extend and customize the Studio to your heart's desire, thanks to the [parts system](https://www.sanity.io/docs/parts) at the core of Sanity. This includes adding your own logo to the navigation bar and creating custom looks for the Studio by overriding CSS variables.

In this tutorial, you will learn how to brand your Studio with a custom logo, colors and typography to make your Sanity Studio stand our from the crowd and feel true to your brand.

## What is Sanity?

[Sanity.io](http://sanity.io/) is a platform for structured content with an open source editing environment. Sanity Studio is a single page application written in React, where you can configure the document types and input fields, with simple JavaScript objects. The Studio connects to Sanity’s hosted real-time APIs. You can also customize the Studio with your own input components, plugins, and tools.

## Setting up your Studio

For this tutorial we created a new Sanity project with the [Sanity CLI](https://www.sanity.io/docs/reference/cli) by running `sanity init` in our terminal. We decided to use the [e-commerce template](https://www.sanity.io/blog/e-commerce-sample-schema) to show you a Studio pre-populated with sample data that helps demonstrate the impact custom branding can have on your Studio. 

You are free to choose how you want to follow along in this tutorial. You can create a project the same way we did with `sanity init`, create a project with the Sanity jumpstart templates on [sanity.io/create](https://sanity.io/create), or simply follow along with your own Sanity project.

Here is the full configuration for the project we created for this tutorial as a reference.

```
$ sanity init
You're setting up a new project!
We'll make sure you have an account with Sanity.io. Then we'll
install an open-source JS content editor that connects to
the real-time hosted API on Sanity.io. Hang on.
Press ctrl + C at any time to quit.

Looks like you already have a Sanity-account. Sweet!
    
? Select project to use: Create new project
? Informal name for your project: studio-branding
? Name of your first dataset: production
? Choose dataset visibility – this can be changed later: Public (world readable)
? Output path: /Users/vicbergquist/Desktop/studio-branding
? Select project template: E-commerce (schema + sample data)
? Upload a sampling of products to go with your e-commerce schema? Yes
✔ Bootstrapping files from template
✔ Resolving latest module versions
✔ Creating default project files
    
✔ Saved lockfile
✔ [100%] Fetching available datasets
✔ [100%] Reading/validating data file (70ms)
✔ [100%] Importing documents (329ms)
✔ [100%] Importing assets (files/images) (15.86s)
✔ [100%] Setting asset references to documents (325ms)
✔ [100%] Strengthening references (288ms)
Done! Imported 32 documents to dataset "production"
```

To inspect the code behind your Sanity Studio and to get started with this tutorial, open the Sanity project folder in your favorite code editor. This is where you will be spending most of your time during this tutorial. 

To learn more about the Studio and its project structure, see our [documentation](https://www.sanity.io/docs/content-studio/project-structure).

To explore the default Studio, run `sanity start` from the terminal while at the root of your project. This will compile all the necessary files and serve the Studio with Hot Module Replacement (HMR):

```
$ cd path/to/your/project
$ sanity start
$ Content Studio successfully compiled! Go to http://localhost:3333
```

You should now have a Studio running locally. Open it in your favorite browser.

Because we used the e-commerce template, our Studio now looks like this. With the desk tool (a built in way to navigate your content) we selected a product from our content to show you the default style of the Studio. Notice that we currently do not have a logo on the left side of the navigation bar, the Studio uses our project name there instead. 

![The e-commerce Studio template with Kick Lakris as the selected product from the sample data.](https://thepracticaldev.s3.amazonaws.com/i/vd5dxo1vl6rq381h8kj4.png)

## Adding a custom logo

To add a logo to your Studio, you need to implement a [part](https://www.sanity.io/docs/extending/parts) called `brand-logo` in your project's configuration file, `sanity.json`. This part uses a custom React component to render your logo. 

First, create a `js` file for your component and import React as a dependency. Then write a React component that returns the logo you want in the navigation bar, and save your changes. Remember that this is a regular React component that can render the logo any way you want, including as an SVG.

Here is the logo component we just created as an example. It's in a file called `myLogo.js` placed in a `logo`-folder at the root of our project. Note that we are returning an image from the `static` folder using its relative file path.

```js
// ./logo/myLogo.js
    
import React from 'react'
    
const myLogo = () => (
  <img src="/static/lionqueen.png" alt="Lion Queen"/>
)
    
export default myLogo
```

Next, at the root of your project, find the `sanity.json` file. This is where you will find all the information about your project, including all parts and plugins you have installed and implemented (or that comes with the template you use). 

This is our `sanity.json`. Your project name, ID, and dataset may differ.

```json
{
  "root": true,
  "project": {
    "name": "studio-branding"
  },
  "api": {
    "projectId": "ym8ladyp",
    "dataset": "production"
  },
  "plugins": [
    "@sanity/base",
    "@sanity/components",
    "@sanity/default-layout",
    "@sanity/default-login",
    "@sanity/desk-tool",
    "barcode-input"
  ],
  "parts": [
    {
      "name": "part:@sanity/base/schema",
      "path": "./schemas/schema.js"
    }
  ]
}
```

To make the logo actually show up in your Studio, you have to add it to the `parts`-array in `sanity.json`. This is the only way for Sanity knows that you want to use a custom component to render your logo, instead of using your project name in the navigation bar.

Create a new object that has `implements` and `path` keys. Give `implements` the value of `part:@sanity/base/brand-logo`, which is the full name of the `brand-logo` part, and point `path` to the file with your logo component by giving it a value of the file's relative path.

You are free to decide where you place files associated with parts in your project folder and what you name them, but you need to make sure the part's path has the correct relative file path.

In our case, we created a `logo`-folder at the root of our project and wrote our logo component in `myLogo.js`. The `parts` array in our `sanity.json` configuration file now has a new object that reflects that:

```json
{
  ...,
  "parts": [
    ...,
    {
      "implements": "part:@sanity/base/brand-logo",
      "path": "./logo/myLogo.js"
    }
  ]
}

```

To make sure Sanity implements this new part and your logo component correctly, you need to force quit the current `sanity start` command in your terminal (`ctrl + C`) and run `sanity start` again. 

Now, Sanity implements the part correctly and knows it should use the component you created to render your logo in the right place. See it in action in your Studio by switching back to your browser and refreshing the page! Here is our logo:

![Our example Studio with a custom logo instead of the project name. However, the logo is oversized.](https://thepracticaldev.s3.amazonaws.com/i/bwtycnbvr579wmriyusq.png)

Now that you have a custom logo, you might wonder how you can apply styles to it. We certainly do, as our logo does not have the right size for the navigation bar. It's currently oversized. Depending on where you put your logo component file, you can create a CSS file in the same place and write styles to target your logo.

To demonstrate, we created a `myLogo.css` file in the same `logo` folder as our `myLogo.js` component and adjusted the height:

```css
/* ./logo/myLogo.css */

.myLogo {
  height: 100%;
  max-height: 3rem;
}
```

To actually apply the styles you write for your logo, you import the CSS file in the logo component and make them available on a `styles` object. Now you can access them with JSX by using dot notation. 

For example, here we import our styles in `myLogo.js` and give our `img` tag a `className` of `styles.myLogo`:

```js
// ./logo/myLogo.js

import React from 'react'
import styles from './myLogo.css'

const myLogo = () => (
  <img className={styles.myLogo} src="/static/lionqueen.png" alt="Lion Queen" />
)

export default myLogo
```

Sanity uses [PostCSS](https://github.com/postcss/postcss) with [css-modules](https://github.com/css-modules/css-modules) to isolate styles to components. You are not strictly bound to use css-modules, but we highly recommend it, and we use this approach in this tutorial. 

Looking at our Studio in our browser, we can now see our logo, properly sized, in the navigation bar!

![Our example Studio with a custom logo in the navigation bar.](https://thepracticaldev.s3.amazonaws.com/i/4uds9f0pzh4qxl718by5.png)

## Styling the Studio

Now that your Studio uses a custom logo, you might want to style and brand the rest of your Studio! This is easily achieved by implementing another [part](https://www.sanity.io/docs/extending/parts) called `override-style`, which exposes a wide range of CSS variables that you can override with your own values to change the default look of the Studio. 

For this tutorial, we will show you how to change the brand colors and typography of the Studio. However, you can can customize the look of the Studio even further. Feel free to explore the [full list of available CSS variables](https://github.com/sanity-io/sanity/tree/master/packages/%40sanity/base/src/styles/variables) on GitHub and go beyond what this tutorial covers.

To get started, you need to implement the new `override-style` part in your `sanity.json` configuration the same way you implemented the `brand-logo` part. 

Create a new object in the `parts` array that implements `part:@sanity/base/theme/variables/override-style` and points to the path of a CSS file.

```json
{
  ...,
  "parts": [
    ...,
    {
      "implements": "part:@sanity/base/brand-logo",
      "path": "./logo/myLogo.js"
    },
    {
      "implements": "part:@sanity/base/theme/variables/override-style",
      "path": "./styles/variables.css"
    }
  ]
}
```

Here you can see that we created a `variables.css`-file inside a `styles`-folder at the root of our project. Remember that you are free to decide where files associated with parts go and how you name them.

Save your latest changes, and force quit the current `sanity start` command in the terminal (`ctrl + C`) to make sure that Sanity implements this new part correctly. Restart the Studio by running `sanity start` again.

We created a theme for this tutorial to show you how the look of the Studio changes by customizing the brand colors, typography and navigation bar. However, you are free to choose your own colors and values, or even use any other [variables](https://github.com/sanity-io/sanity/tree/master/packages/%40sanity/base/src/styles/variables), while following this tutorial.

### Brand Colors

You can now start editing the CSS file you created for the `override-style` part and see your changes live in the Studio. 

The first step to a custom Studio look is declaring the CSS variables you want to override with custom values on the `:root` pseudo-class. If you don't, your Studio won't apply any changes you make.

Override the primary and secondary colors of the Studio, `--brand-primary` and `--brand-secondary`, along with their inverted equivalents to change the basic brand colors of your Studio. Find the full list of available [brand color variables](https://github.com/sanity-io/sanity/blob/master/packages/%40sanity/base/src/styles/variables/brand-colors.css) on GitHub. Here are our changes:

```css
/* ./styles/variables.css */

:root {
  /* Brand colors */
  --brand-primary: #cc4a1e;
  --brand-primary--inverted: #ffffff;
  --brand-secondary: #ffa800;
  --brand-secondary--inverted: #3c1609;
}
```

After saving your changes, see them live in your Studio in your browser. 

You can see that the Studio no longer uses the default blue as the brand color, but the color you set as your primary color. This also applies to hovered items, some buttons and focused input fields. You should also notice that the color of your navigation bar has changed slightly.

Here is our example Studio with our new brand colors:

![Our Studio with custom brand colors.](https://thepracticaldev.s3.amazonaws.com/i/ey7nuoe2y3p18uy9m9rs.png)

### Typography

Next, let's change the typography of your Studio. You can change a wide range of [typography variables](https://github.com/sanity-io/sanity/blob/master/packages/%40sanity/base/src/styles/variables/typography.css), but let's start with the basics.

To change the font that your Studio uses, you have to override the base font family with `--font-family-base`. You can also change the font size with `--font-size-base` and text color with `--text-color`. If you would like to use an external font, you can import it at the top of the file.

Change the font family to `Nunito`, the font size to `18px` and use the inverted version of the secondary brand color as the text color for the whole Studio.

```css
/* ./styles/variables.css */

@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');

:root {
  /* Brand colors */
  --brand-primary: #cc4a1e;
  --brand-primary--inverted: #ffffff;
  --brand-secondary: #ffa800;
  --brand-secondary--inverted: #3c1609;
  /* Typography */
  --font-family-base: 'Nunito';
  --font-size-base: 18px;
  --text-color: var(--brand-secondary--inverted);
}
```

Nunito is an external font from Google Fonts. For it to work in the Studio, we first need to import it from the Google Fonts API.

To see your changes live, save them and switch back to your browser. Here is our example Studio with the new typography we declared above.

![Our example Studio with custom typography.](https://thepracticaldev.s3.amazonaws.com/i/t0hcgag3zfh5ow2y7ehs.png)

### The Navigation Bar

The navigation bar uses the [primary brand color](https://github.com/sanity-io/sanity/blob/master/packages/%40sanity/base/src/styles/variables/globals.css#L10) to calculate its background color and the text color. However, you might want completely different colors for the navigation bar in your Studio. 

To override the default look of the navigation bar, you can use `--main-navigation-color` to change the background color, and `--main-navigation-color--inverted` to change the text color. You can find these variables, and more, in the [globals.css](https://github.com/sanity-io/sanity/blob/master/packages/%40sanity/base/src/styles/variables/globals.css) file.

Change the color of the navigation bar to the same color as `--brand-secondary` and the navigation text to `--brand-secondary--inverted`.

```css
/* ./styles/variables.css */

@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');

:root {
  /* Brand colors */
  --brand-primary: #D2613A;
  --brand-primary--inverted: #ffffff;
  --brand-secondary: #FFB320;
  --brand-secondary--inverted: #3c1609;
  /* Typography */
  --font-family-sans-serif: 'Nunito';
  --font-size-base: 18px;
  --text-color: var(--brand-secondary--inverted);
  /* Main Navigation */
  --main-navigation-color: var(--brand-secondary);
  --main-navigation-color--inverted: var(--brand-secondary--inverted);
}
```

Remember to save any changes you made to see them live in the Studio. This is our example Studio with custom navigation colors:

![Our example Studio with custom navigation colors and complete branding.](https://thepracticaldev.s3.amazonaws.com/i/d4alh60cizfa775qey5w.png)

## Conclusion

Your Studio may now look very different from the Studio you started out with, ours certainly does, and depending on the variables you chose to override, your Studio will have completely transformed. Here is a side-by-side comparison of the Studio we started out with for this tutorial and our freshly branded Studio:

![The default Studio on the left with no branding, and our example Studio with custom navigation colors and complete branding on the right.](https://thepracticaldev.s3.amazonaws.com/i/3ums5hpmmwuee4bq9l1a.png)

While this tutorial only covered the implementation of two Sanity [parts](https://www.sanity.io/docs/extending/parts), they are only a few of the many you can add to further extend and customize the functionality of your Sanity Studio. You can also install collections of parts, also known as [plugins](https://www.sanity.io/docs/extending/plugins), create [custom input components](https://www.sanity.io/docs/extending/custom-input-widgets) and change the way you navigate your Studio content by customizing the desk tool with the [Structure builder](https://www.sanity.io/docs/content-studio/structure-builder). The Sanity world is now your oyster!

To learn more about styling the Studio, take a look at our [official documentation](https://www.sanity.io/docs/styling). You can also inspect the code behind our example Studio branding on Github, or even install the custom styles we applied as a plugin by running `sanity install lion-queen-theme` from the terminal while at the root of your project.

We hope you enjoyed this tutorial and would love to see how you customized your Studio, so feel free to share it with us in the comments, in the #i-made-this channel in our [Slack community](https://slack.sanity.io), or on [Twitter](https://twitter.com/sanity_io)!