Skip to content
🎨 Materials for your articles and talks about storybook
Branch: master
Clone or download
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 Update to the new intro animation Mar 21, 2019

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


Default Inverse
Default Inverse (white text)


Default Inverse Monochrome
Default Inverse (white icon) Monochrome


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


<a href="" target="_blank"><img src=""></a>


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.


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
Mediumlight #EEEEEE #EEEEEE
Light #F3F3F3 #F3F3F3
Lighter #F8F8F8 #F8F8F8

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


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


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



  • 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.