ui style guide
by digital product design team

logos

MedMen is always a single word with an uppercase 'M'. Name is never split into two words and any space.

Primary Logo

Logo with Store Name

White logo w/Red Background

White logo w/Black Background

App Icons


MMM

MMM QA

colors

The MedMen corporate palette consists of three colors: MedMen red, black, and white. MedMen red is the core of our brand identity and should appear whenever possible for members to immediately identify our brand.

Main Colors

Primary Red

#960709

Primary Black

#222222

Primary White

#FFFFFF

Accent Colors

Dark Red

#550505

Pink

#FF9F00

Orange

#FF9F00

Dark Gray

#7C7C7C

Medium Gray

#AAAAAA

Medium Light Gray

#DDDDDD

Light Gray

#F4F4F4

Product Colors

High CBD

#00563F

Hybrid

#873299

Indica

#000A8B

Indica Dominent

#00A8E1

Sativa

#FFB819

Sativa Dominent

#EA1D76

typography

We use Avenir Next Family (Regular,Demin Bold, Bold) for iOS device, giving text in MedMen a fun and friendly feel to match our brands.

Avenir Next

Title 1
Font size : 18px
Bold
Title 2
Font size : 18px
Denim Bold
Title 3
Font size : 15px
Denim Bold
Title 4
Font size : 14px
Bold
Title 5
Font size : 13px
Denim Bold / Bold
Content
Font size : 12px
Regular
Tab Menu / Button
Font size : 12px
Denim Bold
Text Button
Font size : 11px
Denim Bold / Bold
Input Label
Font size : 10px
Regular
Tag / Caption
Font size : 10px
Denim Bold
Small Caption
Font size : 9px
Denim Bold
Small Tag
Font size : 8px
Denim Bold

icongraphy

Our iconography style aligns with our personality and echoes the foundational elements of our brands. Our product and UI icons are characterized by simple, flat art with a thin line style that aligns with our logos and fonts.

Icons on Color Background

Icons on White Background

buttons

Button sizes and behavior remain consistent across all platforms and screen sizes.

Primary Button

  • Width : 160px
  • Height : 40px
  • Radius : 50px
  • Position : Sticky on the bottom
  • Text : 12px / #FFFFFF




Checkout Button

  • Width : 65px
  • Height : 45px
  • Radius : 50px
  • Background : #222222 or #FFFFFF
  • Text : 12px

Secondary Button

  • Width : 300px
  • Height : 50px
  • Radius : 50px
  • Text : 12px
Circle
Button
Circle
Button
Circle
Button

Circle Button

  • Width : 60px
  • Height : 60px
  • Radius : 50%
  • Text : 9px / Bold

input

Whether it's a web form, a challenge in a Lesson or speech functionality, our input fields are designed to minimize friction between the learner and the action.

navigation

There 4 types of navigation sucah as Hamburger Menu, Primary, Process, and Tab Navigation. We are using these each pages depending on contents.