Skip to content

Livepeer

Brand guidelines

The mark, the green, the type, and the few rules that keep them looking right. If you're putting Livepeer on something, start here.

Download the kitDesign guidelines

Three forms. Every file is the source vector.

  • LockupSymbol and wordmark in fixed relation.

    SVG ↓

  • SymbolWhere the name is already established.

    SVG ↓

  • WordmarkWherever the name has to be read.

    SVG ↓

Using the mark

Give it room, keep it legible, and leave it alone.

Clear spaceOne symbol width, every side.

32px

Minimum sizeSymbol and lockup 32px. Wordmark alone 24px.

Below 32px the symbol's squares close up, so it is not an icon. Black or white, never a gradient, never a shadow, never rebuilt from the parts. If it is not in the kit, it is not the mark.

Colour

One colour is ours. Everything else is a role the theme resolves.

Livepeer greenMarks, diagrams, artwork, motion. Never a button, link or state.

color(display-p3 0.04 0.74 0.49)
  • background
  • foreground
  • card
  • muted
  • primary
  • secondary
  • accent
  • border
  • input
  • ring
  • destructive

Type

Two faces. One for words, one for values.

  • The open inference network

    Interfont-sansEverything. Headings, body, product, docs.

  • 0x1a2b · 128 GPUs · 04:21:07

    Geist Monofont-monoCode, paths, IDs, timestamps.

  1. text-ui-caption12Livepeer
  2. text-ui-body14Livepeer
  3. text-reading-body16Livepeer
  4. text-page-title32Livepeer
  5. text-display-sm36Livepeer
  6. text-display-md48Livepeer
  7. text-display-lg60Livepeer

The system

This page is the summary. The full guidelines, colour and type roles, spacing and composition, have a page of their own.