What is a UI Style Guide?

User Interface Style Guides are a design and development tool that brings cohesion to a digital product’s user interface and user experience.

At their core, they:

• Record all of the design elements and interactions that occur within a product or website.
• List crucial UI components such as typography, colors, buttons, and other brand elements.
• Align team members on design structure, style, and proper use of brand elements.

Typography

Header copy is Work Sans, sans-serif.

Body copy is Roboto, sans-serif.

*EMs are relative to their parent’s font size. REMs are relative to a base font-size. This is important when intermediate containers change font sizes. Child elements with EMs will be affected, those using REMs will not. Our HTML element has a font-size attribute of 62.5% on our stylesheet, this means 10px is equal to 1rem when normally 16px is equal to 1rem.
Learn more about REMs in CSS

*Header copy has a 2.5rem or 25px margin on the top and bottom. Body copy has a 2rem or 20px margin on the bottom after each paragraph. See a preview of the spacing below.

H1 | Preview Title

H2 | Preview Title

H3 | Preview Title

H4 | Preview Title

H5 | Preview Title

H6 | Preview Title

Body, Paragraph | Sample copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Ordered list | Sample numbered list

1. Preview item
2. Preview item
3. Preview item

Unordered list | Sample bullet point list

• Preview item
• Preview item
• Preview item

Blockquote | Sample copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ryan Cronin, Sr. Web Developer

Small | Sample copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Colors

Handpicked color scheme to fit our needs.

Buttons

Defined using link structures, we have two general styles for our buttons: our solid theme color and an outlined version of the same. Both use a solid black hover effect with white copy. See the CSS preview of our button classes below for more details.

.button {
  font-size: 16px; /* add browser support for REM font-size */
  font-size: 1.6rem;
  background-color: #cd2653;
  border: 2px solid;
  border-color: #cd2653;
  padding: 1em 1.44em;
  text-transform: initial;
  transition: 0.3s;
}

.button.outlined {
  background-color: transparent;
  color: #cd2653;
}

Preview button styles.

<div>
  <a class="button">normal button</a>
</div>

<div>
  <a class="button outlined">outlined button</a>
</div>

*The UI Style Guide also serves as our brand guidelines for https://ryancronin.wpengine.com.