Logo

The brand lockup — a flame icon mark plus the wordmark. Available as the full Logo and the standalone Logo Icon. All values pulled directly from the LUSTER Figma component.

My Design System

Variant

Figma Properties
Icon background: #916DFF
Icon color: #FFFFFF
Title color: #24242C
Title: Inter Bold 16px
Gap: 16px · Padding: 12px

Variant

My Design System

Full Logo — 204 × 46px

Logo Icon — 42 × 46px

Design Tokens

Token Name	Figma Variable	Default Value
--logoBgColor	Logo/Bg/Color	#916DFF
--logoIconColor	Logo/Icon/Color	#FFFFFF
--sectionTitleFontColor	Section/Title/Font/Color	#24242C
--logoPaddingX	Logo/Padding/X	12px
--logoPaddingY	Logo/Padding/Y	12px
--logoBorderRadius	Logo/Border/Radius	0px
--logoItemsGap	Logo/Items/Gap	16px
--logoTitleContent	Logo/Title/Content	"My Design System"
--logoIconFontSize	Typography/Logo Icon/Font/Size	20px
--logoIconFontLineHeight	Typography/Logo Icon/Font/LineHeight	22px
--titleFontSize	Typography/Title/Font/Size	16px
--titleFontLineHeight	Typography/Title/Font/LineHeight	19px
--titleFontWeight	Typography/Title/Font/Weight	700
--bodyFontFamily	Body/Font/Family	Inter

Usage Guidelines

✓ DO

Use the full Logo where space allows; fall back to the Logo Icon in tight spots.

✓ DO

Keep clear space around the logo equal to the icon padding (12px).

✕ DON'T

Don't recolor the icon background away from the brand purple.

✕ DON'T

Don't stretch, rotate, or change the gap between icon and wordmark.

Implementation

Values shown are the Diamond brand, Light mode defaults (the Figma file's default mode). Other brands (Amber, Opal) and Dark mode resolve to different values via the Color Theme & Component Brand collections.

import './Logo.css';
import { FlameIcon } from './icons';

export interface LogoProps {
  variant?: 'full' | 'icon';
  title?: string;
}

export const Logo = ({ variant = 'full', title = 'My Design System' }: LogoProps) => (
  <span className="logo">
    <span className="logo__icon"><FlameIcon /></span>
    {variant === 'full' && <span className="logo__title">{title}</span>}
  </span>
);

/* Logo tokens — generated from LUSTER Figma variables */
:root {
  /* Logo component (logo/*) */
  --logoBgColor: #916DFF;
  --logoIconColor: #FFFFFF;
  --logoPaddingX: 12px;
  --logoPaddingY: 12px;
  --logoBorderRadius: 0px;
  --logoItemsGap: 16px;
  /* Wordmark — shared Section/Title + Typography/Title + Body tokens */
  --sectionTitleFontColor: #24242C;
  --titleFontSize: 16px;
  --titleFontLineHeight: 19px;
  --titleFontWeight: 700;
  --bodyFontFamily: 'Inter', sans-serif;
}

.logo { display: inline-flex; align-items: center; gap: var(--logoItemsGap); }
.logo__icon {
  width: 42px;
  height: 46px;
  background: var(--logoBgColor);
  border-radius: var(--logoBorderRadius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--logoIconColor);
}
.logo__title {
  font-family: var(--bodyFontFamily);
  font-weight: var(--titleFontWeight);
  font-size: var(--titleFontSize);
  line-height: var(--titleFontLineHeight);
  color: var(--sectionTitleFontColor);
}

<!-- Full logo -->
<span class="logo">
  <span class="logo__icon"><img src="/logo-icon.svg" alt=""></span>
  <span class="logo__title">My Design System</span>
</span>

<!-- Icon only -->
<span class="logo">
  <span class="logo__icon"><img src="/logo-icon.svg" alt="My Design System"></span>
</span>

import { Logo } from '@luster/ui';

export default function Navbar() {
  return (
    <header className="navbar">
      <Logo variant="full" />
      {/* ...nav items */}
    </header>
  );
}