SAGE EAST

FOR
SAGE EAST
TYPEFACES
Romie
Aa
CHARACTERS

ABCDEFGHIJKLMNOPQRSTUVWXZ
abcdefghijklmnopqrstuvwxyz
0123456789

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

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.
SUBTITLE-alt
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.

Color  Palette

brand colours
BG BLACK/ HEX: #000000
BG-BLACK
BG WHITE/ HEX: #dCCEB3
BG-WHITE
BG sand/ HEX: #B5650E
BG-SAND
state colours
success state/ HEX: 53A653
success-c
warning state/ HEX: F7D6D7
warning-c
error state/ HEX: 792710
error-c

Components

footer
footer
button
Button Text
submit-btn
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

Resources

logo
image stylING
TikTok Denada
iconography

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 Brand Identity  <asmah@theblackpepperstudio.com>
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 5000 - 320px in the following browsers:
IE11
Microsoft Edge <latest>
Firefox <latest>
Chrome <latest>
Safari <latest>