Nisolo MVP UI

Font Styles: Headlines

All font styles use the Text element in Shogun.


H1

//styleName: H1;
font-family: Avenir;
font-size: 64px;
font-style: normal;
font-weight: 500;
line-height: 64px;
letter-spacing: 0.07em;

The quick brown fox jumps over the lazy dog


H2

//styleName: H2;
font-family: Avenir;
font-size: 40px;
font-style: normal;
font-weight: 500;
line-height: 48px;
letter-spacing: 0.06em;

The quick brown fox jumps over the lazy dog


H3

//styleName: H3;
font-family: Avenir;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 30px;
letter-spacing: 0.06em;

The quick brown fox jumps over the lazy dog


H4

//styleName: H4;
font-family: Avenir;
font-size: 16px;
font-style: normal;
font-weight: 800;
line-height: 24px;
letter-spacing: 0.06em;

The quick brown fox jumps over the lazy dog


H5

//styleName: H5;
font-family: Avenir;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
letter-spacing: 0.06em;

The quick brown fox jumps over the lazy dog

H6

//styleName: H6;
font-family: Avenir;
font-size: 14px;
font-style: normal;
font-weight: 800;
line-height: 20px;
letter-spacing: 0.06em;

The quick brown fox jumps over the lazy dog

Display-1

custom css class

display-1

//styleName: Display 1;
font-family: Avenir;
font-size: 64px;
font-style: normal;
font-weight: 400;
line-height: 64px;
letter-spacing: -0.02em;

The quick brown fox jumps over the lazy dog


Display-2

custom css class

display-2

//styleName: /Display 2;
font-family: Avenir;
font-size: 40px;
font-style: normal;
font-weight: 400;
line-height: 48px;
letter-spacing: -0.01em;

The quick brown fox jumps over the lazy dog


Display-3

custom css class

display-3

//styleName: Display 3;
font-family: Avenir;
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 30px;
letter-spacing: 0em;

The quick brown fox jumps over the lazy dog


Display-4

custom css class

display-4

//styleName: Display 4;
font-family: Avenir;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 24px;
letter-spacing: 0em;

The quick brown fox jumps over the lazy dog


Font Styles: Body


P

//styleName: Body;
font-family: Avenir;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
letter-spacing: 0em;

The quick brown fox jumps over the lazy dog


P-Bold

//styleName: Body Bold;
font-family: Avenir;
font-size: 16px;
font-style: normal;
font-weight: 800;
line-height: 24px;
letter-spacing: 0em;

The quick brown fox jumps over the lazy dog


P-Small

custom css class

p-small

//styleName: Small copy;
font-family: Avenir;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
letter-spacing: 0em;

The quick brown fox jumps over the lazy dog


P-Small-Bold

custom css class

p-small

//styleName: Small Copy Bold;
font-family: Avenir;
font-size: 14px;
font-style: normal;
font-weight: 800;
line-height: 24px;
letter-spacing: 0em;

The quick brown fox jumps over the lazy dog


P-XSmall

custom css class

p-xsmall

//styleName: Extra Small Copy;
font-family: Avenir;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 21px;
letter-spacing: 0.01em;

The quick brown fox jumps over the lazy dog


P-XSmall-Bold

custom css class

p-xsmall

//styleName: Extra Small Copy Bold;
font-family: Avenir;
font-size: 12px;
font-style: normal;
font-weight: 800;
line-height: 21px;
letter-spacing: 0.01em;

The quick brown fox jumps over the lazy dog


Overline

custom css class

overline

//styleName: Overline;
font-family: Avenir;
font-size: 11px;
font-style: normal;
font-weight: 800;
line-height: 16px;
letter-spacing: 0.15em;

The quick brown fox jumps over the lazy dog


Overline Subtle

custom css class

overline-subtle

//styleName: Overline Subtle;
font-family: Avenir;
font-size: 11px;
font-style: normal;
font-weight: 500;
line-height: 16px;
letter-spacing: 0.15em;

The quick brown fox jumps over the lazy dog


Links with no underline

custom css class

no-underline

This works with any text element that is set to a link within the Shogun text editor, including text that already has a custom css class applied.

You can combine custom css classes by separating them with a space in the "Custom CSS Class" section under "Styles" in the right toolbar.

For example, line 2 has "p-small no-underline" applied to the custom css class. Line 3 has "p-xsmall no-underline" applied to the css custom class.


Buttons


Primary

Shogun Saved Style

btn--black-solid


Secondary

Shogun Saved Style

btn--white-solid


Tertiary (Dark)

Shogun Saved Style

btn--black-ghost


Tertiary (Light)

Shogun Saved Style

btn--white-ghost


Spacing


Text

All text elements, including Headers, Display and Paragraph styles, include 24px of margin-top and margin-bottom.

This is a regular text element with 24px of margin above and below. I've added a border so you can see how much space is above and below the text.

Stacking text elements

Two text boxes stacked on top of each other will produce 48px of margin between lines of text.

This text is in its own text element

This text is also in its own text element

Using one text element

Using one textbox for multiple lines of text will cause these 24px margins to collapse into each other, resulting in only 24px of margin between each line instead of 48px.

The following lines of text are all inside the same text element

This means the margin-top of this line, and the margin-bottom of the line above collapse into each other.

It also works with headers

Pretty sweet, eh?

Using negative margin to bring text elements closer

If you have two text elements stacked, but want only 24px of margin between them, you can apply -24px of margin to one element to bring them closer. This would be useful when you need to use a custom css class on one line of text.

This is a regular paragraph in its own text element with -24px margin-bottom applied

This is another text element with p-small applied to the custom css class. Notice that there's only 24x of space between both text elements instead of 48px.

Follow the baseline grid

To keep vertical rhythm of text and elements, aim to keep vertical margins and paddings within the 12px grid.

This means you can make adjustments using numbers that are divisible by 24, such as 6px, 12px, 18px, 24px and so on.

Overline

This text element has -36px of top margin

This text element also has -36px of top margin to bring it closer to the header above. Since 24 + 12 = 36, this size still works and keeps to the 12px baseline grid.

While text may not line up perfectly to the grid, it still creates consistent spacing that users will find easy on the eyes.


Columns

Make sure columns are set to 32px gutters. Shogun defaults to 30 and this is easily missed. If you need smaller gutters, try 24px, 16px or 12px to keep spacing rhythm.

32px Gutters

32px Gutters

32px Gutters

32px Gutters

32px Gutters

32px Gutters

Pro Tip

Place content inside a section with a max-width of 480px and margin left and right set to auto. This will keep content centered inside a column without creating unnecessary space when scaling down to mobile. Try scaling your window down to see how it behaves.

Images placed inside a column will set the overall height for all columns. By setting our columns to Equal Column Heights, it ensures the content on the left stays centered with the image.

Sections and Containers

When building sections on a page, all content should be placed inside of two elements:

  1. Section element, which sets margins for the top, bottom, left and right of the section.
  2. Container, which controls the max-width of the element. These two elements will ensure that content has proper margins from desktop down to mobile.

All content should be contained inside of these two sections. The only exception would be images that you would like to remain full width.

Creating the Section element
  1. Drag a new Shogun section onto the page
  2. In the right toolbar, click the "Saved Styles" dropdown
  3. Choose from any of the options labeled "section--x" where x = a list of numbers.
  4. Not sure where to start? Choose section--6% by default and adjust as needed.
Creating the Container element
  1. Once you've selected a "section--x" from Saved Styles, drag another Shogun section inside of the section you just created. (Use the "Toggle Dropzones" in the top bar to make this easier.)
  2. In the right toolbar, click the "Saved Styles" dropdown
  3. Choose from any of the options labeled "container--x" where x = a number.
  4. Use container--1600 for all sections to prevent content from over stretching on large screens. Use container--960 for content with long form text content or when you need a smaller width.

Understanding the section--x styles

Each "section--x" style is named to describe the margins for each section based on the CSS Margin Shorthand Property.

 
So, here is how it works:

If the section name has four values:

section--3%-6%-3%-6%
top margin is 6%
right margin is 3%
bottom margin is 6%
left margin is 3%

If the section name has two values:

section--3%-6%
top & bottom margin is 3%
right & left margin is 6%

If the section name has one value:

section--6%
all margins are set to 6%

Content would go in here

Content would go in here

Content would go in here

Content would go in here

Content would go in here

Content would go in here

Content would go in here

Content would go in here

Content would go in here

Content would go in here

Content would go in here

Content would go in here

Content would go in here

Content would go in here


×
×
×