Logo

Brand logo with icon and text. The icon features a grid pattern with colored dots using design system tokens.

Full Logo

Sizes

Logo in different sizes

Small
Medium (default)
Large

Icon Only

Icon Variants

Logo icon without text

Small
Medium
Large

Usage

tsx
import { Logo } from '@/components/Logo';

// Full logo (default)
<Logo />

// Different sizes
<Logo size="small" />
<Logo size="medium" />
<Logo size="large" />

// Icon only
<Logo iconOnly />

Props

PropTypeDefaultDescription
iconOnlybooleanfalseShow only icon without text
size'small' | 'medium' | 'large''medium'Size of the logo
classNamestring-Additional CSS class for the logo

Design Tokens

The logo uses design system color tokens for the colored dots:

  • --layer-hype - Red dot (brand accent color)
  • --layer-glow - Orange dots (brand secondary color)
  • --on-layer-text-primary - Grid pattern background

Best Practices

  • Use full logo in headers: Shows complete brand identity
  • Use icon-only for small spaces: Like mobile navigation or favicons
  • Maintain clear space: Keep adequate spacing around the logo
  • Don't alter colors: Logo uses design system tokens automatically
  • Responsive sizing: Use appropriate size prop for different contexts