> For the complete documentation index, see [llms.txt](https://docs.flash.im/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.flash.im/docs/resources/brand-kit.md).

# Brand Kit

Everything you need to put the FLASH mark on your screen. Pick the file for the place it goes, and the two rules below take care of the rest.

## Where it goes

Most integrations need one file. Find your row, then take that file from the section below.

<table data-search="false"><thead><tr><th>Where you are putting it</th><th>Take</th></tr></thead><tbody><tr><td>Social profile picture</td><td><code>flash-mark-square-w3@3x.png</code></td></tr><tr><td>Exchange or data platform listing (24 to 32px)</td><td><code>flash-mark-circle-w6.svg</code></td></tr><tr><td>Profile, cover, or hero (48px and up)</td><td><code>flash-mark-circle-w3.svg</code></td></tr><tr><td>App icon</td><td><code>flash-mark-square-round-w3@3x.png</code></td></tr><tr><td>Navigation bar or footer</td><td><code>flash-wordmark-text-white@3x.png</code>, or <code>-ink</code> on light</td></tr><tr><td>"Powered by FLASH" credit</td><td><code>flash-wordmark-horizontal-w3-white@3x.png</code>, or <code>-ink</code> on light</td></tr><tr><td>One-color print, embroidery, watermark</td><td><code>flash-mark-circle-mono-white-w3@3x.png</code>, or <code>-ink</code> on light</td></tr></tbody></table>

Every file named here is a download further down this page. The name carries the rest: shape, weight, ink.

## The one rule: size picks the weight

The mark comes in two optical weights. **You do not choose between them. The size it renders at does.**

{% hint style="info" %}
**Under 48px, take W6. At 48px and above, take W3.**

Heavier when small so it stays legible. Lighter when large so it stays refined. Same centerline, only the stroke width changes: 60 for W6 and 36 for W3, measured on a 256px canvas.
{% endhint %}

<figure><img src="/files/s85TGmUxkLAr7TjvBdSA" alt="The mark from 24px to 128px, W6 below 48 and W3 above"><figcaption><p>The same mark from 24px to 128px. The divider marks 48px, where W6 hands over to W3</p></figcaption></figure>

Pick by the size on screen, not by preference. An X profile renders at 133px, so it takes W3. A listing row renders at 24px, so it takes W6. In practice W6 covers avatars in lists, favicons, and table rows, and W3 covers profile pictures, covers, and anything hero-sized.

## Symbol

The mark is an F drawn as a square meander. Depending on how you read it, it resolves three ways, and that plurality is what makes it memorable.

<table data-view="cards"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><h4>F monogram</h4></td><td>FLASH's initial, drawn in a meander, the classic motif of continuity and permanence, to imply solid infrastructure.</td></tr><tr><td><h4>Interlock</h4></td><td>Two combs meshing together. Institutions and agents, many sources converging into a single feed.</td></tr><tr><td><h4>Signal step</h4></td><td>Steps folding up and down. Price ticks and real-time signal, across crypto and economic data.</td></tr></tbody></table>

{% hint style="success" %}
**Circle first.** The circular badge is the default everywhere. The square crop is reserved for social profiles and covers, and the square-round crop is the app icon.
{% endhint %}

<figure><img src="/files/VDrjOAALly1f0wrnr4bC" alt="The mark at its real render size on covers, listings, profiles, and trading headers"><figcaption><p>Each touchpoint at its real render size, with the matching weight. Every label reads size then weight</p></figcaption></figure>

### Download

SVG is vector and scales freely. PNG is @3x at 1536 by 1536, on a transparent background. Take the left column below 48px, the right column at 48px and above.

#### Circle, the default

{% columns %}
{% column %}
**Under 48px · W6**

{% file src="/files/LTbfo2yvQzpRsJoVvLjO" %}

{% file src="/files/6Fu50z04QivWVqLjXU4O" %}
{% endcolumn %}

{% column %}
**48px and up · W3**

{% file src="/files/OHNuu5LmXh0aikrZPw7B" %}

{% file src="/files/qwL89xsDsCVjCdtjShzN" %}
{% endcolumn %}
{% endcolumns %}

#### Square, for social profiles and covers

{% columns %}
{% column %}
**Under 48px · W6**

{% file src="/files/6WBXyiJm4vh9IuFvZuAp" %}

{% file src="/files/SFq6XEy0vBLtRc3N2L2P" %}
{% endcolumn %}

{% column %}
**48px and up · W3**

{% file src="/files/SjUtTfbbs3sQCWrNISCd" %}

{% file src="/files/pqtbUuz2anb6hxGEURVe" %}
{% endcolumn %}
{% endcolumns %}

#### Square-round, the app icon

{% columns %}
{% column %}
**Under 48px · W6**

{% file src="/files/470KEjZ9ISFMGNw5yz7d" %}

{% file src="/files/NG3DTAgzttxM6ddiMV2F" %}
{% endcolumn %}

{% column %}
**48px and up · W3**

{% file src="/files/Tfff9z9zDhQ5sToSjKB8" %}

{% file src="/files/r9oobZ8Uw3zze1s5Npoz" %}
{% endcolumn %}
{% endcolumns %}

The white stroke runs unbroken to the edge of the badge. Circular crops are trimmed by the circle itself, so no padding is needed inside an avatar frame.

## Mono

When color is not available, the mark is drawn in a single ink with no badge. **The background picks the ink**, the same way the size picks the weight.

<figure><img src="https://2934076593-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7M9iZ2Kg8fDpH37gsTL3%2Fuploads%2FAdKzEFhi1Q1XZuAjdWiU%2FB7_mono-adaptive.png?alt=media&#x26;token=9c7e73e7-4050-426a-aa7e-2127dd15b4b0" alt="Color badge keeps a white line in both themes; the mono mark follows the background"><figcaption></figcaption></figure>

{% hint style="warning" %}
On the indigo badge the line stays **white in light and dark alike**, because contrast is set by the field color and not by the page theme. Only the mono mark follows the background.
{% endhint %}

### Download

Pick the column by your background. Inside a column the weight rule still holds: `-w6` under 48px, `-w3` at 48px and above.

{% columns %}
{% column %}
**On a dark background · white**

{% file src="/files/8OPG40GZ8bQaQeiz6y0Z" %}

{% file src="/files/FeVVSeKyPKVd4gAoA1O7" %}
{% endcolumn %}

{% column %}
**On a light background · ink**

{% file src="/files/eA4Ext7T3yWKLTkvqzUD" %}

{% file src="/files/sKu0s2b3ab3SvLT6ky3L" %}
{% endcolumn %}
{% endcolumns %}

## Wordmark and lockups

Four ways to set the name. All are fixed at W3, so there is no weight to choose here. All are PNG at @3x, and all come in two inks: white on dark, ink on light.

### Horizontal lockup

The default when the name has to sit beside the mark. This is the one to use for a "Powered by FLASH" credit.

<figure><img src="https://2934076593-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7M9iZ2Kg8fDpH37gsTL3%2Fuploads%2Fahwgi2sIsNXfanv7bixm%2FB6b_lockup-horizontal.png?alt=media&#x26;token=1f97b3a7-1588-4aa6-9218-84c0c4236db0" alt="Horizontal lockup on dark and light"><figcaption></figcaption></figure>

{% columns %}
{% column %}
**On a dark background · white**

{% file src="/files/pXqM6nixMR32TujqHZNG" %}
{% endcolumn %}

{% column %}
**On a light background · ink**

{% file src="/files/LjjsLBKuTdVDs9KNin82" %}
{% endcolumn %}
{% endcolumns %}

### Vertical lockup

For square spaces where the stack reads as one column.

<figure><img src="https://2934076593-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7M9iZ2Kg8fDpH37gsTL3%2Fuploads%2FHEHrD8Yc76TiUcB2PRHR%2FB6a_lockup-vertical.png?alt=media&#x26;token=9aabc4a2-3b98-4fb4-8d10-8238c31a2e06" alt="Vertical lockup on dark and light"><figcaption></figcaption></figure>

{% columns %}
{% column %}
**On a dark background · white**

{% file src="/files/MZXTjE0IlcR2iWUljmKk" %}
{% endcolumn %}

{% column %}
**On a light background · ink**

{% file src="/files/Ep0iE0xY0i0NVOIMDywh" %}
{% endcolumn %}
{% endcolumns %}

### Mono lockup

Mark and wordmark in one ink, no indigo badge. For favicons, watermarks, embroidery, and one-color print. Both the horizontal and the vertical arrangement are available.

<figure><img src="https://2934076593-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7M9iZ2Kg8fDpH37gsTL3%2Fuploads%2FE2IiBdUteL73lA1SjmEA%2FB6c_lockup-mono.png?alt=media&#x26;token=48097fb5-0c85-4186-9dda-9700df2d2238" alt="Mono lockup on dark and light"><figcaption></figcaption></figure>

{% columns %}
{% column %}
**On a dark background · white**

{% file src="/files/weCi7q8U6PZEUx7xms8a" %}

{% file src="/files/8QkIlT5I5yJDH6EJivSC" %}
{% endcolumn %}

{% column %}
**On a light background · ink**

{% file src="/files/Ms3EzPelDAQc1YzzoDEJ" %}

{% file src="/files/eB489OAnXmSa87e6Fphn" %}
{% endcolumn %}
{% endcolumns %}

### Wordmark only

The name without the symbol, for places where the mark already appears elsewhere: navigation bars, footers, running text.

<figure><img src="https://2934076593-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7M9iZ2Kg8fDpH37gsTL3%2Fuploads%2F92Pq6igtCF9k30DXkUDw%2FB6d_wordmark-only.png?alt=media&#x26;token=c77a028b-903a-451d-a7cb-a7a4c3b2c005" alt="Wordmark only on dark and light"><figcaption></figcaption></figure>

{% columns %}
{% column %}
**On a dark background · white**

{% file src="/files/YWyyRqurqRzjubYrsuIZ" %}
{% endcolumn %}

{% column %}
**On a light background · ink**

{% file src="/files/xZPBnYfBDD2Tzj1JHHih" %}
{% endcolumn %}
{% endcolumns %}

## Color

<figure><img src="https://2934076593-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7M9iZ2Kg8fDpH37gsTL3%2Fuploads%2FSnU407vzBA4Mxb2dSvPs%2FB8_color-swatch.png?alt=media&#x26;token=76c5da66-9bc1-4de3-b2ab-402f11760b4b" alt="Royal Indigo, #4F46E5"><figcaption></figcaption></figure>

|                  |                                                     |
| ---------------- | --------------------------------------------------- |
| Name             | Royal Indigo                                        |
| Hex              | `#4F46E5`                                           |
| Reference        | Tailwind indigo-600                                 |
| Where it is used | The badge field on profiles, avatars, and app icons |

## Clear space and minimum size

<figure><img src="/files/jFB8GHBx9TftemtoFYqc" alt="Clear space of 25 percent, minimum size 24px"><figcaption><p>Left, the 25% clear-space boundary. Right, the mark at its 24px minimum</p></figcaption></figure>

**Clear space.** Keep at least 25% of the mark height clear on all sides. Inside a circular or square avatar crop the strokes reach the edge by design, so no extra padding is needed there.

**Minimum size.** Use down to 24px with W6. Below that, substitute a solid mark.

## What not to do

* Do not change the color. The badge is always `#4F46E5` and the line is always white.
* Do not rotate, skew, or mirror the mark.
* Do not stretch it. Keep the aspect ratio.
* Do not add shadows, glows, outlines, or gradients.
* Do not change the spacing between the symbol and the wordmark in a lockup.
* Do not redraw the mark or combine it with another shape.
* Do not place it directly on a busy photograph. Put a solid field behind it first.
* Do not use it below 24px.

## Using the FLASH name and logo

You may use the FLASH mark and name to show that your product is integrated with FLASH, including the `[Powered by FLASH]` credit that the [NewsCover API](/docs/api-reference/newscover-api.md) requires for cover images.

You may not:

* use the mark or name in a way that suggests FLASH endorses, sponsors, or certifies your product;
* combine the mark with your own name or logo to form a new mark; or
* use the mark in a product name, domain, or app title.

Anything not covered here, please ask before you ship it.

## Contact

Questions about brand usage, or a case this page does not cover: [contact us](https://flash.im/contact-us).