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

# Brand Assets

> Guidelines and assets for the L2Pass brand identity.

## Logo Assets

Click any card to download the asset.

<CardGroup cols={2}>
  <Card title="Logo Light (SVG)" icon="bezier-curve" href="/brand_assets/l2pass_logo_light.svg">
    <div style={{ display: "flex", justifyContent: "center", padding: "1rem", backgroundColor: "#181818" }}>
      <img src="https://mintcdn.com/l2pass/8HKWm_aguas868gx/brand_assets/l2pass_logo_light.svg?fit=max&auto=format&n=8HKWm_aguas868gx&q=85&s=e50324ec832eae8b7b4b6713117bc263" style={{ height: "48px" }} width="114" height="24" data-path="brand_assets/l2pass_logo_light.svg" />
    </div>

    Standard vector logo for dark-themed layouts.
  </Card>

  <Card title="Logo Dark (SVG)" icon="bezier-curve" href="/brand_assets/l2pass_logo_dark.svg">
    <div style={{ display: "flex", justifyContent: "center", padding: "1rem", backgroundColor: "#FFFFFF" }}>
      <img src="https://mintcdn.com/l2pass/8HKWm_aguas868gx/brand_assets/l2pass_logo_dark.svg?fit=max&auto=format&n=8HKWm_aguas868gx&q=85&s=17b7ec2dd85cb8f77023e0ff8ecd10b4" style={{ height: "48px" }} width="114" height="24" data-path="brand_assets/l2pass_logo_dark.svg" />
    </div>

    Standard vector logo for light-themed layouts.
  </Card>
</CardGroup>

<CardGroup cols={2}>
  <Card title="Polar Light (SVG)" icon="bezier-curve" href="/brand_assets/l2pass_logo_polar_light.svg">
    <div style={{ display: "flex", justifyContent: "center", padding: "1rem", backgroundColor: "#181818" }}>
      <img src="https://mintcdn.com/l2pass/8HKWm_aguas868gx/brand_assets/l2pass_logo_polar_light.svg?fit=max&auto=format&n=8HKWm_aguas868gx&q=85&s=03e2e6b3afab0166930740903f75031c" style={{ height: "48px" }} width="114" height="24" data-path="brand_assets/l2pass_logo_polar_light.svg" />
    </div>

    Polar gradient variant optimized for light themes.
  </Card>

  <Card title="Polar Dark (SVG)" icon="bezier-curve" href="/brand_assets/l2pass_logo_polar_dark.svg">
    <div style={{ display: "flex", justifyContent: "center", padding: "1rem", backgroundColor: "#FFFFFF"  }}>
      <img src="https://mintcdn.com/l2pass/8HKWm_aguas868gx/brand_assets/l2pass_logo_polar_dark.svg?fit=max&auto=format&n=8HKWm_aguas868gx&q=85&s=7b6c4c1e460a20ca33e17be959906772" style={{ height: "48px" }} width="114" height="24" data-path="brand_assets/l2pass_logo_polar_dark.svg" />
    </div>

    Polar gradient variant optimized for dark themes.
  </Card>
</CardGroup>

<CardGroup cols={2}>
  <Card title="Logo Light (PNG)" icon="file-image" href="/brand_assets/l2pass_logo_light.png">
    <div style={{ display: "flex", justifyContent: "center", padding: "1.75rem", backgroundColor: "#181818" }}>
      <img src="https://mintcdn.com/l2pass/lhfbiz5qdYlpC3D7/brand_assets/l2pass_logo_light.png?fit=max&auto=format&n=lhfbiz5qdYlpC3D7&q=85&s=f81909fc0bd3e877d345fd7dd56752c6" style={{ height: "24px" }} width="456" height="94" data-path="brand_assets/l2pass_logo_light.png" />
    </div>

    High-resolution raster image for dark backgrounds.
  </Card>

  <Card title="Logo Dark (PNG)" icon="file-image" href="/brand_assets/l2pass_logo_dark.png">
    <div style={{ display: "flex", justifyContent: "center", padding: "1.75rem", backgroundColor: "#FFFFFF"  }}>
      <img src="https://mintcdn.com/l2pass/lhfbiz5qdYlpC3D7/brand_assets/l2pass_logo_dark.png?fit=max&auto=format&n=lhfbiz5qdYlpC3D7&q=85&s=d6f0f329ffcf5352b3f43fdba73e964c" style={{ height: "24px" }} width="456" height="94" data-path="brand_assets/l2pass_logo_dark.png" />
    </div>

    High-resolution raster image for light backgrounds.
  </Card>
</CardGroup>

### Icons & Symbols

<CardGroup cols={2}>
  <Card title="Square L2P logo (SVG)" icon="square" href="/brand_assets/l2p_logo.svg">
    <div style={{ display: "flex", justifyContent: "center", padding: "1rem" }}>
      <img src="https://mintcdn.com/l2pass/8HKWm_aguas868gx/brand_assets/l2p_logo.svg?fit=max&auto=format&n=8HKWm_aguas868gx&q=85&s=623466b67af99f70b93ff6dafc808e8b" style={{ height: "80px", borderRadius: "12px" }} width="180" height="180" data-path="brand_assets/l2p_logo.svg" />
    </div>

    Use as a square icon or favicon.
  </Card>

  <Card title="L2Pass Star (SVG)" icon="star" href="/brand_assets/l2pass_star.svg">
    <div style={{ display: "flex", justifyContent: "center", padding: "1rem" }}>
      <img src="https://mintcdn.com/l2pass/8HKWm_aguas868gx/brand_assets/l2pass_star.svg?fit=max&auto=format&n=8HKWm_aguas868gx&q=85&s=7555f67472fc86c879c2a73bb6e463e7" style={{ height: "80px" }} width="120" height="120" data-path="brand_assets/l2pass_star.svg" />
    </div>

    Primary brand symbol in vector format.
  </Card>
</CardGroup>

<Info>
  Please do not alter the logo proportions, colors, or orientation. Ensure sufficient padding around the logo.
</Info>

***

## Brand Colors

Our palette is designed for a high-contrast, dark-mode first experience, utilizing deep shades and vibrant neon accents.

### Primary

<Color variant="compact">
  <Color.Item name="Midnight" value="#1A1A1A" />

  <Color.Item name="Deep Night" value="#181818" />

  <Color.Item name="Ghost White" value="#FCFAF7" />

  <Color.Item name="Ultraviolet" value="#971AE4" />
</Color>

### Secondary

<Color variant="compact">
  <Color.Item name="Night Blue" value="#5227ff" />

  <Color.Item name="Lavender" value="#B19EEF" />

  <Color.Item name="Neon Mint" value="#A5FFBE" />

  <Color.Item name="Aurora" value="#53CBC8" />
</Color>

### Gradients

<Color variant="table">
  <Color.Row title="Polar Glow">
    <Color.Item name="Aurora" value="#53CBC8" />

    <Color.Item name="Neon Mint" value="#A5FFBE" />
  </Color.Row>

  <Color.Row title="Aurora Pulse">
    <Color.Item name="Neon Green" value="#7CFF67" />

    <Color.Item name="Lavender" value="#B19EEF" />

    <Color.Item name="Night Blue" value="#5227FF" />
  </Color.Row>
</Color>

***

## Typography

We use clean, modern typefaces to ensure readability across complex defi data.

<CardGroup cols={3}>
  <Card title="SF Pro" icon="font" href="https://developer.apple.com/fonts/">
    Medium, Semi-Bold, Regular, Expanded Thin
  </Card>

  <Card title="SF Mono" icon="font" href="https://developer.apple.com/fonts/">
    Medium, Regular, Light
  </Card>
</CardGroup>

***

<Info>
  **Usage Policy** By using these assets, you agree to follow the L2Pass brand guidelines. For custom inquiries or partnership materials, please contact [our team](/resources/support).
</Info>