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

# Brand Guidelines

> Official Octav brand color palette

export const ColorSwatch = ({color, name, hex}) => {
  return <div className="flex flex-col items-center gap-2 p-4">
      <div className="w-24 h-24 rounded-lg shadow-md" style={{
    backgroundColor: hex
  }} />
      <div className="text-center">
        <p className="font-semibold text-sm">{name}</p>
        <p className="text-xs text-gray-500">{hex}</p>
      </div>
    </div>;
};

Official brand color palette for using Octav's visual identity.

***

## Color Palette

### Primary Colors

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 my-8">
  <div>
    <ColorSwatch color="coolRed" name="Cool Red" hex="#FF1A45" />

    <p className="mt-3 text-sm text-gray-600"><strong>Usage:</strong> Primary CTAs, emphasis, brand moments</p>
  </div>

  <div>
    <ColorSwatch color="uiBlue" name="UI Blue" hex="#3F58C7" />

    <p className="mt-3 text-sm text-gray-600"><strong>Usage:</strong> Interactive elements, buttons, links</p>
  </div>
</div>

***

### Secondary Colors

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-8">
  <div>
    <ColorSwatch color="darkNavy" name="Dark Navy" hex="#091018" />

    <p className="mt-3 text-sm text-gray-600"><strong>Usage:</strong> Dark backgrounds, headers</p>
  </div>

  <div>
    <ColorSwatch color="coolTeal" name="Cool Teal" hex="#6BCCD1" />

    <p className="mt-3 text-sm text-gray-600"><strong>Usage:</strong> Success states, positive indicators</p>
  </div>

  <div>
    <ColorSwatch color="successGreen" name="Success Green" hex="#59CE7E" />

    <p className="mt-3 text-sm text-gray-600"><strong>Usage:</strong> Positive changes, success messages</p>
  </div>

  <div>
    <ColorSwatch color="warningOrange" name="Warning Orange" hex="#FF9B50" />

    <p className="mt-3 text-sm text-gray-600"><strong>Usage:</strong> Warnings, important notices</p>
  </div>

  <div>
    <ColorSwatch color="errorRed" name="Error Red" hex="#FF5757" />

    <p className="mt-3 text-sm text-gray-600"><strong>Usage:</strong> Errors, negative changes</p>
  </div>
</div>

***

### Neutral Colors

#### Light Backgrounds

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-8">
  <div>
    <ColorSwatch color="white" name="White" hex="#FFFFFF" />

    <p className="mt-3 text-sm text-gray-600"><strong>Usage:</strong> Primary light background</p>
  </div>

  <div>
    <ColorSwatch color="lightGray" name="Light Gray" hex="#F5F7FA" />

    <p className="mt-3 text-sm text-gray-600"><strong>Usage:</strong> Secondary light background</p>
  </div>

  <div>
    <ColorSwatch color="mediumGray" name="Medium Gray" hex="#E2E8F0" />

    <p className="mt-3 text-sm text-gray-600"><strong>Usage:</strong> Borders, dividers</p>
  </div>
</div>

#### Dark Backgrounds

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-8">
  <div>
    <ColorSwatch color="darkNavy" name="Dark Navy" hex="#091018" />

    <p className="mt-3 text-sm text-gray-600"><strong>Usage:</strong> Primary dark background</p>
  </div>

  <div>
    <ColorSwatch color="darkBlue" name="Dark Blue" hex="#1A202C" />

    <p className="mt-3 text-sm text-gray-600"><strong>Usage:</strong> Secondary dark background</p>
  </div>

  <div>
    <ColorSwatch color="slate" name="Slate" hex="#2D3748" />

    <p className="mt-3 text-sm text-gray-600"><strong>Usage:</strong> Dark UI elements</p>
  </div>
</div>

#### Text Colors

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 my-8">
  <div>
    <ColorSwatch color="primaryTextLight" name="Primary Text (Light)" hex="#091018" />

    <p className="mt-3 text-sm text-gray-600"><strong>Usage:</strong> Main text on light backgrounds</p>
  </div>

  <div>
    <ColorSwatch color="secondaryTextLight" name="Secondary Text (Light)" hex="#4A5568" />

    <p className="mt-3 text-sm text-gray-600"><strong>Usage:</strong> Secondary text on light backgrounds</p>
  </div>

  <div>
    <ColorSwatch color="primaryTextDark" name="Primary Text (Dark)" hex="#FFFFFF" />

    <p className="mt-3 text-sm text-gray-600"><strong>Usage:</strong> Main text on dark backgrounds</p>
  </div>

  <div>
    <ColorSwatch color="secondaryTextDark" name="Secondary Text (Dark)" hex="#A0AEC0" />

    <p className="mt-3 text-sm text-gray-600"><strong>Usage:</strong> Secondary text on dark backgrounds</p>
  </div>
</div>