Skip to content
🎨 Materials for your articles and talks about storybook
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
badge Replace badge with production asset (also simplifies the icon) Dec 22, 2018
fonts Add fonts Storybook uses Dec 22, 2018
icon Add icons Dec 22, 2018
illustrations/addons Add illustrations Dec 22, 2018
logo Export pngs for the logos Dec 27, 2018
presentation Add presentation template Dec 22, 2018
video Intro video 720p for sharing Mar 21, 2019
.gitignore Ignore .DS_Store Dec 22, 2018
LICENSE Initial commit May 20, 2017
README.md Update to the new intro animation Mar 21, 2019

README.md

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
  • Icon
  • Badge
  • Fonts
  • Colors
  • Presentation template
  • Illustrations
  • Video

Logo

Default Inverse
Default Inverse (white text)

Icon

Default Inverse Monochrome
Default Inverse (white icon) Monochrome

Badge

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

Badge

<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, Local
Daniel black Dafont

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

Illustrations

Custom illustrations are located in /illustrations. For illustations used on the website go to storybooks/frontpage.

Video

The intro video, source files, and assets are located in /video.

Video

Thanks

  • Sacha Grief the awesome designer of the 2017 logo (which inspired the current logo and icon)
  • Daniel Egerev the amazing video animator
You can’t perform that action at this time.