KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#typescript #ai-agents #developer-tools #cli #codex #claude-code #dsh-plugin #mcp #react #agent #dsh #deepseek-harness

brand

★ 109 Open GitHub ↗

🎨 Materials for your articles and talks about storybook

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Storybook brand

This repository contains Storybook brand assets. Feel free to use and customize these assets for your articles, talks, addons, websites, and anything else you can think of.

- [Logo](./logo)
- [Icon](./icon)
- [Badge](./badge)
- [Fonts](./fonts)
- [Colors](#fonts)
- [Presentation template](./presentation)
- [Illustrations](./illustrations)
- [Video](./video)

## Logo

| Version | Preview |
|---|---|
| Default | ![Default](https://raw.githubusercontent.com/storybookjs/brand/main/logo/logo-storybook-default.svg) |  
| Inverse | ![Inverse](https://raw.githubusercontent.com/storybookjs/brand/main/logo/logo-storybook-inverse.svg) (white text) |

## Icon

| Version | Preview |
|---|---|
| Default | ![Default](https://raw.githubusercontent.com/storybookjs/brand/main/icon/icon-storybook-default.svg) |  
| Inverse | ![Inverse](https://raw.githubusercontent.com/storybookjs/brand/main/icon/icon-storybook-inverse.svg) (white icon) |
| Monochrome | ![Monochrome](https://raw.githubusercontent.com/storybookjs/brand/main/icon/icon-storybook-monochrome.svg) |

## Badge

Share that your project uses Storybook by adding our badge to your readme or website.

![Badge](https://raw.githubusercontent.com/storybookjs/brand/main/badge/badge-storybook.svg)

```
<a href="https://github.com/storybooks/storybook" target="_blank"><img src="https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg"></a>
```

## Fonts
Storybook uses these fonts on the website and promotional materials.

| Font  |  Weights  |  Link |
|---|---|---|
| Nunito Sans  | 400 (normal), 600 (bold), 900 (black) | [Google fonts](https://fonts.google.com/specimen/Nunito+Sans), [Local](./fonts) |  
| Daniel   |  black |  [Dafont](https://www.dafont.com/daniel.font) |

**Note:** The Storybook UI includes the Nunito Sans webfont in the `font-family` declaration but *does not* require users to download it.

### Colors
| Color     | HEX value |
|------------|-----------|
| Coral       | ![](https://www.singlecolorimage.com/get/FF4785/15x15)  `#FF4785` |
| Ocean     | ![](https://www.singlecolorimage.com/get/006DEB/15x15) `#006DEB` |
| Orange     | ![](https://www.singlecolorimage.com/get/FC521F/15x15) `#FC521F` |
| Gold      | ![](https://www.singlecolorimage.com/get/FFAE00/15x15) `#FFAE00` |
| Green       | ![](https://www.singlecolorimage.com/get/66BF3C/15x15) `#66BF3C` |
| Seafoam      | ![](https://www.singlecolorimage.com/get/37D5D3/15x15) `#37D5D3` |
| Purple      | ![](https://www.singlecolorimage.com/get/6F2CAC/15x15) `#6F2CAC` |
| Ultraviolet      | ![](https://www.singlecolorimage.com/get/2A0481/15x15) `#2A0481` |

| Monochrome  | HEX value |
|------------|-----------|
| Darkest       | ![](https://www.singlecolorimage.com/get/2E3338/15x15) `#2E3338` |
| Darker     | ![](https://www.singlecolorimage.com/get/454C54/15x15) `#454C54` |
| Dark     | ![](https://www.singlecolorimage.com/get/5C6570/15x15) `#5C6570` |
| Mediumdark      | ![](https://www.singlecolorimage.com/get/737F8C/15x15) `#737F8C` |
| Medium       | ![](https://www.singlecolorimage.com/get/D9E5F2/15x15) `#D9E5F2` |
| Mediumlight      | ![](https://www.singlecolorimage.com/get/ECF2F9/15x15) `#ECF2F9` |
| Light      | ![](https://www.singlecolorimage.com/get/EEF2F6/15x15) `#EEF2F6` |
| Lighter      | ![](https://www.singlecolorimage.com/get/F6F9FC/15x15) `#F6F9FC` |
| Lightest      | ![](https://www.singlecolorimage.com/get/FFFFFF/15x15) `#FFFFFF` |

## Presentation template
Share Storybook at work, meetups, and conferences. Get a head start on your slides with our ready-to-use presentation (Keynote, PDF).

[**View presentation**](./presentation)

## Illustrations
Custom illustrations are located in [/illustrations](./illustrations).
For illustrations used on the website go to [storybooks/frontpage](https://github.com/storybooks/frontpage/).

## Video
The intro video, source files, and assets are located in [/video](./video).

![Video](https://raw.githubusercontent.com/storybookjs/brand/main/video/2018/storybook-intro-animation.gif)

#### Thanks
- [Sacha Grief](https://github.com/SachaG) the awesome designer of the 2017 logo (which inspired the current logo and icon)
- [Daniel Egerev](https://twitter.com/iDanb0) the amazing video animator

brand

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README