top of page
mro-style-guide-herobanner.png

OUR BRANDING STORY

About

MARYRUTH'S UX/UG GUIDELINES WERE CREATED TO BE A DESIGN AND DEVELOPMENT TOOL IN ORDER TO BRING COHESION TO OUR BRANDED DIGITAL EXPERIENCE. THIS IS AN OVERVIEW OF WHAT IS INCLUDED IN THE UX/UI GUIDELINES I CREATED FOR MARYRUTH'S. IT WAS INTRODUCED ALONG WITH A REVAMPED DESIGN AND DEVELOPMENT PROCESS, WHICH ALLOWED US TO STREAMLINE OUR PROCESSES AND DELIVER FINISHED PROJECTS FASTER THAN WE EVER HAD PREVIOUSLY.

Color Palette

#fdc2b9

#e4214c

#b0003d

#f0fbff

#acd1e7

Logo

mro-logo-white.png
mro-logo-white.png

Graphic Elements

We use these custom illustrations, dynamic animations, playful graphics, and captivating videos to solidify the brand identity throughout the website, email marketing campaigns, on the app, and in paid ads. It strengthens the way the user views and interacts with the brand and helps to create immersive and engaging digital experiences.

Typography

Aa

Font: Montserrat / Header & Short format Running Text

A B C D E F G H I J K L M

1 2 3 4 5 6 7 8 9

N O P Q R S T U V X Y Z W

Aa

Font: Hurricane / Accent Header

A B C D E F G H I J K L M

N O P Q R S T U V X Y Z W

1 2 3 4 5 6 7 8 9

Aa

Font: Mulish / Long format running text

A B C D E F G H I J K L M

N O P Q R S T U V X Y Z W

1 2 3 4 5 6 7 8 9

Art Direction

MARYRUTH'S IMAGERY PLAYS A VITAL ROLE IN HOW A USER UNDERSTANDS A BRAND.  UPDATED IMAGES WILL BE CRUCIAL TO SUPPORT OUR ACHOR BACKGROUND HUES.  IMAGES SHOULD BE COLORFUL, UPLIFTING, AND HAPPY.  THE IMAGERY SHOULD BE PRESENTED IN A PHOTO-REALISTIC WAY, PORTRAYING PROFESSIONALISM AND AUTHENTICITY. GRAPHICS SHOULD BE ELEVATED, CLEAN, AND INVITING, JUST LIKE THE PRODUCTS.

Every image should capture the inviting and playfulness of MaryRuth Organics, and utilize colors that our customers associate with joy, such as watermelon pink and sunshine yellow. Backgrounds should incorporate a color story that supports/aligns with the colors of the products themselves.

style-guide-para-scroll-option2.png

Product Photography

Product Renders

mro-style-guide-prod-photography-slider-2.png
mro-style-guide-prod-render-slider-1.png
style-guide-large-image-holder6.png

Set Design

mro-style-guide-set-design-portrait.png
mro-style-guide-set-design-landscape.png
style-guide-large-image-holder2.png

Website

Lifestyle Imagery

Let's Connect!

icons8-linkedin-32.png
icons8-globe-50.png
icons8-github-50.png

Stacy Grenier
San Fran, CA
sngrenier@gmail.com

View Resume

bottom of page