Demos

The wordmark at header size.

"use client"

import { Logo } from "@workspace/ui/predict/logo"

export function LogoDemo() {
  return <Logo aria-label="PREDICT" role="img" className="h-60 w-auto" />
}

Usage

Use the logo components to place the brand in an app, such as the header or a report cover. To download the files instead, see Logos.

Import them from @workspace/ui/predict/logo.

Anatomy

• Logo — The wordmark with the mark after it. Drawn in currentColor.
• LogoIcon — The mark on its own. Always brand purple (#8504FE).
• PredictLogo — A larger, more detailed wordmark for covers and hero sections. Drawn in currentColor.
• PredictMascut — The mascot without animation. See Mascot.

Notes

• Always set a size. Logo has width and height of 100 by default, which gives a square box with the wordmark in the middle. Set a height and w-auto to keep the shape.
• Colour Logo and PredictLogo with a text class such as text-foreground or text-primary. LogoIcon ignores the text colour.
• The SVGs have no text of their own. When the logo stands alone, give it role="img" and aria-label="PREDICT". When it sits next to the word "PREDICT", give it aria-hidden.

Examples

Icon

The mark on its own, at 16, 32, and 48 pixels.

"use client"

import { LogoIcon } from "@workspace/ui/predict/logo"

export function LogoIconDemo() {
  return (
    <div className="flex items-end gap-6">
      <LogoIcon aria-hidden className="size-4" />
      <LogoIcon aria-hidden className="size-8" />
      <LogoIcon aria-label="PREDICT" role="img" className="size-12" />
    </div>
  )
}

Colour

The wordmark takes the current text colour.

"use client"

import { Logo } from "@workspace/ui/predict/logo"

export function LogoColor() {
  return (
    <div className="flex flex-col items-center gap-6">
      <Logo aria-label="PREDICT" role="img" className="text-foreground h-50 w-auto" />
      <Logo aria-label="PREDICT" role="img" className="text-primary h-50 w-auto" />
      <Logo aria-label="PREDICT" role="img" className="text-secondary h-50 w-auto" />
    </div>
  )
}

Wordmark

PredictLogo for large sizes. It fills its width, so cap it with max-w-*.

"use client"

import { PredictLogo } from "@workspace/ui/predict/logo"

export function LogoWordmark() {
  return (
    <PredictLogo aria-label="PREDICT" role="img" className="h-auto w-full max-w-sm" />
  )
}

Props

All four components take the props of an svg element, such as className, role, and aria-label.