Your RPL should include swatches of the website's colors and their color value (hexadecimal, RGB, HSL, and so on). If you are using a CSS preprocesser, such as LESS or Sass, include the color's variable name as well. It is also important to know when and how to use these colors and which colors should never be paired.

Example: Google style guide (https://developers.google.com/web/fundamentals/resources/styleguide/index):

Make sure to include what font faces your website uses. As we saw in Chapter 2, The Main Stage – Building Responsive Layouts, font sizes may be changed across screen sizes to help with legibility. If they do, make sure you document these changes.

Example: MailChimp's UX style guide:

Your website may be using icons to help with navigation and/or tags. If it does, make sure to catalog what icons are being used and how to embed them in the future. Some websites use an icon font and use class names to embed the icons. Icons can also be responsive. Responsive icons are more detailed on larger screens and less on small. Check out Iconic (https://useiconic.com/) to see an example of what responsive icons can do.

Example: Code for America style guide (https://style.codeforamerica.org/):

All the patterns we went over in this book have been using horizontal media queries. Vertical media queries are exactly what you think they are. They are queries that adjust on the viewport's height, not the width. They are easy to implement too. We are used to writing horizontal media queries like this:

@media screen and (min-width: 600px) {
    …CSS…
}

Vertical media queries look like this:

@media screen and (min-height: 600px) {
    …CSS…
}

Yeah, it's not that different. Lagunitas Brewing Company uses vertical media queries for the age gate (asking if the user is older than 21). On taller browsers, the age gate has a few paragraphs of text welcoming the user. But on shorter browsers, the age gate only has the prompt and buttons. Since there is less vertical space for the age gate, it condenses.