> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fish.audio/llms.txt
> Use this file to discover all available pages before exploring further.

# Brand Guidelines

> Design guidelines for using Fish Audio brand assets

export const DownloadAssets = () => {
  const [agreed, setAgreed] = useState(false);
  return <div className="my-6">
      <div className="flex items-center gap-3 mb-4">
        <input type="checkbox" id="agree-guidelines" checked={agreed} onChange={e => setAgreed(e.target.checked)} className="w-4 h-4 rounded" />
        <label htmlFor="agree-guidelines" className="text-sm cursor-pointer">
          I agree to the usage guidelines above
        </label>
      </div>
      <a href="https://drive.google.com/drive/folders/1lpMhiJ0nPLwk02ZZnUji2NYjV-aXkxEI" target="_blank" rel="noopener noreferrer" aria-disabled={!agreed} tabIndex={agreed ? 0 : -1} style={{
    opacity: agreed ? 1 : 0.5,
    cursor: agreed ? 'pointer' : 'not-allowed'
  }} className="mint-inline-flex mint-items-center mint-px-7 mint-py-3 mint-text-base mint-font-medium mint-rounded-full !mint-text-white mint-bg-gray-900 hover:mint-bg-gray-800 mint-shadow-lg hover:mint-shadow-xl mint-transition-all mint-duration-200 dark:mint-bg-gray-100 dark:!mint-text-gray-900 dark:hover:mint-bg-white" onClick={e => {
    if (!agreed) {
      e.preventDefault();
    }
  }}>
        Download Brand Assets
      </a>
    </div>;
};

export const ColorSwatch = ({hex, name}) => {
  return <div>
      <div className="h-24 rounded-lg mb-2 flex items-end justify-start p-3" style={{
    backgroundColor: hex
  }}>
        <code className="text-xs font-mono bg-white/90 dark:bg-black/90 px-2 py-1 rounded">
          {hex}
        </code>
      </div>
      <p className="text-sm font-medium">{name}</p>
    </div>;
};

## Logo

### Wordmark

Our preferred logo format combines the [Fish Audio Icon](#icon) with the wordmark side by side.
This is the primary version of our logo and should be used whenever possible for maximum brand recognition and clarity.

<Frame caption="The minimum clearspace around the wordmark must be equal to the height of the letter 'F' in Fish Audio.">
  <img className="block dark:hidden" src="https://mintcdn.com/hanabiaiinc/-WxHANLOAmlTUwdM/branding/light/wordmark-clearspace.svg?fit=max&auto=format&n=-WxHANLOAmlTUwdM&q=85&s=1560a1dcb417e7ee732d4f9e4ef6caaf" alt="Fish Audio Clearspace Wordmark" width="1764" height="508" data-path="branding/light/wordmark-clearspace.svg" />

  <img className="hidden dark:block" src="https://mintcdn.com/hanabiaiinc/-WxHANLOAmlTUwdM/branding/dark/wordmark-clearspace.svg?fit=max&auto=format&n=-WxHANLOAmlTUwdM&q=85&s=7308fe89f570668c41d080b37a46aaeb" alt="Fish Audio Clearspace Wordmark" width="1764" height="508" data-path="branding/dark/wordmark-clearspace.svg" />
</Frame>

### Icon

Our icon features a whale composed of audio bars and sound waves, symbolizing the fusion of marine life with audio technology. This design represents our brand's commitment to natural, flowing, and powerful voice generation.

The Fish Audio icon should only be used when space constraints or context make it impractical to display the full wordmark. Always prefer the wordmark with icon combination when possible.

<Frame caption="The minimum clearspace around the icon must be equal to the bar-to-bar distance (labeled as x).">
  <img className="block dark:hidden" src="https://mintcdn.com/hanabiaiinc/-WxHANLOAmlTUwdM/branding/light/fish-clearspace.svg?fit=max&auto=format&n=-WxHANLOAmlTUwdM&q=85&s=b0db4cf3f4547ab6e24ee2a537ccca92" alt="Fish Audio Clearspace Logo" width="808" height="312" data-path="branding/light/fish-clearspace.svg" />

  <img className="hidden dark:block" src="https://mintcdn.com/hanabiaiinc/-WxHANLOAmlTUwdM/branding/dark/fish-clearspace.svg?fit=max&auto=format&n=-WxHANLOAmlTUwdM&q=85&s=2860082005e3d04b18f9dcaf48ad609a" alt="Fish Audio Clearspace Logo" width="808" height="312" data-path="branding/dark/fish-clearspace.svg" />
</Frame>

### Avoid

To maintain the integrity of our brand identity, please do not alter our logo in any of the following ways:

<Columns cols={2} className="mb-4">
  <Frame caption="Don't stretch, squish, or distort the logo proportions.">
    <img className="block dark:hidden" src="https://mintcdn.com/hanabiaiinc/-WxHANLOAmlTUwdM/branding/light/avoid/distort.svg?fit=max&auto=format&n=-WxHANLOAmlTUwdM&q=85&s=02000ffc5f4f76b4397f6009351ff18f" alt="Incorrect logo usage - distorted" width="1521" height="333" data-path="branding/light/avoid/distort.svg" />

    <img className="hidden dark:block" src="https://mintcdn.com/hanabiaiinc/-WxHANLOAmlTUwdM/branding/dark/avoid/distort.svg?fit=max&auto=format&n=-WxHANLOAmlTUwdM&q=85&s=79235e6c73331227de08fcd2bf6ba690" alt="Incorrect logo usage - distorted" width="1521" height="333" data-path="branding/dark/avoid/distort.svg" />
  </Frame>

  <Frame caption="Don't rotate or tilt the logo.">
    <img className="block dark:hidden" src="https://mintcdn.com/hanabiaiinc/-WxHANLOAmlTUwdM/branding/light/avoid/rotate.svg?fit=max&auto=format&n=-WxHANLOAmlTUwdM&q=85&s=4f5263705c4ae63e7ad70614d3c19170" alt="Incorrect logo usage - rotated" width="1521" height="333" data-path="branding/light/avoid/rotate.svg" />

    <img className="hidden dark:block" src="https://mintcdn.com/hanabiaiinc/-WxHANLOAmlTUwdM/branding/dark/avoid/rotate.svg?fit=max&auto=format&n=-WxHANLOAmlTUwdM&q=85&s=4a9615f94831cfaadc8ad52e74fb0fa6" alt="Incorrect logo usage - rotated" width="1521" height="333" data-path="branding/dark/avoid/rotate.svg" />
  </Frame>
</Columns>

<Columns cols={2} className="mb-4">
  <Frame caption="Don't use non-brand colors or apply color overlays.">
    <img className="block dark:hidden" src="https://mintcdn.com/hanabiaiinc/-WxHANLOAmlTUwdM/branding/light/avoid/color.svg?fit=max&auto=format&n=-WxHANLOAmlTUwdM&q=85&s=65e17131977363926563bcd3d0187c16" alt="Incorrect logo usage - wrong colors" width="1521" height="333" data-path="branding/light/avoid/color.svg" />

    <img className="hidden dark:block" src="https://mintcdn.com/hanabiaiinc/-WxHANLOAmlTUwdM/branding/dark/avoid/color.svg?fit=max&auto=format&n=-WxHANLOAmlTUwdM&q=85&s=19af7eda8cbb1d7d4a57d4ad55eb7197" alt="Incorrect logo usage - wrong colors" width="1521" height="333" data-path="branding/dark/avoid/color.svg" />
  </Frame>

  <Frame caption="Don't add effects like shadows, outlines, or gradients.">
    <img className="block dark:hidden" src="https://mintcdn.com/hanabiaiinc/b5HZYQAi_bKxijc7/branding/light/avoid/effects.png?fit=max&auto=format&n=b5HZYQAi_bKxijc7&q=85&s=4ac7516101be85f820644288d1e944fc" alt="Incorrect logo usage - effects" width="1521" height="333" data-path="branding/light/avoid/effects.png" />

    <img className="hidden dark:block" src="https://mintcdn.com/hanabiaiinc/b5HZYQAi_bKxijc7/branding/dark/avoid/effects.png?fit=max&auto=format&n=b5HZYQAi_bKxijc7&q=85&s=0f832456fc579abd027e76cf4cf5b7cf" alt="Incorrect logo usage - effects" width="1521" height="333" data-path="branding/dark/avoid/effects.png" />
  </Frame>
</Columns>

## Colors

Our official brand colors consist of black and white for primary logo applications, complemented by secondary grays for subtle variations and an accent purple for visual highlights in marketing materials.

<Frame>
  <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4 my-6">
    <ColorSwatch hex="#000000" name="Black (Primary)" />

    <ColorSwatch hex="#FFFFFF" name="White (Primary)" />

    <ColorSwatch hex="#9b90e8" name="Purple (Accent)" />

    <ColorSwatch hex="#b1b3b4" name="Light Gray" />

    <ColorSwatch hex="#4e4c4b" name="Dark Gray" />
  </div>
</Frame>

## Typography

Our brand uses **Onest Semibold** in the logo wordmark. This documentation is also set in Onest, so you're experiencing our brand typography right now.

[Download Onest on Google Fonts](https://fonts.google.com/specimen/Onest)

## Usage Guidelines

The Fish Audio name and logos are trademarks of Hanabi AI Inc. You may freely use and redistribute our brand assets when referencing Fish Audio. By using our brand assets, you agree that we own them and that any goodwill generated by your use benefits Fish Audio.

### Do

* Use our brand assets freely in your projects, applications, and content
* Share our brand assets in blog posts, tutorials, documentation, and educational materials
* Follow the visual guidelines shown above (spacing, colors, sizing)
* Link to fish.audio when using our brand online

### Don't

* Use our logo as part of your own product name or branding
* Imply partnership, sponsorship, or endorsement without permission
* Feature our logo more prominently than your own brand

### Questions?

If you're unsure whether your use case is appropriate or need special permission, please contact us at [support@fish.audio](mailto:support@fish.audio).

## Download Assets

<DownloadAssets />