WE ARE ROSIE STYLEGUIDE

FOR
We Are Rosie
TYPEFACES
Univers 75, Inclusive Sans, Summertime Stories, EB Garamond
Aa
CHARACTERS

ABCDEFGHIJKLMNOPQRSTUVWXZ
abcdefghijklmnopqrstuvwxyz
0123456789

A tool to help serve as a guide to how visual elements are used to communicate the brand

we ar rosie
STYLEGUIDE
MADE BY  THE BLACKPEPPER STUDIO

Typography

type system
H0
FONT FAMILY: CHARTONBURG
DESKTOP: 4REM/1.1 LINE HEIGHT
TABLET: 3.5REM/1.1 LINE HEIGHT
MOBILE(LANDSCAPE): 3REM/1.1 LINE HEIGHT
MOBILE(PORTRAIT): 2REM/1.1 LINE HEIGHT

H0

ALL H1 HEADINGS
FONT FAMILY: CHARTONBURG
DESKTOP: 4REM/1.1 LINE HEIGHT
TABLET: 3.5REM/1.1 LINE HEIGHT
MOBILE(LANDSCAPE): 3REM/1.1 LINE HEIGHT
MOBILE(PORTRAIT): 2REM/1.1 LINE HEIGHT

Heading 1

ALL H2 HEADINGS
FONT FAMILY: CHARTONBURG
DESKTOP: 4REM/1.1 LINE HEIGHT
TABLET: 3.5REM/1.1 LINE HEIGHT
MOBILE(LANDSCAPE): 3REM/1.1 LINE HEIGHT
MOBILE(PORTRAIT): 2REM/1.1 LINE HEIGHT

Heading 2

ALL H3 HEADINGS
FONT FAMILY: CHARTONBURG
DESKTOP: 4REM/1.1 LINE HEIGHT
TABLET: 3.5REM/1.1 LINE HEIGHT
MOBILE(LANDSCAPE): 3REM/1.1 LINE HEIGHT
MOBILE(PORTRAIT): 2REM/1.1 LINE HEIGHT

Heading 3

ALL H4 HEADINGS
FONT FAMILY: CHARTONBURG
DESKTOP: 4REM/1.1 LINE HEIGHT
TABLET: 3.5REM/1.1 LINE HEIGHT
MOBILE(LANDSCAPE): 3REM/1.1 LINE HEIGHT
MOBILE(PORTRAIT): 2REM/1.1 LINE HEIGHT

Heading 4

PARAGRAPH
FONT FAMILY: CHARTONBURG
DESKTOP: 4REM/1.1 LINE HEIGHT
TABLET: 3.5REM/1.1 LINE HEIGHT
MOBILE(LANDSCAPE): 3REM/1.1 LINE HEIGHT
MOBILE(PORTRAIT): 2REM/1.1 LINE HEIGHT

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

ALL LINKS
FONT FAMILY: CHARTONBURG
DESKTOP: 4REM/1.1 LINE HEIGHT
TABLET: 3.5REM/1.1 LINE HEIGHT
MOBILE(LANDSCAPE): 3REM/1.1 LINE HEIGHT
MOBILE(PORTRAIT): 2REM/1.1 LINE HEIGHT
Text Link
TITLE
FONT FAMILY: CHARTONBURG
DESKTOP: 4REM/1.1 LINE HEIGHT
TABLET: 3.5REM/1.1 LINE HEIGHT
MOBILE(LANDSCAPE): 3REM/1.1 LINE HEIGHT
MOBILE(PORTRAIT): 2REM/1.1 LINE HEIGHT
This is some text inside of a div block.
TITLE
small
FONT FAMILY: CHARTONBURG
DESKTOP: 4REM/1.1 LINE HEIGHT
TABLET: 3.5REM/1.1 LINE HEIGHT
MOBILE(LANDSCAPE): 3REM/1.1 LINE HEIGHT
MOBILE(PORTRAIT): 2REM/1.1 LINE HEIGHT
This is some text inside of a div block.
SUBTITLE
FONT FAMILY: CHARTONBURG
DESKTOP: 4REM/1.1 LINE HEIGHT
TABLET: 3.5REM/1.1 LINE HEIGHT
MOBILE(LANDSCAPE): 3REM/1.1 LINE HEIGHT
MOBILE(PORTRAIT): 2REM/1.1 LINE HEIGHT
This is some text inside of a div block.
label
FONT FAMILY: CHARTONBURG
DESKTOP: 4REM/1.1 LINE HEIGHT
TABLET: 3.5REM/1.1 LINE HEIGHT
MOBILE(LANDSCAPE): 3REM/1.1 LINE HEIGHT
MOBILE(PORTRAIT): 2REM/1.1 LINE HEIGHT
This is some text inside of a div block.
labEl
small
FONT FAMILY: CHARTONBURG
DESKTOP: 4REM/1.1 LINE HEIGHT
TABLET: 3.5REM/1.1 LINE HEIGHT
MOBILE(LANDSCAPE): 3REM/1.1 LINE HEIGHT
MOBILE(PORTRAIT): 2REM/1.1 LINE HEIGHT
This is some text inside of a div block.
label
X-small
FONT FAMILY: CHARTONBURG
DESKTOP: 4REM/1.1 LINE HEIGHT
TABLET: 3.5REM/1.1 LINE HEIGHT
MOBILE(LANDSCAPE): 3REM/1.1 LINE HEIGHT
MOBILE(PORTRAIT): 2REM/1.1 LINE HEIGHT
This is some text inside of a div block.
field-label
FONT FAMILY: CHARTONBURG
DESKTOP: 4REM/1.1 LINE HEIGHT
TABLET: 3.5REM/1.1 LINE HEIGHT
MOBILE(LANDSCAPE): 3REM/1.1 LINE HEIGHT
MOBILE(PORTRAIT): 2REM/1.1 LINE HEIGHT
This is some text inside of a div block.
CAPTION
FONT FAMILY: CHARTONBURG
DESKTOP: 4REM/1.1 LINE HEIGHT
TABLET: 3.5REM/1.1 LINE HEIGHT
MOBILE(LANDSCAPE): 3REM/1.1 LINE HEIGHT
MOBILE(PORTRAIT): 2REM/1.1 LINE HEIGHT
This is some text inside of a div block.
rich-text-block
FONT FAMILY: CHARTONBURG
DESKTOP: 4REM/1.1 LINE HEIGHT
TABLET: 3.5REM/1.1 LINE HEIGHT
MOBILE(LANDSCAPE): 3REM/1.1 LINE HEIGHT
MOBILE(PORTRAIT): 2REM/1.1 LINE HEIGHT

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

‍

Static and dynamic content editing

Branding and Guidelines The Blackpepper Studio

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

ThE blackpepper studio
STYLEGUIDE
MADE BY  THE BLACKPEPPER STUDIO

Color Palette

Primary colours
ROSIE red / HEX: ea3c1f
rs-red
rosie white / HEX: FFFff
rs-white
rosie black / HEX: 000000
rs-black
rosie yellow / HEX: fffa00
rs-yellow
Secondary colours
rosie blue / HEX: 003acc
rs-blue
rosie GREen / HEX: 003acc
rs-GREen
rosie pink / HEX: fecee7
rs-pink
ThE blackpepper studio
STYLEGUIDE
MADE BY  THE BLACKPEPPER STUDIO

Components

navbar
navabar
footer
lagos
12:00 PM
London
12:00 PM
© 2022 THE\BLACKPEPPER STUDIO
ALL IMAGES © OF THEIR RESPECTIVE OWNERS.
socials
instagramtwitter
footer
button
Button Text
submit-btn
This is some text inside of a div block.
Variant - base
This is some text inside of a div block.
VARIANT - SECONDARY
form input - TEXTFIELD
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
TEXT-FIELD
form input - TEXTAREA
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
TEXTAREA
form input - checkbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
checkbox-field
ThE blackpepper studio
STYLEGUIDE
MADE BY  THE BLACKPEPPER STUDIO

Resources

logo
image stylING
Magazine Mockup for NDAANE Editorial
iconography
ThE blackpepper studio
STYLEGUIDE
MADE BY  THE BLACKPEPPER STUDIO

Contact

Have a question about this Style Guide? Or would like to explore further opportunities for collaboration? The Blackpepper Studio team is here to help you. Before you start, please be sure that you have comprehensively gone through the individual style guide tabs to see if we’ve already got your questions/concerns covered.

You can contact us the following ways:
‍
Enquiries regarding Web + Digital <nkenna@theblackpepperstudio.com>

Instagram @the.blackpepperstudio
Twitter @TBPStudio

Website: www.theblackpepperstudio.com

Further info
This website has been built for optimum support for screen sizes 8000 - 320px in the following browsers:
IE11
Microsoft Edge <latest>
Firefox <latest>
Chrome <latest>
Safari <latest>

ThE blackpepper studio
STYLEGUIDE
MADE BY  THE BLACKPEPPER STUDIO