Brand kit

The Yousie brand, ready to use.

The Yousie logo, colours and typeface, with the few rules for using them. Take what you need for an article, a deck or a partner page.

Download the kit

ZIP, 211 KB, 11 files

Usage

Give it room. Leave it as it is.

Four short rules keep the logo clear wherever it lands: space around it, a size it can be read at, the right version for the ground, and no changes.

Clear space

Keep a margin of x on every side, free of text, images and the edge of the page.

Wordmark: x is the height of the lowercase letters.
Icon: x is a quarter of its width.

Minimum size

Shown here at their smallest. Where the wordmark would run narrower, use the icon.

  • Wordmark64 px wide on screen 18 mm wide in print
  • Icon16 px wide on screen 5 mm wide in print

Do

  • Use the files from this page, as supplied.
  • Put the ink wordmark on light grounds and the white one on ink or violet.
  • Keep the clear space around it empty.
  • Write the name as Yousie in running text: capital Y, one word.

Do not

  • Stretch or squash it.
  • Rotate or tilt it.
  • Recolour it or fill it with a gradient.
  • Retype it in another font or weight.

Colour

Ink, violet and lavender.

Violet leads, ink carries the words, and lavender and white keep the page light. Select a swatch to copy its hex value.

Core

  • Violet

    #5B38F0RGB 91 56 240

    The brand colour: the icon tile, labels and links.

  • Ink

    #0A0B14RGB 10 11 20

    The wordmark, headlines and primary buttons.

  • Lavender

    #EBE7FFRGB 235 231 255

    Pill labels and the tint behind icons.

  • Background

    #F7F6FBRGB 247 246 251

    The ground every page sits on.

  • Paper

    #FFFFFFRGB 255 255 255

    Cards and anything raised off the ground.

Supporting

  • Violet mid

    #7A59FFRGB 122 89 255

    Violet buttons and the spark strokes.

  • Violet lite

    #A28AFFRGB 162 138 255

    Highlights on lavender. Never for text.

  • Ink soft

    #454B5FRGB 69 75 95

    Body copy.

  • Ink mute

    #646A7ERGB 100 106 126

    Captions and notes.

  • Rule

    #E3E0EFRGB 227 224 239

    Hairlines and card borders.

Accent gradient

Find apps. Create content. Get paid.

The violet run that closes a headline. Three stops at 92 degrees: #6842F5, #7A59FF, #8A6BFF.

linear-gradient(92deg, #6842f5 0%, #7a59ff 55%, #8a6bff 100%)

Type

Inter, heavy and tight.

One family sets everything. Headlines are bold with tight tracking, body copy is regular. Inter is open source, under the SIL Open Font License.

Inter

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

  • Regular 400Body copy
  • Medium 500Navigation, small labels
  • Semibold 600Buttons
  • Bold 700Headlines
  • Extra bold 800The wordmark only
Get Inter
  • Display

    Weight
    Bold 700
    Size
    40 to 99 px
    Tracking
    -0.05em
    Line height
    0.98

    Find apps. Create content. Get paid.

  • Headline

    Weight
    Bold 700
    Size
    32 to 56 px
    Tracking
    -0.05em
    Line height
    0.98

    From content to cash. Simple.

  • Title

    Weight
    Bold 700
    Size
    22 to 28 px
    Tracking
    -0.035em
    Line height
    1.2

    Browse collabs

  • Lede

    Weight
    Regular 400
    Size
    17 to 26 px
    Tracking
    0
    Line height
    1.45

    Yousie connects creators with the best app brands.

  • Body

    Weight
    Regular 400
    Size
    16 px
    Tracking
    0
    Line height
    1.5

    Discover collabs, create content, and earn for every download or action.

  • Label

    Weight
    Bold 700, uppercase
    Size
    12 to 16 px
    Tracking
    +0.1em
    Line height
    1.25

    How it works