Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It is open source and free.
| Name | Description | Default | Controls |
|---|---|---|---|
| description* | description paragraph | – | |
| productTitle* | Button label | – | |
| padding | inner spacing | 16 | |
| selectedColor | swatch selection | White |
Controls run 32px in the nav and 48px in the hero, all at 9999px radius. The primary is a solid #ffffff pill with #000000 ink; outline pills carry a 1px #4d4d4d hairline. The brand hues never fill a button — they live entirely in the background aurora. Hover is a fill or colour shift over 150ms cubic-bezier(.4,0,.2,1); focus borders in #029cfd.
The computed shadow census returns a single fully-transparent stack across all 37 elements — there is not one drop shadow on the page. Depth comes from aurora falloff, the shared grain texture and 1px hairlines. Motion sits in a narrow band on the Material standard curve: color, background-color 150ms cubic-bezier(.4,0,.2,1) on 21 elements, plus all 200ms and all 300ms on the same curve for chrome.