Brand

Using the Livepeer brand

What you need to represent Livepeer accurately — the marks and how to place them, the one colour that is ours, and the three type roles.

The mark

Three forms, one relationship. Take them from here rather than lifting them off a screenshot — every file below is the source vector.

Symbol
Favicons, avatars, app icons — anywhere the name is already established.
Black SVG White SVG
Wordmark
The default. Use it wherever the name has to be read.
Black SVG White SVG
Lockup
Symbol and wordmark in fixed relation. Never rebuild it by hand.
Black SVG White SVG

Placing it

Clear space: Keep space equal to the symbol's width on all four sides. Nothing — type, rules, image edges — enters it.
Minimum size: Symbol at 16px. Wordmark and lockup at 24px tall. Below that the counters close up and it stops reading as the mark.
Colour: Black or white only. The mark is never green, never gradient, never tinted to match a background.
Never: Stretch, rotate, outline, add a shadow, reorder the lockup, or rebuild it from the symbol and wordmark by hand.

Download the brand kit

ZIP · marks, colour, and usage notes

= symbol width

Colour

One brand colour, and a set of roles that carry everything else. The roles are the interface — they resolve differently in light and dark, which is why this page shows the role rather than a hex value.

Livepeer green

color(display-p3 0.04 0.74 0.49)

Green is not an affordance colour. Never a button, link, hover, focus, selected state, or success message. It is non-interactive brand expression only — marks, diagrams, artwork, and branded motion. Actions use primary.

Roles

--backgroundThe canvas.
--foregroundDefault text.
--cardA self-contained object.
--mutedSubdued regions and supporting text.
--primaryThe default action.
--secondaryLower-emphasis actions.
--accentState changes.
--borderSeparation.
--inputControl edges.
--ringVisible focus.
--destructiveDestructive actions and errors.

chart-1 through chart-5 distinguish ordered data series and are never an alternative action palette. Do not add a second token layer or hard-code a colour for a role the theme already covers.

Type

Three faces, split by role rather than by hierarchy. Which one you reach for is decided by what the text is doing, not by how large it is.

The open inference network
Inter
font-sans
The default. Product UI, navigation, forms, data, docs, ordinary headings, and body copy. A heading element does not imply a display face.
The open inference network
Favorit Pro
font-display
Opt-in brand display type, for major marketing statements and editorial titles. Never for routine product UI.
0x1a2b · 128 GPUs · 04:21:07
Favorit Mono
font-mono
Code, commands, paths, IDs, timestamps, and short technical annotations — normally at text-xs or text-sm. Never explanatory prose.

The scale

Each utility carries its own size, line height, weight, and tracking. Add the font-family utility separately, and reach for a responsive pair — text-display-sm sm:text-display-md — rather than interpolating a one-off size.

Role	Utility	Size / leading	Weight	Tracking
UI caption	text-ui-caption	12 / 16	500	—
UI body	text-ui-body	14 / 20	400	—
Reading body	text-reading-body	16 / 28	400	—
Page title	text-page-title	32 / 0.98	300	-0.025em
Display small	text-display-sm	36 / 0.98	300	-0.045em
Display medium	text-display-md	48 / 0.98	300	-0.045em
Display large	text-display-lg	60 / 0.98	300	-0.045em
Display fluid	text-display-fluid	40→64 / 0.98	300	-0.045em

The system

This page is the summary. The design system itself — tokens, components, and the full guidance — is the Livepeer UI registry.

The mark

Symbol

Wordmark

Lockup