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: 5 months 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 (almost 8 years ago)
- Default Branch: main
- Last Pushed: 2022-10-28T10:41:09.000Z (over 2 years ago)
- Last Synced: 2024-10-30T00:55:26.482Z (6 months ago)
- Topics: badge, colors, icon, illustrations, logo, presentation, storybook, video
- Homepage:
- Size: 86.2 MB
- Stars: 94
- Watchers: 67
- 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 |  |
| Inverse |  (white text) |## Icon
| Version | Preview |
|---|---|
| Default |  |
| Inverse |  (white icon) |
| Monochrome |  |## Badge
Share that your project uses Storybook by adding our badge to your readme or website.

## 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` |
| Ocean |  `#1EA7FD` |
| Orange |  `#FC521F` |
| Gold |  `#FFAE00` |
| Green |  `#66BF3C` |
| Seafoam |  `#37D5D3` |
| Purple |  `#6F2CAC` |
| Ultraviolet |  `#2A0481` || Monochrome | HEX value |
|------------|-----------|
| Darkest    |  `#333333` |
| Darker |  `#444444` |
| Dark |  `#666666` |
| Mediumdark |  `#999999` |
| Medium |  `#DDDDDD` |
| Mediumlight |  `#EEEEEE` |
| Light |  `#F3F3F3` |
| Lighter |  `#F8F8F8` |
| Lightest |  `#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).
#### 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