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.
Referencing specific page templates
A list of blog post templates that show how typography is rendered for each type of post.
A list of example generic page templates to be used as reference when creating new generic pages on the site. Each component in these pages has a corresponding Contentful type and can be easily inserted into other site pages.
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>