Sorry, but you either have no stories or none are selected somehow.
If the problem persists, check the browser console, or the terminal you've run Storybook from.
The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:
For more checkout out our theme documentation for how to access and use all //TO-DO: add link // typography design tokens.
Our primary typeface is Aperçu Pro. It is a geometric-ish, humanist-ish sans-serif. Its voice says “we are ruled by logic, but are creative and a bit unexpected as well”. Its weight makes it attention-grabbing in dense layouts, and its legibility allows us to use it for both long-form articles and fine print.
We use Suisse Int’l Mono in order to accent designs with references to the tools, techniques and history of programming and technology. It is the seasoning we use to give our designs flavor and personality. Suisse is equally at home debating tabs v. spaces, reciting poetry, sharing tips on new courses and processing payments. But be careful—it should not be overused!
fontFamily)accenttheme.fontFamily.accent"Suisse"basetheme.fontFamily.base"Apercu"monospacetheme.fontFamily.monospaceMonacosystemtheme.fontFamily.system-apple-systemMost type should be set in Aperçu. Use the Regular weight for long-form reading and areas of “default” text. Use Bold when setting important headlines, to set sub-headlines apart from similarly sized text, and for CTAs or buttons.
Aperçu should be set with a generous line-height wherever possible in order to improve readability and to avoid cramping your layout. We recommend using between 150–175% of the type size (example, 16px type would ideally use 24–28px of line-height).
Headlines should be set with reduced line-height in order to appear neat and intentional, and to help group the headline as a distinct semantic unit even when in a larger layout. 100–110% is a good default.
When setting text in Suisse Int’l Mono, you should be aware that it is a monospace typeface, which means that every character is exactly the same width. This causes letters in paragraphs to stack into vertical columns, which can make reading it for extended periods straining.
Suisse is great for displaying numbers and snippets of code, and can be used to associate captions, facts/figures and lists with computer science, techinical rigor and the engineering community at large.
Suisse looks very large for its size, which means that typically you will want to reduce its point size by 10-15% in order for it to visually match text set in Aperçu. The text to the right was set in 14px in order to appear roughly the same size as Aperçu at 16px.
14theme.fontSize[14]0.875rem16theme.fontSize[16]1rem18theme.fontSize[18]1.125rem20theme.fontSize[20]1.25rem22theme.fontSize[22]1.375rem26theme.fontSize[26]1.625rem34theme.fontSize[34]2.125rem44theme.fontSize[44]2.75rem64theme.fontSize[64]4rembasetheme.lineHeight[base]1.5spacedTitletheme.lineHeight[spacedTitle]1.3titletheme.lineHeight[title]1.2Line length (the number of characters per line of text) is an important contributor to readability. You should aim for lines that run 45–85 characters in length, 66 characters being the ideal of web text. In order to accomplish this, you can usually either make the text size larger (to maintain the same width in your layout) or change the width of the text box in your layout (to maintain the original type size).
Paragraphs should almost always be left-aligned, as this is the easiest to read, and encourages layouts which align to a grid. If you must center-align a paragraph, use especially short lines and avoid texts with high word-counts. You should never right-align text in normal circumstances, unless setting numbers or equations.
Do not adjust letterspacing.