Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/storybookjs/brand

🎨 Materials for your articles and talks about storybook
https://github.com/storybookjs/brand

badge colors icon illustrations logo presentation storybook video

Last synced: about 1 month ago
JSON representation

🎨 Materials for your articles and talks about storybook

Host: GitHub
URL: https://github.com/storybookjs/brand
Owner: storybookjs
License: mit
Created: 2017-05-20T16:09:31.000Z (over 7 years ago)
Default Branch: main
Last Pushed: 2022-10-28T10:41:09.000Z (almost 2 years ago)
Last Synced: 2024-04-14T04:08:14.468Z (5 months ago)
Topics: badge, colors, icon, illustrations, logo, presentation, storybook, video
Homepage:
Size: 86.2 MB
Stars: 91
Watchers: 70
Forks: 45
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

awesome-storybook - Brand's materials - Materials for your articles and talks about Storybook. (Community resources)
jimsghstars - storybookjs/brand - 🎨 Materials for your articles and talks about storybook (Others)

README

        # 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](./logo/logo-storybook-default.svg) |  

| Inverse | ![Inverse](./logo/logo-storybook-inverse.svg) (white text) |

## Icon

| Version | Preview |

|---|---|

| Default | ![Default](./icon/icon-storybook-default.svg) |  

| Inverse | ![Inverse](./icon/icon-storybook-inverse.svg) (white icon) |

| Monochrome | ![Monochrome](./icon/icon-storybook-monochrome.svg) |

## Badge

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

![Badge](./badge/badge-storybook.svg)

```



```

## 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       | ![#FF4785](https://www.singlecolorimage.com/get/FF4785/15x15)  `#FF4785` |

| Ocean     | ![#1EA7FD](https://www.singlecolorimage.com/get/1EA7FD/15x15) `#1EA7FD` |

| Orange     | ![#FC521F](https://www.singlecolorimage.com/get/FC521F/15x15) `#FC521F` |

| Gold      | ![#FFAE00](https://www.singlecolorimage.com/get/FFAE00/15x15) `#FFAE00` |

| Green       | ![#66BF3C](https://www.singlecolorimage.com/get/66BF3C/15x15) `#66BF3C` |

| Seafoam      | ![#37D5D3](https://www.singlecolorimage.com/get/37D5D3/15x15) `#37D5D3` |

| Purple      | ![#6F2CAC](https://www.singlecolorimage.com/get/6F2CAC/15x15) `#6F2CAC` |

| Ultraviolet      | ![#2A0481](https://www.singlecolorimage.com/get/2A0481/15x15) `#2A0481` |

| Monochrome  | HEX value |

|------------|-----------|

| Darkest       | ![#333333](https://www.singlecolorimage.com/get/333333/15x15) `#333333` |

| Darker     | ![#444444](https://www.singlecolorimage.com/get/444444/15x15) `#444444` |

| Dark     | ![#666666](https://www.singlecolorimage.com/get/666666/15x15) `#666666` |

| Mediumdark      | ![#999999](https://www.singlecolorimage.com/get/999999/15x15) `#999999` |

| Medium       | ![#DDDDDD](https://www.singlecolorimage.com/get/DDDDDD/15x15) `#DDDDDD` |

| Mediumlight      | ![#EEEEEE](https://www.singlecolorimage.com/get/EEEEEE/15x15) `#EEEEEE` |

| Light      | ![#F3F3F3](https://www.singlecolorimage.com/get/F3F3F3/15x15) `#F3F3F3` |

| Lighter      | ![#F8F8F8](https://www.singlecolorimage.com/get/F8F8F8/15x15) `#F8F8F8` |

| Lightest      | ![#FFFFFF](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](./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