No Preview

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:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

Layout

Design guidelines for overall page layout
Figma Source File

These are the grids we use for all the screen sizes we design for. We use a 12-column grid approach, meaning every layout can be divided in sections of 2 or 3. It’s important to design with the in mind to create structured and consistent experiences. On smaller screensizes try to avoid using smaller components while using the grid as a guide.

Screensizes

We have 6 main screensizes we design for, these are not the same thing as breakpoints which are used to help us achieve these guidelines. You can checkout our .

Alias
Dimensions
Max Content
Fold Height
XL
1440x900
1248px
680px
LG
1200x900
1072px
680px
MD
1024x768
896px
680px
SM
768x1024
704px
680px
XS
480x900
448px
440px
Base
320x480
288px
440px

Breakpoints

The designer decides how many columns at each breakpoint a section should span. The grid will allow the engineer to set a minimum amount of columns for each breakpoint.

// Object syntax
<Column size={{ _: 6, xs: 4 }}>Content</Column>

// Array syntax
<Column size={[6, 4]} />

This section would be 6 columns at the smallest screen size and 4 columns at anything larger than the 4th breakpoint.

Best practices

  • You should begin most design work with a target viewport of 1440px width, using the XL column grid.
  • Make sure you adjust each design to the viewports and take into account their respective screenheights (the ‘fold’).
  • Wider layouts should maintain proper line-lengths and component widths by adjusting arrangements to take advantage of the increased area—do not simply stretch to fill.
  • Elements that are not placed in an explicit lockup (like catalog cards) do not need to fill entire column widths. Alignment to gridlines on on axis (usually left side) is often enough

Spacing

For spacing between components and sections use these as a guide. Each of these scales is a subset of our spacing sizes found on . While you will have access to all of them in your code use these sets as a practical guide.

Spacing
Sizes
Horizontal Spacing
64
48
32
16
Column Gaps (Gutters)
32
24
16
8
Row Gaps
32
24
16
8

Best practices

  • The smallest unit of space for block elements is 8px.
  • Type can be placed with greater precision within elements or in relation to other lines of type (eg. Headlines/text or information in cards) using the 4px baseline grid.
  • Spaces between elements should use default units in multiples of 8px. The default spacing amount for margins and padding is 16px.
  • Use additional spacing in order to conceptually group or distance design elements, to create more negative space in a composition, or to assist with rhythm. Whenever possible, make sure that objects line up, both vertically and horizontally.