# Supabase Brand Guidelines

> Official Supabase logos and colors, as SVG and PNG files for light and dark backgrounds.

## Which file to use

- Choose the file for the background where the logo appears, not for your browser or editor theme.
- If a request asks for "the Supabase logo", use the wordmark with black lettering on a light background.
- On a dark background, use the wordmark with white lettering.
- In small spaces or next to other brand icons, use the green icon.
- If you can print only one color, use the black or white one-color wordmark.
- All files have a transparent background.
- There is no file with the lettering alone. Every wordmark file includes the symbol.

## Files

The table lists each logo file and where to use it.

| Asset                          | Artwork                                                  | Use on                    | SVG                                                                                                                      | PNG                                                                                          |
| ------------------------------ | -------------------------------------------------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------- |
| Wordmark for light backgrounds | Green symbol and black lettering, transparent background | Light backgrounds         | [supabase-logo-green-black-transparent.svg](https://supabase.com/brand-assets/supabase-logo-green-black-transparent.svg) | [PNG, 2322×449](https://supabase.com/brand-assets/supabase-logo-green-black-transparent.png) |
| Wordmark for dark backgrounds  | Green symbol and white lettering, transparent background | Dark backgrounds          | [supabase-logo-green-white-transparent.svg](https://supabase.com/brand-assets/supabase-logo-green-white-transparent.svg) | [PNG, 2322×449](https://supabase.com/brand-assets/supabase-logo-green-white-transparent.png) |
| Icon                           | Green symbol only, no lettering, transparent background  | Light or dark backgrounds | [supabase-icon-green-transparent.svg](https://supabase.com/brand-assets/supabase-icon-green-transparent.svg)             | [PNG, 436×449](https://supabase.com/brand-assets/supabase-icon-green-transparent.png)        |
| One-color wordmark, black      | Black symbol and lettering, transparent background       | Light backgrounds         | [supabase-logo-black-transparent.svg](https://supabase.com/brand-assets/supabase-logo-black-transparent.svg)             | [PNG, 2000×389](https://supabase.com/brand-assets/supabase-logo-black-transparent.png)       |
| One-color wordmark, white      | White symbol and lettering, transparent background       | Dark backgrounds          | [supabase-logo-white-transparent.svg](https://supabase.com/brand-assets/supabase-logo-white-transparent.svg)             | [PNG, 2000×389](https://supabase.com/brand-assets/supabase-logo-white-transparent.png)       |

## Colors

Supabase green is the main color of the logo symbol. The grays are background colors from the [Supabase design system](https://supabase.com/design-system/docs/color-usage). The logo files already have the correct colors, so do not repaint the logo with these values.

| Name           | Token            | HEX       | RGB                | HSL                      | OKLCH                      |
| -------------- | ---------------- | --------- | ------------------ | ------------------------ | -------------------------- |
| Supabase green | `brand-default`  | `#3ECF8E` | `rgb(62 207 142)`  | `hsl(153.1 60.2% 52.7%)` | `oklch(76.2% 0.154 159.4)` |
| Dark gray      | `gray-dark-200`  | `#1C1C1C` | `rgb(28 28 28)`    | `hsl(0 0% 11%)`          | `oklch(22.6% 0 0)`         |
| Light gray     | `gray-light-200` | `#F8F8F8` | `rgb(248 248 248)` | `hsl(0 0% 97.3%)`        | `oklch(97.9% 0 0)`         |

## Downloads

- [Logo kit (ZIP)](https://supabase.com/brand-assets.zip): the SVG and PNG files from the Files table.
- [Connect Supabase button kit (ZIP)](https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/supabase-brand-assets/connect-supabase/connect-supabase.zip): the button that starts the OAuth 2.0 flow in a [Supabase integration](https://supabase.com/docs/guides/platform/oauth-apps/build-a-supabase-integration). Do not use the button as a logo.

## Name

Write Supabase as one word, with a capital S. Do not write SupaBase or Supa Base.

## Usage

Use the Supabase logos only to refer to Supabase. Do not change the files or the logo colors.

Supabase and the Supabase logo are trademarks of Supabase Inc.