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
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
navbar
navabar
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
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>