Brand Assets

Learn how to work with our brand assets and download resources.

Logo

The MeloSpot logo is the cornerstone of our brand identity.

MeloSpot

Primary Logo

MeloSpot

Logo on Dark Background

Color Palette

Our brand colors ensure consistency across all touchpoints.

Primary

Main brand color, used for primary actions and key UI elements

var(--primary)

Secondary

Used for secondary actions and supporting UI elements

var(--secondary)

Accent

Used for highlighting and accent elements

var(--accent)

Destructive

Used for errors, warnings, and destructive actions

var(--destructive)

Muted

Used for backgrounds of cards and subtle UI elements

var(--muted)

Card

Used for card backgrounds

var(--card)

Popover

Used for popover and dropdown backgrounds

var(--popover)

Border

Used for borders and dividers

var(--border)

Input

Used for form input borders

var(--input)

Ring

Used for focus rings and outlines

var(--ring)

Special Colors

Vibrant Purple

Used for premium features and highlights

bg-purple-500

Success Green

Used for success states and confirmations

bg-emerald-500

Warning Amber

Used for warnings and cautions

bg-amber-500

Icons

Access our complete icon library from npm.

Installation

npm install @melospot/icons-react

Usage

import { HomeIcon, UserIcon } from "@melospot/icons-react";

export default function Example() {
  return (
    <div>
      <HomeIcon className="h-6 w-6" />
      <UserIcon className="h-6 w-6" />
    </div>
  );
}

Usage Guidelines

Follow these guidelines to maintain brand consistency.

Do's

  • Use the official logo files provided
  • Maintain adequate clear space around the logo
  • Use approved brand colors
  • Ensure sufficient contrast for accessibility

Don'ts

  • Don't distort or stretch the logo
  • Don't change the logo colors
  • Don't add effects or shadows to the logo
  • Don't use outdated logo versions