Brand

Guidelines

02

Logos & Usage

Knowing which to choose and use

The brand lockup of logomark + wordmark is the preferred usage for partnerships, co-branding, and in media articles.

Brand Logo (horizontal)

  • Do not recreate
  • Always use the logo files provided in the brand kit
  • The primary logo for the brand is the logomark + wordmark
  • The primary logo should always appear in this size ratio
  • The wordmark should always be ravenclaw, black or white

Brand Logo (stacked)

  • Do not recreate
  • Always use the logo files provided in the brand kit
  • Avoid using the stacked logo at small sizes
  • The stacked logo is for large-scale use or where horizontal space isn’t available

Logo construction and clear space

  • For clear space around the logo, use the lowercase t as a guide
  • The space between the logomark and the wordmark is equal to 20% of the height of the logomark

Logos on background colors

  • The full-color logo should only be used on light or dark backgrounds
  • Do not use the full-color logo on top of a photo or gradient unless it sits on a very light or very dark area of the image
  • In cases where we need a single-color logo, please use only black or white for the logomark and the wordmark

03

Colors

Basically a little box of crayons

Our brand palette consists of four core hues used as solids and gradients. The primary background color is Ravenclaw.

#FF1493

Deep Pink

#FF449D
#FF60A8
#FF78B2
#FF8DBD
#FFA2C8
#FFB5D3
#DE107F
#BE0C6C
#9E0859
#800547
#630336
#480125
#652EC7

Purple Emperor

#7149CE
#7F60D5
#8D75DC
#9C89E2
#AB9DE8
#BBB0EE
#5727AD
#491F93
#3C187A
#2F1262
#220B4C
#170636
#00C2BA

Pristine Oceanic

#42C8C1
#61CFC8
#79D5CE
#8FDBD5
#A3E1DC
#B6E7E3
#00A8A1
#008F89
#007772
#00605C
#004946
#003432
#82E0BF

Cabbage

#90E3C5
#9EE7CC
#ABEAD2
#B8EDD8
#C4F0DF
#D0F3E5
#70C3A6
#5FA68D
#4E8A75
#3E705E
#2F5648
#203E33

04

Visuals

Picture this and this and that

05

Typography

Because the Internet is mostly made of words

Lato

Lato is the font we use as our secondary typeface in paragraph text and small UI elements. In cases where Outfit is unavailable, Lato may also be substituted for headlines.

The name Lato means “summer” in Polish, and the font reflects the designer’s vision of a modern and friendly typeface that can work well in various situations. Lato has a classical proportion and structure, but with some subtle features that give it a warm and humanist feel.

Outfit

Outfit is the font used for headlines on marketing and product web experiences.

It adds a geometric touch with its clean-cut appearance, enhancing Lato’s humanist design for a modern and streamlined aesthetic.

Outfit is a sans serif font that was designed by Kevin Richey and released in 2018. The font was inspired by the Bauhaus movement, which emphasized simplicity, functionality, and geometric shapes. Outfit has a modular structure with sharp angles and uniform strokes, creating a sleek and futuristic look. Outfit is compatible with most devices and platforms, and supports multiple languages and glyphs.

Type Scale

Outfit for headings and Lato for body copy

Heading - H1

Font size: 48px (3em)
Line height: 56px

Heading - H2

Font size: 40px (2.5em)
Line height: 44px

Heading - H3

Font size: 32px (2em)
Line height: 36px

Heading - H4

Font size: 24px (1.5em)
Line height: 28px

Heading - H5

Font size: 20px (1.25em)
Line height: 24px

Heading - H6

Font size: 16px (1em)
Line height: 20px

Body

Font size: 16px (1em)
Line height: 20px