Use these assets when you need to represent FashionUnited in press material,
partner integrations, marketplace placements, presentations, or developer
implementations. Prefer SVG for production use so the logo stays sharp at every
size.

<style>
  .brand-asset-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    margin-block: 1.5rem 2rem;
  }

  .brand-asset-card {
    border: 1px solid var(--sl-color-gray-5);
    border-radius: 0.75rem;
    overflow: hidden;
    background: var(--sl-color-bg);
  }

  .brand-asset-preview {
    align-items: center;
    background:
      linear-gradient(45deg, rgb(0 0 0 / 0.04) 25%, transparent 25%),
      linear-gradient(-45deg, rgb(0 0 0 / 0.04) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgb(0 0 0 / 0.04) 75%),
      linear-gradient(-45deg, transparent 75%, rgb(0 0 0 / 0.04) 75%);
    background-position: 0 0, 0 0.5rem, 0.5rem -0.5rem, -0.5rem 0;
    background-size: 1rem 1rem;
    display: flex;
    justify-content: center;
    min-height: 9rem;
    padding: 2rem;
  }

  .brand-asset-preview.is-dark {
    background: #12100b;
  }

  .brand-asset-preview img {
    display: block;
    max-height: 5.5rem;
    max-width: 100%;
  }

  .brand-asset-card-body {
    padding: 1rem;
  }

  .brand-asset-card-body h3 {
    margin-top: 0;
  }

  .brand-asset-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
  }

  .brand-asset-actions a {
    border: 1px solid var(--sl-color-accent);
    border-radius: 999px;
    color: var(--sl-color-accent-high);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    text-decoration: none;
  }
</style>

## Jump to a section

- [Logo downloads](#logo-downloads)
- [Complete logo packages](#complete-logo-packages)
- [Usage rules](#usage-rules)
- [SVG quality requirements](#svg-quality-requirements)

## Logo downloads

PNG downloads have a transparent background. SVG downloads are vector files and
should be used when the logo needs to scale cleanly.

<div class="brand-asset-grid">
  <article class="brand-asset-card">
    <div class="brand-asset-preview">
      <img src="/brand-assets/fashionunited/fashionunited-wordmark-black.svg" alt="FashionUnited black wordmark" />
    </div>
    <div class="brand-asset-card-body">
      <h3>Wordmark - black</h3>
      <p>Use on light backgrounds when the available width can support the full FashionUnited name.</p>
      <div class="brand-asset-actions">
        <a href="/brand-assets/fashionunited/fashionunited-wordmark-black.svg" download>SVG</a>
      </div>
    </div>
  </article>
  <article class="brand-asset-card">
    <div class="brand-asset-preview is-dark">
      <img src="/brand-assets/fashionunited/fashionunited-wordmark-white.svg" alt="FashionUnited white wordmark" />
    </div>
    <div class="brand-asset-card-body">
      <h3>Wordmark - white</h3>
      <p>Use on dark, image, or color backgrounds where the black wordmark does not have enough contrast.</p>
      <div class="brand-asset-actions">
        <a href="/brand-assets/fashionunited/fashionunited-wordmark-white.svg" download>SVG</a>
      </div>
    </div>
  </article>
  <article class="brand-asset-card">
    <div class="brand-asset-preview">
      <img src="/brand-assets/fashionunited/fashionunited-favicon-transparent-padded.png" alt="FashionUnited favicon with transparent padding" />
    </div>
    <div class="brand-asset-card-body">
      <h3>Favicon - transparent padded PNG</h3>
      <p>1024 × 1024 PNG with a transparent background and approximately 9% padding around the circular mark.</p>
      <div class="brand-asset-actions">
        <a href="/brand-assets/fashionunited/fashionunited-favicon-transparent-padded.png" download>PNG</a>
        <a href="/brand-assets/fashionunited/fashionunited-favicon-transparent-padded.svg" download>SVG source</a>
      </div>
    </div>
  </article>
</div>

## Complete logo packages

Use the individual files above for common web needs. Use the complete packages
when you need print, archive, or design-tool formats.

- [All FashionUnited logos in AI format](https://developer-cdn.fashionunited.com/FashionUnited-ai-logos.zip)
- [All FashionUnited logos in EPS format](https://developer-cdn.fashionunited.com/FashionUnited-eps-logos.zip)
- [All FashionUnited logos in SVG format](https://developer-cdn.fashionunited.com/FashionUnited-svg-logos.zip)
- [All FashionUnited vector-oriented logo formats](https://developer-cdn.fashionunited.com/FashionUnited-vector-oriented-logos.zip)
- [Complete logo stylesheet in PDF format](https://developer-cdn.fashionunited.com/styleguide_FU_logo_2021.pdf)

## Usage rules

The logo makes the link between fashion and uniting everyone working within the
industry, which the name FashionUnited embodies. The wordmark uses a stylish and
modern font, with an emphasis on “United” by making that part bold.

The normal wordmark with “FashionUnited” spelled together is preferred. When the
available space is too small for the full wordmark, use the square or circular
favicon version.

In principle, the logo should only be used in black or white. Choose the version
that has the strongest contrast against the background color or image.

![FashionUnited full logo spacing example](https://developer-cdn.fashionunited.com/icon-logo-613x357.jpg)

The FashionUnited circle, when used with the wordmark, should have a height of
400% of the FashionUnited letters. The full logo should always have whitespace
around it equal to the height of the FashionUnited letters.

![FashionUnited circular favicon spacing example](https://developer-cdn.fashionunited.com/icon-270x269.jpg)

The whitespace around the circular logo should be 25% of the size of the logo.

![FashionUnited wordmark spacing example](https://developer-cdn.fashionunited.com/logo-572x87.jpg)

If the text-only logo is used, keep minimum whitespace around the logo equal to
50% of the logo height.

![FashionUnited maximum width example](https://developer-cdn.fashionunited.com/22-66-22-807x914.jpg)

The logo should never be wider than 66% of the maximum width of the area it is
placed in.

![FashionUnited bottom border example](https://developer-cdn.fashionunited.com/onderbalk-802x914.jpg)

If a screen or ad uses a background image or background color, show the logo in a
white border on the bottom. The border should be 10% of the image height.

## SVG quality requirements

For all job feed integrations and job postings, SVG is the preferred logo format.
SVG files are small, scale cleanly, look sharp on retina displays, and allow
more design control than raster formats.

To make SVG images responsive across browsers:

- Remove fixed `height` and `width` attributes from the `svg` element.
- Add `preserveAspectRatio="xMinYMin meet"`.
- Prefer vector `path` data instead of embedding raster images inside the SVG.

Example before:

```html
<svg version="1.1" id="underground-sign" xmlns="http://www.w3.org/2000/svg"
width="960px" height="560px" viewBox="0 0 960 560" xml:space="preserve">
```

Example after:

```html
<svg version="1.1" id="underground-sign" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 960 560" preserveAspectRatio="xMinYMin meet">
```

See the [W3C `preserveAspectRatio` documentation](https://www.w3.org/TR/SVG/single-page.html#coords-PreserveAspectRatioAttribute)
for the underlying SVG behavior.

See also [Job Layout](/docs/jobs/job-layout/) for logo requirements when posting
jobs, and [Employer Page](/docs/jobs/employer-page/) for how a logo appears on a
company page.