/brand

🎨 Materials for your articles and talks about storybook

MIT LicenseMIT

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

Version Preview
Default Default
Inverse Inverse (white text)

Icon

Version Preview
Default Default
Inverse Inverse (white icon)
Monochrome 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 illustrations 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