> ## Documentation Index
> Fetch the complete documentation index at: https://na-36-merge-docs-v2-dev-draft-into-docs-v2-20260603.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Media Kit

> This page contains the official Livepeer media kit, including logos, colours, and brand guidelines with download links.

export const CenteredContainer = ({children, maxWidth = "800px", padding = "0", preset = "default", width = "", minWidth = "", marginRight = "", marginBottom = "", textAlign = "", style = {}, className = "", ...rest}) => {
  const presets = {
    default: {},
    fitContent: {
      width: "fit-content",
      minWidth: "fit-content"
    },
    readable70: {
      width: "70%",
      minWidth: "fit-content"
    },
    readable80: {
      width: "80%",
      minWidth: "fit-content"
    },
    readable90: {
      width: "90%"
    },
    wide900: {
      maxWidth: "900px"
    }
  };
  const presetStyle = presets[preset] || presets.default;
  return <div className={className} style={{
    maxWidth: presetStyle.maxWidth || maxWidth,
    margin: "0 auto",
    padding: padding,
    ...presetStyle.width ? {
      width: presetStyle.width
    } : {},
    ...presetStyle.minWidth ? {
      minWidth: presetStyle.minWidth
    } : {},
    ...width ? {
      width
    } : {},
    ...minWidth ? {
      minWidth
    } : {},
    ...marginRight ? {
      marginRight
    } : {},
    ...marginBottom ? {
      marginBottom
    } : {},
    ...textAlign ? {
      textAlign
    } : {},
    ...style
  }} {...rest}>
      {children}
    </div>;
};

export const FlexContainer = ({children, direction = "row", gap = "var(--lp-spacing-4)", align = "flex-start", justify = "flex-start", wrap = false, marginTop = "", marginBottom = "", style = {}, className = "", ...rest}) => {
  return <div className={className} style={{
    display: "flex",
    flexDirection: direction,
    gap: gap,
    alignItems: align,
    justifyContent: justify,
    flexWrap: wrap ? "wrap" : "nowrap",
    ...marginTop ? {
      marginTop
    } : {},
    ...marginBottom ? {
      marginBottom
    } : {},
    ...style
  }} {...rest}>
      {children}
    </div>;
};

export const InlineImageCard = ({children, imgProps, imgStyle, cardProps, style, className = "", ...rest}) => {
  if (!imgProps?.src) {
    console.warn("[InlineImageCard] Missing required prop: imgProps.src");
    return null;
  }
  return <Card className={className} {...cardProps} {...rest}>
      <div style={{
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'space-between',
    height: '100%',
    marginRight: '-1rem',
    width: 'calc(100% + 1rem)',
    ...style
  }}>
        <img {...imgProps} style={imgStyle ? imgStyle : {
    maxHeight: '120px',
    width: 'auto'
  }} />
        {children}
      </div>
    </Card>;
};

export const WidthCard = ({width = '80%', children, cardProps, className = "", style = {}, ...rest}) => {
  return <div className={className} style={{
    display: 'flex',
    justifyContent: 'center',
    minWidth: 'fit-content',
    ...style
  }} {...rest}>
      <div style={{
    width: width
  }}>
        <Card {...cardProps}>{children}</Card>
      </div>
    </div>;
};

export const CustomDivider = ({color = "var(--lp-color-border-default)", middleText = "", spacing = "default", style = {}, className = "", ...rest}) => {
  const spacingPresets = {
    default: {
      margin: "24px 0"
    },
    overlap: {
      margin: "-1rem 0 -1rem 0"
    },
    tight: {
      margin: "0 0 -1rem 0"
    },
    section: {
      margin: "0 0 -2rem 0"
    },
    sectionOverlap: {
      margin: "-1rem 0 -2rem 0"
    },
    deepOverlap: {
      margin: "-1rem 0 -1.5rem 0"
    }
  };
  const spacingStyle = spacingPresets[spacing] || spacingPresets.default;
  return <div role="separator" aria-orientation="horizontal" className={className} style={{
    display: "flex",
    alignItems: "center",
    ...spacingStyle,
    fontSize: style?.fontSize || "16px",
    height: "fit-content",
    ...style
  }} {...rest}>
      <span style={{
    marginRight: "var(--lp-spacing-px-8)",
    opacity: 0.2
  }}>
        <Icon icon="/snippets/assets/logos/Livepeer-Logo-Symbol-Theme.svg" />
      </span>
      <div style={{
    flex: 1,
    height: "1px",
    background: "var(--lp-color-border-default)",
    opacity: 0.4
  }}></div>
      {middleText && <>
          <Icon icon="circle" size={2} />
          <span style={{
    margin: "0 8px",
    fontWeight: "bold",
    color: color,
    opacity: 0.7
  }}>
            {middleText}
          </span>
          <Icon icon="circle" size={2} />
        </>}
      <div style={{
    flex: 1,
    height: "1px",
    background: "var(--lp-color-border-default)",
    opacity: 0.4
  }}></div>
      <span style={{
    marginLeft: "var(--lp-spacing-px-8)",
    opacity: 0.2
  }}>
        <span style={{
    display: "inline-block",
    transform: "scaleX(-1)"
  }}>
          <Icon icon="/snippets/assets/logos/Livepeer-Logo-Symbol-Theme.svg" />
        </span>
      </span>
    </div>;
};

export const DownloadButton = ({label = 'Download', icon = 'download', downloadLink, rightIcon = '', border = false, className = "", style = {}, ...rest}) => {
  const [isVisible, setIsVisible] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setIsVisible(true);
        observer.disconnect();
      }
    }, {
      threshold: 0.1
    });
    if (ref.current) {
      observer.observe(ref.current);
    }
    return () => observer.disconnect();
  }, []);
  downloadLink = downloadLink ? downloadLink : 'https://Livepeer.org';
  const handleDownload = () => {
    const a = document.createElement('a');
    a.href = downloadLink;
    a.download = '';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };
  if (!isVisible) {
    return <span ref={ref} className={className} style={{
      minHeight: '20px',
      display: 'inline-block',
      ...style
    }} {...rest} />;
  }
  return <span ref={ref} className={className} style={{
    ...border ? {
      border: '1px solid grey',
      borderRadius: "6px",
      padding: '6px 10px',
      display: 'inline-block',
      cursor: 'pointer'
    } : {
      cursor: 'pointer'
    },
    ...style
  }} {...rest}>
      <Icon icon={icon} size={18} color="var(--lp-color-accent)" />
      <button onClick={handleDownload} style={{
    marginRight: 8,
    marginLeft: 8,
    background: 'none',
    border: 'none',
    color: 'inherit',
    cursor: 'pointer',
    textDecoration: 'underline',
    padding: 0,
    font: 'inherit'
  }}>
        {label}
      </button>
      {rightIcon && <Icon icon={rightIcon} style={{
    marginLeft: 8
  }} size={18} color="var(--lp-color-accent)" />}
    </span>;
};

export const PdfEmbed = ({title, src, height = '700px', width = '100%', className = '', style = {}, ...rest}) => <Frame caption={title} className={className} style={style} {...rest}>
    <iframe src={src} width={width} height={height} frameBorder="0" title={title}></iframe>
  </Frame>;

<WidthCard width="60%" cardProps={{ title: "Visit the Media Page", href: "https://www.livepeer.org/media-kit", icon: "photo-film", horizontal: true }} />

<CustomDivider />

## Livepeer Brand

<iframe src="https://livepeer.org/brand" title="Livepeer Brand" width="100%" height="800px" style={{ border: "none", borderRadius: "8px" }} />

<CustomDivider />

## Logos

<Columns cols={2}>
  <InlineImageCard cardProps={{ title: "Livepeer Icon (SVG)" }} imgProps={{ src: "/snippets/assets/logos/Livepeer-Logo-Symbol-Light.svg", alt: "Livepeer Logo" }}>
    <DownloadButton label="Download SVG" downloadLink="/snippets/assets/logos/Livepeer-Logo-Symbol-Light.svg" icon="file-svg" />
  </InlineImageCard>

  <InlineImageCard cardProps={{ title: "Livepeer Icon Dark (SVG)" }} imgProps={{ src: "/snippets/assets/logos/Livepeer-Logo-Symbol-Dark.svg", alt: "Livepeer Logo Dark" }}>
    <DownloadButton label="Download SVG" downloadLink="/snippets/assets/domain/SHARED/LivepeerLogoWhite.svg" icon="file-svg" />
  </InlineImageCard>

  <InlineImageCard cardProps={{ title: "Livepeer Logo (SVG)" }} imgProps={{ src: "/snippets/assets/logos/Livepeer-Logo-Full-Theme.svg", alt: "Livepeer Logo Full" }}>
    <DownloadButton label="Download SVG" downloadLink="/snippets/assets/logos/Livepeer-Logo-Full-Theme.svg" icon="file-svg" />
  </InlineImageCard>

  <InlineImageCard cardProps={{ title: "Livepeer Logo Dark (SVG)" }} imgProps={{ src: "/snippets/assets/logos/Livepeer-Logo-Full-Dark.svg", alt: "Livepeer Logo Full Dark" }}>
    <DownloadButton label="Download SVG" downloadLink="/snippets/assets/logos/Livepeer-Logo-Full-Dark.svg" icon="file-svg" />
  </InlineImageCard>
</Columns>

<CustomDivider />

## Brand Guidelines

<PdfEmbed title="Livepeer Brand Guidelines" src="https://www.dropbox.com/scl/fi/tblvrdl3chfklvujhri19/Livepeer-Brand-Guidelines.pdf?rlkey=mfp3zj8kbp8aw3z0kqhez8wn9&st=or62duey&raw=1" />

<br />

<CenteredContainer preset="readable80" textAlign="center">
  <DownloadButton label="Download Brand Guidelines" downloadLink="https://www.dropbox.com/scl/fi/tblvrdl3chfklvujhri19/Livepeer-Brand-Guidelines.pdf?rlkey=mfp3zj8kbp8aw3z0kqhez8wn9&e=1&st=or62duey&dl=0" icon="file-powerpoint" border={true} />
</CenteredContainer>

<CustomDivider />

## Colours

<Tip> Click to Copy to Clipboard </Tip>

### Light Theme

<Color variant="compact">
  <Color.Item name="Accent" value="var(--lp-color-accent)" />

  <Color.Item name="Accent Dark" value="var(--lp-color-accent-strong)" />

  <Color.Item name="Hero Text" value="var(--lp-color-text-primary)" />

  <Color.Item name="Text" value="var(--lp-color-text-secondary)" />

  <Color.Item name="Muted Text" value="#9ca3af" />

  <Color.Item name="Background" value="var(--lp-color-bg-page)" />

  <Color.Item name="Card Background" value="var(--lp-color-bg-card)" />

  <Color.Item name="Border" value="var(--lp-color-border-default)" />

  <Color.Item name="Button Text" value="var(--lp-color-bg-page)" />
</Color>

### Dark Theme

<Color variant="compact">
  <Color.Item name="Accent" value="var(--lp-color-accent)" />

  <Color.Item name="Accent Dark" value="var(--lp-color-accent-strong)" />

  <Color.Item name="Hero Text" value="var(--lp-color-text-primary)" />

  <Color.Item name="Text" value="#a0a4a0" />

  <Color.Item name="Muted Text" value="#6b7280" />

  <Color.Item name="Background" value="var(--lp-color-bg-page)" />

  <Color.Item name="Card Background" value="var(--lp-color-bg-card)" />

  <Color.Item name="Border" value="var(--lp-color-border-default)" />

  <Color.Item name="Button Text" value="var(--lp-color-bg-page)" />
</Color>

### Complementary Colours

##### Greens

<Color variant="compact">
  <Color.Item name="Deep Forrest" value="#004225" />

  <Color.Item name="Turf Green" value="#1A794E" />

  <Color.Item name="Medium Jungle" value="#08A045" />

  <Color.Item name="Jade Green" value="var(--lp-color-accent)" />

  <Color.Item name="Moss Green" value="var(--lp-color-accent-soft)" />
</Color>

##### Neutrals & Accent

<Color variant="compact">
  <Color.Item name="Onyx Black" value="#0C0C0C" />

  <Color.Item name="Porcelain" value="#FFFFFA" />

  <Color.Item name="Razzmatazz Pink" value="#F61067" />
</Color>

<CustomDivider />

## Solution Logos

<Columns cols={2}>
  <InlineImageCard cardProps={{ title: "Daydream Logo (SVG)" }} imgProps={{ src: "/snippets/assets/logos/products/daydream-logo-dark.svg", alt: "Daydream Logo" }} imgStyle={{ height: "40px", width: "auto", objectFit: "contain" }}>
    <DownloadButton label="Download SVG" downloadLink="/snippets/assets/logos/products/daydream-logo-dark.svg" icon="file-image" />
  </InlineImageCard>

  <InlineImageCard cardProps={{ title: "Livepeer Studio Logo (SVG)" }} imgProps={{ src: "/snippets/assets/logos/products/livepeer-studio-logo.svg", alt: "Livepeer Studio Logo" }} imgStyle={{ height: "40px", width: "auto", objectFit: "contain" }}>
    <DownloadButton label="Download SVG" downloadLink="/snippets/assets/logos/products/livepeer-studio-logo.svg" icon="file-image" />
  </InlineImageCard>

  <InlineImageCard cardProps={{ title: "Frameworks Logo (SVG)" }} imgProps={{ src: "/snippets/assets/logos/products/frameworks-logo.svg", alt: "Frameworks Logo" }} imgStyle={{ height: "40px", width: "auto", objectFit: "contain" }}>
    <DownloadButton label="Download SVG" downloadLink="/snippets/assets/logos/products/frameworks-logo.svg" icon="file-image" />
  </InlineImageCard>

  <InlineImageCard cardProps={{ title: "Stream.place Logo (SVG)" }} imgProps={{ src: "/snippets/assets/logos/products/streamplace-logo.svg", alt: "Stream.place Logo" }} imgStyle={{ height: "40px", width: "auto", objectFit: "contain" }}>
    <DownloadButton label="Download SVG" downloadLink="/snippets/assets/logos/products/streamplace-logo.svg" icon="file-image" />
  </InlineImageCard>
</Columns>