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

# Logo & Brand

> Mannco.store logo assets, usage guidelines, clear space, colors, and do's and don'ts

The Mannco.store logo comes in two versions. Use the one that fits the space and context, and keep the guidelines below so the brand stays consistent everywhere it appears.

## The two versions

<CardGroup cols={2}>
  <Card title="Full logo (wordmark)">
    <Frame>
      <div style={{ padding: "40px", display: "flex", justifyContent: "center" }}>
        <img src="https://mintcdn.com/minelauvaholdings/bM0cQylDnHI5Teot/logo/mannco-full.svg?fit=max&auto=format&n=bM0cQylDnHI5Teot&q=85&s=4ce54c95ded658427188a565bae8e86a" alt="Mannco.store full logo" style={{ width: "220px", maxWidth: "100%" }} width="140" height="32" data-path="logo/mannco-full.svg" />
      </div>
    </Frame>

    Symbol **+ wordmark**. This is the primary logo — use it wherever there is room for it: website headers, documents, presentations, and marketing.
  </Card>

  <Card title="Icon (symbol only)">
    <Frame>
      <div style={{ padding: "40px", display: "flex", justifyContent: "center" }}>
        <img src="https://mintcdn.com/minelauvaholdings/bM0cQylDnHI5Teot/logo/mannco-symbol.svg?fit=max&auto=format&n=bM0cQylDnHI5Teot&q=85&s=945547ec4c4e8bbd779dc36c7b824600" alt="Mannco.store icon" style={{ width: "72px", maxWidth: "100%" }} width="64" height="64" data-path="logo/mannco-symbol.svg" />
      </div>
    </Frame>

    The **standalone symbol**. Use it in tight or square spaces: favicons, app icons, avatars, social profile pictures, and loading states.
  </Card>
</CardGroup>

## When to use which

| Context                              | Version   |
| ------------------------------------ | --------- |
| Website header / navigation          | Full logo |
| Documents, slide decks, letterheads  | Full logo |
| Marketing banners with room for text | Full logo |
| Favicon / browser tab                | Icon      |
| App icon / home screen               | Icon      |
| Social avatar / profile picture      | Icon      |
| Square or very small placements      | Icon      |

<Tip>
  When in doubt, reach for the **full logo**. Only drop to the icon when the space is too small or too square for the wordmark to remain legible.
</Tip>

## Clear space & minimum size

Give the logo room to breathe. Keep clear space around it equal to the height of the symbol on all sides — don't crowd it with text, other logos, or edges.

* **Full logo** — minimum width **120px** on screen. Below that the wordmark becomes hard to read.
* **Icon** — minimum size **24px**. Below that, switch to a simpler placement.

## Colors

The logo uses three colors: the Mannco teal gradient for the symbol and ".store", white for "mannco", and a navy backing that hugs the wordmark.

<CardGroup cols={3}>
  <Card title="Teal (gradient start)">
    <div style={{ background: "#2dd4df", height: "56px", borderRadius: "8px" }} />

    `#2DD4DF`
  </Card>

  <Card title="Teal (gradient end)">
    <div style={{ background: "#1fb8e2", height: "56px", borderRadius: "8px" }} />

    `#1FB8E2`
  </Card>

  <Card title="Navy (backing)">
    <div style={{ background: "#313046", height: "56px", borderRadius: "8px" }} />

    `#313046`
  </Card>
</CardGroup>

The gradient runs from `#2DD4DF` to `#1FB8E2`. The "mannco" text is **white** and the ".store" text uses the teal gradient, both sitting on the `#313046` navy backing.

## Backgrounds

The full logo is self-contained — the navy backing carries the wordmark on any background, so **the same file works everywhere**. On dark surfaces the backing blends in and reads as a clean white-and-teal wordmark.

<CardGroup cols={2}>
  <Card title="On light">
    <Frame>
      <div style={{ background: "#ffffff", padding: "32px", display: "flex", justifyContent: "center", borderRadius: "8px" }}>
        <img src="https://mintcdn.com/minelauvaholdings/bM0cQylDnHI5Teot/logo/mannco-full.svg?fit=max&auto=format&n=bM0cQylDnHI5Teot&q=85&s=4ce54c95ded658427188a565bae8e86a" alt="Mannco.store logo on light" style={{ width: "200px", maxWidth: "100%" }} width="140" height="32" data-path="logo/mannco-full.svg" />
      </div>
    </Frame>
  </Card>

  <Card title="On dark">
    <Frame>
      <div style={{ background: "#021214", padding: "32px", display: "flex", justifyContent: "center", borderRadius: "8px" }}>
        <img src="https://mintcdn.com/minelauvaholdings/bM0cQylDnHI5Teot/logo/mannco-full.svg?fit=max&auto=format&n=bM0cQylDnHI5Teot&q=85&s=4ce54c95ded658427188a565bae8e86a" alt="Mannco.store logo on dark" style={{ width: "200px", maxWidth: "100%" }} width="140" height="32" data-path="logo/mannco-full.svg" />
      </div>
    </Frame>
  </Card>
</CardGroup>

## Do & Don't

<CardGroup cols={2}>
  <Card title="Do" icon="check">
    * Keep the original proportions — scale width and height together
    * Preserve the clear space around the logo
    * Use the same logo file on light and dark backgrounds
    * Use the icon when the full logo won't fit legibly
  </Card>

  <Card title="Don't" icon="xmark">
    * Stretch, squash, or rotate the logo
    * Recolor the symbol or change its gradient
    * Add drop shadows, outlines, or other effects
    * Place the logo on a low-contrast or busy background
  </Card>
</CardGroup>

## Downloads

All assets are SVG, so they stay crisp at any size.

| Asset                | File                                         |
| -------------------- | -------------------------------------------- |
| Full logo (wordmark) | [mannco-full.svg](/logo/mannco-full.svg)     |
| Icon / symbol        | [mannco-symbol.svg](/logo/mannco-symbol.svg) |