Sidebar navigation text case

You can change the sidebar category text to be uppercase or mixed case instead of all caps. Categories will still default to all caps.

1) In the Styleguide settings under Appearance, check or uncheck the box under Text size

Custom font

This feature allows you to customize the fonts used for the body text, headings and navigation in your styleguide.

First, you need to import the fonts you'd like to use.

Import your fonts

Go to Import fonts in the styleguide settings:

To add a font, click + Add font. You can add a font from Google fonts:

or with a font URL:

Note the following requirements for the font URL

• must be https://
• must end in svg, eot, woff, woff2 or ttf (unless it's a use.typekit.net font)
• the server where the font is hosted must allow CORS. More info on CORS

Use the imported fonts in your styleguide

Once you've imported all the fonts you want to use, click Appearance in the left menu, and scroll down to the Fonts section

Use the dropdowns to select your imported fonts and click Save to apply them. Beautiful!

Custom colors

The Free plan allows you to customize some of your styleguide's text color, but the Starter plan gives you the ability to theme the UI itself.

Head to Appearance in the styleguide settings. There, you can edit the text colors in the Text colors section.

You can edit the UI colors in the UI colors section.

You can also edit the sidebar colors. Please note that if you choose to make the sidebar color a similar color to the default active text color then you will want to change the active text color so the text can still be shown.

To edit a color, click on it and use the color picker to choose a color:

When you're done, click Use this and then Save in the bottom right.

Have fun! We can't wait to see what amazing styleguides you cook up.

Custom colors for Rules blocks

You can add custom colors to your Rules blocks. Under Appearance, you can select your custom colors in Rule colors.