If you document design systems, I'm about to save you a of time because Storybook comes with lesser-known components for organizing colors, typography, and icons. ton ColorPalette Display color systems with the component. ColorPalette Import . Then render a with a single inside. "@storybook/blocks" ColorPalette ColorItem // system/colors.mdx import { ColorPalette, ColorItem } from "@storybook/blocks" <ColorPalette> <ColorItem /> </ColorPalette> Create an object with a key and color value. And pass it to the component via the prop. ColorItem color Both key and value are displayed in the UI. <ColorItem colors={{ Apple: "#66bf3c" }} /> Describe with and props. ColorItems title subtitle <ColorItem + title="Apple" + subtitle="A delicious brand color." colors={{ Apple: "#66bf3c" }} /> Add as many colors to the prop as needed. colors <ColorItem title="Apple" subtitle="A delicious brand color." colors={{ Apple: "#66bf3c", + AppleDark: "#46991f", + AppleLight: "#83da5a" }} /> Use any CSS-supported color value. adds gray cross-hatches to indicate translucency — where color functions with non- alpha values are used. ColorItem 1 <ColorItem title="Apple" subtitle="A delicious brand color." colors={{ + Apple: "rgba(102,191,60,1)", + Apple60: "rgba(102,191,60,.6)", + Apple30: "rgba(102,191,60,.3)", }} /> See full . ColorPalette API reference Typeset Display typography systems with the Typeset component. Import the Typeset component from @storybook/blocks. // system/typography.mdx import { Typeset } from "@storybook/blocks"; <Typeset {/* required props */} /> requires four props to render: , , , and . Typeset fontSizes fontWeight sampleText fontFamily and support any supported CSS value (and numbers). fontSizes fontWeight <Typeset + fontSizes={["2.875em", "2em", "1.375em", "1em"]} + fontWeight="900" + sampleText="Lorem ipsum dolor sit amet, consectetur adipiscing elit." + fontFamily='"Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif' /> Create a new Typeset block for every discrete typographical subset. <Typeset + fontSizes={["2.875em", "2em", "1.375em", "1em"]} + fontWeight="900" + sampleText="Lorem ipsum dolor sit amet, consectetur adipiscing elit." + fontFamily='"Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif' /> See full . Typeset API reference IconGallery Display icons with the component. IconGallery Import . Then render a with a single inside it. "@storybook/blocks" IconGallery IconItem // system/icons.mdx import { IconGallery, IconItem } from "@storybook/blocks" <IconGallery> <IconItem></IconItem> </IconGallery> Place an icon inside . Then display that icon's name with the prop. IconItem name + import * as Icons from "@storybook/icons"; <IconGallery> <IconItem name="Accessibility"> + <Icons.Accessibility /> </IconItem> </IconGallery> Take this further — in React — by dynamically generating all available icons. ## Storybook icons <IconGallery> {Object.entries(Icons) .filter(([name]) => name !== "iconList") .map(([name, Icon]) => ( <IconItem name={name}> <Icon /> </IconItem> ))} </IconGallery> See full . IconGallery API reference Learn more… Find in-depth references for each component on the and . Storybook docs page Chromatic YouTube channel Also published . here