Style guide

Using the style guide

Referencing style guide

This is our design reference for juno.com. There are guidelines for colors, typography and components. Use the navigation at the top to find documentation for each category.

Adding to the style guide

Colours

Every colour used on juno.com should be stored as a Sass variable and declared in variables.scss found in the styles directory. The style guide will provide a visual representaion of each color, its corresponding variable name, and hex code.

To add a new colour, add an array containing both the variable name and hex code to the colorPalette declared at the top of the style-guide-colors.js file, found in the pages directory.

Typography

Documentation on commonly used typography styles should be added to the style-guide-typography.js file. Any additional commonly used typography styles can be declared in typography.scss found in the styles directory. Some base stylings have already been provided for certain elements (e.g.h1-h6, a, blockquote, etc). However, ultimately all typography styles should follow the documents provided by Studio Function.

Note: Letter spacing document in Block 1 and 2 are incorrect. Please refer to this annotated legend for re-calculated letter spacing values. There is note about this error in the Block 2 design directory. You can find it in 06 Type Styles 2/_New Type Details.txt

Components

Documentation on how to use components should be added to style-guide-components.js file, found in the pages directory. Each component section will include a visual and code example.

When adding information on a new component, please use the following template:


<section>
  <h3>Component name</h3>
  <div className={StyleGuideComponentsStyles.component}>
    {/*if component has variations, put here*/}
    <div className={StyleGuideComponentsStyles.componentVariation}>
      <h4>Variation name</h4>
        {/* component */}
    </div>
    <pre className={StyleGuideStyles.codeExample}>
      <code>
        {/* provide code examples wrapped in template literals*/}
      </code>
    </pre>
  </div>
</section>