# Brand

> Page: https://docs.flung.dev/brand. Index of every page: https://docs.flung.dev/llms.txt

The Flung logo, colours, type, patterns and motion, with every file to download. They are served from `assets.flung.dev`, so a page can use them by address, and a machine-readable manifest lists them all.

## The mark

The mark is a post: a speech bubble leaning 14 degrees as it leaves, with a peach upper speed line and a sky lower one. The name beside it is Funnel Display at 750, traced to outlines. Use the files as they are.

### Mark

The thrown post alone, for small spaces and icons.

| Variant | Use | Files |
|---|---|---|
| On light | The mark on light grounds | [SVG](https://assets.flung.dev/brand/logo/flung-mark-on-light.svg) · [PNG 512](https://assets.flung.dev/brand/logo/flung-mark-on-light-512.png) · [PNG 1024](https://assets.flung.dev/brand/logo/flung-mark-on-light-1024.png) · [PNG 2048](https://assets.flung.dev/brand/logo/flung-mark-on-light-2048.png) |
| On dark | The mark on dark grounds | [SVG](https://assets.flung.dev/brand/logo/flung-mark-on-dark.svg) · [PNG 512](https://assets.flung.dev/brand/logo/flung-mark-on-dark-512.png) · [PNG 1024](https://assets.flung.dev/brand/logo/flung-mark-on-dark-1024.png) · [PNG 2048](https://assets.flung.dev/brand/logo/flung-mark-on-dark-2048.png) |
| Black | One colour, black | [SVG](https://assets.flung.dev/brand/logo/flung-mark-black.svg) · [PNG 512](https://assets.flung.dev/brand/logo/flung-mark-black-512.png) · [PNG 1024](https://assets.flung.dev/brand/logo/flung-mark-black-1024.png) · [PNG 2048](https://assets.flung.dev/brand/logo/flung-mark-black-2048.png) |
| White | One colour, white, on photos or dark fills | [SVG](https://assets.flung.dev/brand/logo/flung-mark-white.svg) · [PNG 512](https://assets.flung.dev/brand/logo/flung-mark-white-512.png) · [PNG 1024](https://assets.flung.dev/brand/logo/flung-mark-white-1024.png) · [PNG 2048](https://assets.flung.dev/brand/logo/flung-mark-white-2048.png) |

### Lockup

The mark and the name on one line: the logo to use first.

| Variant | Use | Files |
|---|---|---|
| On light | Mark and name, on light grounds | [SVG](https://assets.flung.dev/brand/logo/flung-lockup-on-light.svg) · [PNG 512](https://assets.flung.dev/brand/logo/flung-lockup-on-light-512.png) · [PNG 1024](https://assets.flung.dev/brand/logo/flung-lockup-on-light-1024.png) · [PNG 2048](https://assets.flung.dev/brand/logo/flung-lockup-on-light-2048.png) |
| On dark | Mark and name, on dark grounds | [SVG](https://assets.flung.dev/brand/logo/flung-lockup-on-dark.svg) · [PNG 512](https://assets.flung.dev/brand/logo/flung-lockup-on-dark-512.png) · [PNG 1024](https://assets.flung.dev/brand/logo/flung-lockup-on-dark-1024.png) · [PNG 2048](https://assets.flung.dev/brand/logo/flung-lockup-on-dark-2048.png) |
| Black | Mark and name, one colour black | [SVG](https://assets.flung.dev/brand/logo/flung-lockup-black.svg) · [PNG 512](https://assets.flung.dev/brand/logo/flung-lockup-black-512.png) · [PNG 1024](https://assets.flung.dev/brand/logo/flung-lockup-black-1024.png) · [PNG 2048](https://assets.flung.dev/brand/logo/flung-lockup-black-2048.png) |
| White | Mark and name, one colour white | [SVG](https://assets.flung.dev/brand/logo/flung-lockup-white.svg) · [PNG 512](https://assets.flung.dev/brand/logo/flung-lockup-white-512.png) · [PNG 1024](https://assets.flung.dev/brand/logo/flung-lockup-white-1024.png) · [PNG 2048](https://assets.flung.dev/brand/logo/flung-lockup-white-2048.png) |

### Stacked lockup

The mark over the name, for square spaces.

| Variant | Use | Files |
|---|---|---|
| On light | Mark over name, on light grounds | [SVG](https://assets.flung.dev/brand/logo/flung-lockup-stacked-on-light.svg) · [PNG 512](https://assets.flung.dev/brand/logo/flung-lockup-stacked-on-light-512.png) · [PNG 1024](https://assets.flung.dev/brand/logo/flung-lockup-stacked-on-light-1024.png) · [PNG 2048](https://assets.flung.dev/brand/logo/flung-lockup-stacked-on-light-2048.png) |
| On dark | Mark over name, on dark grounds | [SVG](https://assets.flung.dev/brand/logo/flung-lockup-stacked-on-dark.svg) · [PNG 512](https://assets.flung.dev/brand/logo/flung-lockup-stacked-on-dark-512.png) · [PNG 1024](https://assets.flung.dev/brand/logo/flung-lockup-stacked-on-dark-1024.png) · [PNG 2048](https://assets.flung.dev/brand/logo/flung-lockup-stacked-on-dark-2048.png) |
| Black | Mark over name, black | [SVG](https://assets.flung.dev/brand/logo/flung-lockup-stacked-black.svg) · [PNG 512](https://assets.flung.dev/brand/logo/flung-lockup-stacked-black-512.png) · [PNG 1024](https://assets.flung.dev/brand/logo/flung-lockup-stacked-black-1024.png) · [PNG 2048](https://assets.flung.dev/brand/logo/flung-lockup-stacked-black-2048.png) |
| White | Mark over name, white | [SVG](https://assets.flung.dev/brand/logo/flung-lockup-stacked-white.svg) · [PNG 512](https://assets.flung.dev/brand/logo/flung-lockup-stacked-white-512.png) · [PNG 1024](https://assets.flung.dev/brand/logo/flung-lockup-stacked-white-1024.png) · [PNG 2048](https://assets.flung.dev/brand/logo/flung-lockup-stacked-white-2048.png) |

### App icons

The tile, the favicon and the icons a browser or phone asks for.

| Variant | Use | Files |
|---|---|---|
| App icon | App icon with rounded corners | [SVG](https://assets.flung.dev/brand/logo/flung-mark-tile.svg) · [PNG 512](https://assets.flung.dev/brand/logo/flung-mark-tile-512.png) · [PNG 1024](https://assets.flung.dev/brand/logo/flung-mark-tile-1024.png) · [PNG 2048](https://assets.flung.dev/brand/logo/flung-mark-tile-2048.png) |
| App icon, full bleed | Full-bleed app icon, for stores and launchers that round corners themselves | [SVG](https://assets.flung.dev/brand/logo/flung-mark-tile-square.svg) · [PNG 512](https://assets.flung.dev/brand/logo/flung-mark-tile-square-512.png) · [PNG 1024](https://assets.flung.dev/brand/logo/flung-mark-tile-square-1024.png) · [PNG 2048](https://assets.flung.dev/brand/logo/flung-mark-tile-square-2048.png) |
| Favicon | Browser tab icon. The SVG follows the browser's scheme: ink on a light tab, paper on a dark one. | [SVG](https://assets.flung.dev/brand/favicon.svg) · [PNG 32](https://assets.flung.dev/brand/favicon-32.png) |
| Apple touch icon | Home screen icon on iPhone and iPad, which round the corners themselves. | [PNG 180](https://assets.flung.dev/brand/apple-touch-icon.png) |
| Web app icon | The icon in a web app manifest, and anywhere a 512 px square icon is asked for. | [PNG 512](https://assets.flung.dev/brand/icon-512.png) |

In a page, the icons go in the head:

```html
<link rel="icon" href="https://assets.flung.dev/brand/favicon.svg" type="image/svg+xml">
<link rel="icon" href="https://assets.flung.dev/brand/favicon-32.png" sizes="32x32">
<link rel="apple-touch-icon" href="https://assets.flung.dev/brand/apple-touch-icon.png">
```

## Colours

Ink and paper are the grounds and the text. Peach and sky are the two speed lines, and the glows. Their deep shades are for text on paper, where the pastels are too faint to read.

| Colour | Hex | RGB | Use |
|---|---|---|---|
| Ink | `#16141C` | 22, 20, 28 | Text, the post on light grounds, and the dark ground. |
| Paper | `#F7F6F3` | 247, 246, 243 | The light ground, and the post on dark grounds. |
| Peach | `#FFA584` | 255, 165, 132 | The upper speed line, the tile, highlights and glows. |
| Peach 800 | `#8F4325` | 143, 67, 37 | Peach for text and links on light grounds, where peach itself is too faint. |
| Sky | `#86C0FF` | 134, 192, 255 | The lower speed line and the cool glow. |
| Sky 300 | `#A9D3FF` | 169, 211, 255 | A softer sky for washes and light fills. |
| Sky 700 | `#2F6FB3` | 47, 111, 179 | Sky for text and links on light grounds. |

## Type

Three faces, all under the SIL Open Font License: Funnel Display for headings and the wordmark, Rethink Sans for body text and interface, Geist Mono for code, addresses and numbers. Each is served as a stylesheet and a variable font.

| Face | Use | Weights | Stylesheet |
|---|---|---|---|
| Funnel Display | Headings and the wordmark | 300 to 800 | [Funnel Display](https://assets.flung.dev/fonts/funnel-display-5.3.0/funnel-display.css) |
| Rethink Sans | Body text and interface | 400 to 800 | [Rethink Sans](https://assets.flung.dev/fonts/rethink-sans-5.3.0/rethink-sans.css) |
| Geist Mono | Code, addresses and numbers | 100 to 900 | [Geist Mono](https://assets.flung.dev/fonts/geist-mono-5.3.0/geist-mono.css) |

To use them in a page:

```html
<link rel="stylesheet" href="https://assets.flung.dev/fonts/funnel-display-5.3.0/funnel-display.css">
<link rel="stylesheet" href="https://assets.flung.dev/fonts/rethink-sans-5.3.0/rethink-sans.css">
<link rel="stylesheet" href="https://assets.flung.dev/fonts/geist-mono-5.3.0/geist-mono.css">
```

## Patterns

The three patterns of the covers on their own, as seamless tiles for pages and slides. Each comes light and dark.

| Pattern | Looks like | Light | Dark |
|---|---|---|---|
| Ripples | The bubble's rounded rectangle, without its tail, in widening rings, as if a post had just landed. | [SVG](https://assets.flung.dev/brand/pattern/flung-pattern-ripples-light.svg) · [PNG 2048](https://assets.flung.dev/brand/pattern/flung-pattern-ripples-light-2048.png) | [SVG](https://assets.flung.dev/brand/pattern/flung-pattern-ripples-dark.svg) · [PNG 2048](https://assets.flung.dev/brand/pattern/flung-pattern-ripples-dark-2048.png) |
| Tiles | Soft-cornered squares with the bubble's corner radius, on a grid turned to the mark's lean. | [SVG](https://assets.flung.dev/brand/pattern/flung-pattern-tiles-light.svg) · [PNG 2048](https://assets.flung.dev/brand/pattern/flung-pattern-tiles-light-2048.png) | [SVG](https://assets.flung.dev/brand/pattern/flung-pattern-tiles-dark.svg) · [PNG 2048](https://assets.flung.dev/brand/pattern/flung-pattern-tiles-dark-2048.png) |
| Lines | The mark's speed lines as rows of capsules, in a fixed rhythm of lengths, cut into the ground. | [SVG](https://assets.flung.dev/brand/pattern/flung-pattern-lines-light.svg) · [PNG 2048](https://assets.flung.dev/brand/pattern/flung-pattern-lines-light-2048.png) | [SVG](https://assets.flung.dev/brand/pattern/flung-pattern-lines-dark.svg) · [PNG 2048](https://assets.flung.dev/brand/pattern/flung-pattern-lines-dark-2048.png) |

## Social banners

A cover for each network, light and dark, with the words inside its safe area. Each is drawn on the ripples pattern; the [brand gallery](https://assets.flung.dev/brand/) has every banner on every pattern.

| Banner | Use | Light | Dark |
|---|---|---|---|
| LinkedIn company page | Company page: Edit page, Header, Cover image | [SVG](https://assets.flung.dev/brand/social/flung-linkedin-company-light.svg) · [PNG](https://assets.flung.dev/brand/social/flung-linkedin-company-light.png) · [JPEG](https://assets.flung.dev/brand/social/flung-linkedin-company-light.jpg) | [SVG](https://assets.flung.dev/brand/social/flung-linkedin-company-dark.svg) · [PNG](https://assets.flung.dev/brand/social/flung-linkedin-company-dark.png) · [JPEG](https://assets.flung.dev/brand/social/flung-linkedin-company-dark.jpg) |
| LinkedIn profile | Personal profile: the pencil on the background photo | [SVG](https://assets.flung.dev/brand/social/flung-linkedin-profile-light.svg) · [PNG](https://assets.flung.dev/brand/social/flung-linkedin-profile-light.png) · [JPEG](https://assets.flung.dev/brand/social/flung-linkedin-profile-light.jpg) | [SVG](https://assets.flung.dev/brand/social/flung-linkedin-profile-dark.svg) · [PNG](https://assets.flung.dev/brand/social/flung-linkedin-profile-dark.png) · [JPEG](https://assets.flung.dev/brand/social/flung-linkedin-profile-dark.jpg) |
| X header | X: Edit profile, header. Mastodon: Preferences, Public profile, Header. Farcaster: Edit profile, banner | [SVG](https://assets.flung.dev/brand/social/flung-x-light.svg) · [PNG](https://assets.flung.dev/brand/social/flung-x-light.png) · [JPEG](https://assets.flung.dev/brand/social/flung-x-light.jpg) | [SVG](https://assets.flung.dev/brand/social/flung-x-dark.svg) · [PNG](https://assets.flung.dev/brand/social/flung-x-dark.png) · [JPEG](https://assets.flung.dev/brand/social/flung-x-dark.jpg) |
| YouTube banner | YouTube Studio: Customisation, Branding, Banner image | [SVG](https://assets.flung.dev/brand/social/flung-youtube-light.svg) · [PNG](https://assets.flung.dev/brand/social/flung-youtube-light.png) · [JPEG](https://assets.flung.dev/brand/social/flung-youtube-light.jpg) | [SVG](https://assets.flung.dev/brand/social/flung-youtube-dark.svg) · [PNG](https://assets.flung.dev/brand/social/flung-youtube-dark.png) · [JPEG](https://assets.flung.dev/brand/social/flung-youtube-dark.jpg) |
| Bluesky banner | Edit profile, banner (upload the .jpg: Bluesky takes at most 1 MB) | [SVG](https://assets.flung.dev/brand/social/flung-bluesky-light.svg) · [PNG](https://assets.flung.dev/brand/social/flung-bluesky-light.png) · [JPEG](https://assets.flung.dev/brand/social/flung-bluesky-light.jpg) | [SVG](https://assets.flung.dev/brand/social/flung-bluesky-dark.svg) · [PNG](https://assets.flung.dev/brand/social/flung-bluesky-dark.png) · [JPEG](https://assets.flung.dev/brand/social/flung-bluesky-dark.jpg) |
| Facebook cover | Page: Edit cover photo, Upload photo | [SVG](https://assets.flung.dev/brand/social/flung-facebook-light.svg) · [PNG](https://assets.flung.dev/brand/social/flung-facebook-light.png) · [JPEG](https://assets.flung.dev/brand/social/flung-facebook-light.jpg) | [SVG](https://assets.flung.dev/brand/social/flung-facebook-dark.svg) · [PNG](https://assets.flung.dev/brand/social/flung-facebook-dark.png) · [JPEG](https://assets.flung.dev/brand/social/flung-facebook-dark.jpg) |
| GitHub social preview | Repository Settings, General, Social preview (the organisation picture is the avatar) | [SVG](https://assets.flung.dev/brand/social/flung-github-light.svg) · [PNG](https://assets.flung.dev/brand/social/flung-github-light.png) · [JPEG](https://assets.flung.dev/brand/social/flung-github-light.jpg) | [SVG](https://assets.flung.dev/brand/social/flung-github-dark.svg) · [PNG](https://assets.flung.dev/brand/social/flung-github-dark.png) · [JPEG](https://assets.flung.dev/brand/social/flung-github-dark.jpg) |
| Discord server banner | Server Settings, Server Profile, Server banner background | [SVG](https://assets.flung.dev/brand/social/flung-discord-light.svg) · [PNG](https://assets.flung.dev/brand/social/flung-discord-light.png) · [JPEG](https://assets.flung.dev/brand/social/flung-discord-light.jpg) | [SVG](https://assets.flung.dev/brand/social/flung-discord-dark.svg) · [PNG](https://assets.flung.dev/brand/social/flung-discord-dark.png) · [JPEG](https://assets.flung.dev/brand/social/flung-discord-dark.jpg) |
| Pinterest cover | Edit profile, Profile cover (16:9) | [SVG](https://assets.flung.dev/brand/social/flung-pinterest-light.svg) · [PNG](https://assets.flung.dev/brand/social/flung-pinterest-light.png) · [JPEG](https://assets.flung.dev/brand/social/flung-pinterest-light.jpg) | [SVG](https://assets.flung.dev/brand/social/flung-pinterest-dark.svg) · [PNG](https://assets.flung.dev/brand/social/flung-pinterest-dark.png) · [JPEG](https://assets.flung.dev/brand/social/flung-pinterest-dark.jpg) |
| Open Graph image | `og:image` and `twitter:image` on flung.dev pages | [SVG](https://assets.flung.dev/brand/social/flung-og-light.svg) · [PNG](https://assets.flung.dev/brand/social/flung-og-light.png) · [JPEG](https://assets.flung.dev/brand/social/flung-og-light.jpg) | [SVG](https://assets.flung.dev/brand/social/flung-og-dark.svg) · [PNG](https://assets.flung.dev/brand/social/flung-og-dark.png) · [JPEG](https://assets.flung.dev/brand/social/flung-og-dark.jpg) |
| Avatar | Profile picture on every network, Threads and TikTok included. The mark sits inside the circle every network cuts. | [SVG](https://assets.flung.dev/brand/social/flung-avatar-light.svg) · [PNG](https://assets.flung.dev/brand/social/flung-avatar-light.png) · [JPEG](https://assets.flung.dev/brand/social/flung-avatar-light.jpg) | [SVG](https://assets.flung.dev/brand/social/flung-avatar-dark.svg) · [PNG](https://assets.flung.dev/brand/social/flung-avatar-dark.png) · [JPEG](https://assets.flung.dev/brand/social/flung-avatar-dark.jpg) |

## Flungies

Flung's generated avatars: a plush speech bubble for each person, drawn from their id by @flung.dev/flungies. [Flungies](https://docs.flung.dev/reference/flungies.md) shows how to draw them.

### Animated Flungies

A few Flungies alive, breathing and blinking in a seamless loop, on a transparent ground, for decks and pages.

| Flungie | Id | Use | Light | Dark |
|---|---|---|---|---|
| Ocean tall with crown | `flung` | The Flungie of the seed "flung", alive: breathing and blinking in a seamless 7.2 s loop. | [WebP 512](https://assets.flung.dev/brand/flungies/motion/flungie-flung-light.webp) · [WebP 256](https://assets.flung.dev/brand/flungies/motion/flungie-flung-light-256.webp) · [WebM, alpha](https://assets.flung.dev/brand/flungies/motion/flungie-flung-light.webm) · [MP4 on paper](https://assets.flung.dev/brand/flungies/motion/flungie-flung-light.mp4) | [WebP 512](https://assets.flung.dev/brand/flungies/motion/flungie-flung-dark.webp) · [WebP 256](https://assets.flung.dev/brand/flungies/motion/flungie-flung-dark-256.webp) · [WebM, alpha](https://assets.flung.dev/brand/flungies/motion/flungie-flung-dark.webm) · [MP4 on ink](https://assets.flung.dev/brand/flungies/motion/flungie-flung-dark.mp4) |
| Moss squat with round glasses | `creator` | The Flungie of the seed "creator", alive: breathing and blinking in a seamless 7.2 s loop. | [WebP 512](https://assets.flung.dev/brand/flungies/motion/flungie-creator-light.webp) · [WebP 256](https://assets.flung.dev/brand/flungies/motion/flungie-creator-light-256.webp) · [WebM, alpha](https://assets.flung.dev/brand/flungies/motion/flungie-creator-light.webm) · [MP4 on paper](https://assets.flung.dev/brand/flungies/motion/flungie-creator-light.mp4) | [WebP 512](https://assets.flung.dev/brand/flungies/motion/flungie-creator-dark.webp) · [WebP 256](https://assets.flung.dev/brand/flungies/motion/flungie-creator-dark-256.webp) · [WebM, alpha](https://assets.flung.dev/brand/flungies/motion/flungie-creator-dark.webm) · [MP4 on ink](https://assets.flung.dev/brand/flungies/motion/flungie-creator-dark.mp4) |
| Ocean tall with ring light | `maya@northwind.studio` | The Flungie of the seed "maya@northwind.studio", alive: breathing and blinking in a seamless 7.2 s loop. | [WebP 512](https://assets.flung.dev/brand/flungies/motion/flungie-maya-northwind-studio-light.webp) · [WebP 256](https://assets.flung.dev/brand/flungies/motion/flungie-maya-northwind-studio-light-256.webp) · [WebM, alpha](https://assets.flung.dev/brand/flungies/motion/flungie-maya-northwind-studio-light.webm) · [MP4 on paper](https://assets.flung.dev/brand/flungies/motion/flungie-maya-northwind-studio-light.mp4) | [WebP 512](https://assets.flung.dev/brand/flungies/motion/flungie-maya-northwind-studio-dark.webp) · [WebP 256](https://assets.flung.dev/brand/flungies/motion/flungie-maya-northwind-studio-dark-256.webp) · [WebM, alpha](https://assets.flung.dev/brand/flungies/motion/flungie-maya-northwind-studio-dark.webm) · [MP4 on ink](https://assets.flung.dev/brand/flungies/motion/flungie-maya-northwind-studio-dark.mp4) |
| Ink puffy with bow | `sacha@flung.dev` | The Flungie of the seed "sacha@flung.dev", alive: breathing and blinking in a seamless 7.2 s loop. | [WebP 512](https://assets.flung.dev/brand/flungies/motion/flungie-sacha-flung-dev-light.webp) · [WebP 256](https://assets.flung.dev/brand/flungies/motion/flungie-sacha-flung-dev-light-256.webp) · [WebM, alpha](https://assets.flung.dev/brand/flungies/motion/flungie-sacha-flung-dev-light.webm) · [MP4 on paper](https://assets.flung.dev/brand/flungies/motion/flungie-sacha-flung-dev-light.mp4) | [WebP 512](https://assets.flung.dev/brand/flungies/motion/flungie-sacha-flung-dev-dark.webp) · [WebP 256](https://assets.flung.dev/brand/flungies/motion/flungie-sacha-flung-dev-dark-256.webp) · [WebM, alpha](https://assets.flung.dev/brand/flungies/motion/flungie-sacha-flung-dev-dark.webm) · [MP4 on ink](https://assets.flung.dev/brand/flungies/motion/flungie-sacha-flung-dev-dark.mp4) |
| Ocean wobbly with crown | `usr_8f3k2` | The Flungie of the seed "usr_8f3k2", alive: breathing and blinking in a seamless 7.2 s loop. | [WebP 512](https://assets.flung.dev/brand/flungies/motion/flungie-usr-8f3k2-light.webp) · [WebP 256](https://assets.flung.dev/brand/flungies/motion/flungie-usr-8f3k2-light-256.webp) · [WebM, alpha](https://assets.flung.dev/brand/flungies/motion/flungie-usr-8f3k2-light.webm) · [MP4 on paper](https://assets.flung.dev/brand/flungies/motion/flungie-usr-8f3k2-light.mp4) | [WebP 512](https://assets.flung.dev/brand/flungies/motion/flungie-usr-8f3k2-dark.webp) · [WebP 256](https://assets.flung.dev/brand/flungies/motion/flungie-usr-8f3k2-dark-256.webp) · [WebM, alpha](https://assets.flung.dev/brand/flungies/motion/flungie-usr-8f3k2-dark.webm) · [MP4 on ink](https://assets.flung.dev/brand/flungies/motion/flungie-usr-8f3k2-dark.mp4) |
| Ink wobbly with cap, backward | `usr_01hzx3k9qv` | The Flungie of the seed "usr_01hzx3k9qv", alive: breathing and blinking in a seamless 7.2 s loop. | [WebP 512](https://assets.flung.dev/brand/flungies/motion/flungie-usr-01hzx3k9qv-light.webp) · [WebP 256](https://assets.flung.dev/brand/flungies/motion/flungie-usr-01hzx3k9qv-light-256.webp) · [WebM, alpha](https://assets.flung.dev/brand/flungies/motion/flungie-usr-01hzx3k9qv-light.webm) · [MP4 on paper](https://assets.flung.dev/brand/flungies/motion/flungie-usr-01hzx3k9qv-light.mp4) | [WebP 512](https://assets.flung.dev/brand/flungies/motion/flungie-usr-01hzx3k9qv-dark.webp) · [WebP 256](https://assets.flung.dev/brand/flungies/motion/flungie-usr-01hzx3k9qv-dark-256.webp) · [WebM, alpha](https://assets.flung.dev/brand/flungies/motion/flungie-usr-01hzx3k9qv-dark.webm) · [MP4 on ink](https://assets.flung.dev/brand/flungies/motion/flungie-usr-01hzx3k9qv-dark.mp4) |
| Lilac classic with beanie | `usr_7d1c0b` | The Flungie of the seed "usr_7d1c0b", alive: breathing and blinking in a seamless 7.2 s loop. | [WebP 512](https://assets.flung.dev/brand/flungies/motion/flungie-usr-7d1c0b-light.webp) · [WebP 256](https://assets.flung.dev/brand/flungies/motion/flungie-usr-7d1c0b-light-256.webp) · [WebM, alpha](https://assets.flung.dev/brand/flungies/motion/flungie-usr-7d1c0b-light.webm) · [MP4 on paper](https://assets.flung.dev/brand/flungies/motion/flungie-usr-7d1c0b-light.mp4) | [WebP 512](https://assets.flung.dev/brand/flungies/motion/flungie-usr-7d1c0b-dark.webp) · [WebP 256](https://assets.flung.dev/brand/flungies/motion/flungie-usr-7d1c0b-dark-256.webp) · [WebM, alpha](https://assets.flung.dev/brand/flungies/motion/flungie-usr-7d1c0b-dark.webm) · [MP4 on ink](https://assets.flung.dev/brand/flungies/motion/flungie-usr-7d1c0b-dark.mp4) |
| Mint wobbly with headphones | `mem_1` | The Flungie of the seed "mem_1", alive: breathing and blinking in a seamless 7.2 s loop. | [WebP 512](https://assets.flung.dev/brand/flungies/motion/flungie-mem-1-light.webp) · [WebP 256](https://assets.flung.dev/brand/flungies/motion/flungie-mem-1-light-256.webp) · [WebM, alpha](https://assets.flung.dev/brand/flungies/motion/flungie-mem-1-light.webm) · [MP4 on paper](https://assets.flung.dev/brand/flungies/motion/flungie-mem-1-light.mp4) | [WebP 512](https://assets.flung.dev/brand/flungies/motion/flungie-mem-1-dark.webp) · [WebP 256](https://assets.flung.dev/brand/flungies/motion/flungie-mem-1-dark-256.webp) · [WebM, alpha](https://assets.flung.dev/brand/flungies/motion/flungie-mem-1-dark.webm) · [MP4 on ink](https://assets.flung.dev/brand/flungies/motion/flungie-mem-1-dark.mp4) |

## Workspace marks

Flung's generated workspace avatars: a squared, patterned tile with the workspace's initials, drawn from its id by @flung.dev/flungies/marks. [Workspace marks](https://docs.flung.dev/reference/workspace-marks.md) shows how to draw them.

| Workspace | Id | Looks like | Light | Dark |
|---|---|---|---|---|
| Northwind Studio | `ws_northwind` | Mint into sky lines | [SVG](https://assets.flung.dev/brand/marks/mark-ws-northwind-light.svg) · [PNG 512](https://assets.flung.dev/brand/marks/mark-ws-northwind-light-512.png) | [SVG](https://assets.flung.dev/brand/marks/mark-ws-northwind-dark.svg) · [PNG 512](https://assets.flung.dev/brand/marks/mark-ws-northwind-dark-512.png) |
| Kestrel Media | `ws_k2v9d3m8qp1tnb` | Rust into butter tiles | [SVG](https://assets.flung.dev/brand/marks/mark-ws-k2v9d3m8qp1tnb-light.svg) | [SVG](https://assets.flung.dev/brand/marks/mark-ws-k2v9d3m8qp1tnb-dark.svg) |
| Lumen Labs | `ws_c4r8x2wq7j0hsm` | Ink into plum tiles | [SVG](https://assets.flung.dev/brand/marks/mark-ws-c4r8x2wq7j0hsm-light.svg) | [SVG](https://assets.flung.dev/brand/marks/mark-ws-c4r8x2wq7j0hsm-dark.svg) |
| Quill Agency | `ws_p0n6t3z9b5vy2e` | Moss into ocean ripples | [SVG](https://assets.flung.dev/brand/marks/mark-ws-p0n6t3z9b5vy2e-light.svg) | [SVG](https://assets.flung.dev/brand/marks/mark-ws-p0n6t3z9b5vy2e-dark.svg) |
| Kettle & Co | `ws_e9j3w5r1x8kq4d` | Lilac into rose tiles | [SVG](https://assets.flung.dev/brand/marks/mark-ws-e9j3w5r1x8kq4d-light.svg) | [SVG](https://assets.flung.dev/brand/marks/mark-ws-e9j3w5r1x8kq4d-dark.svg) |
| Acme | `ws_1` | Coral into berry lines | [SVG](https://assets.flung.dev/brand/marks/mark-ws-1-light.svg) | [SVG](https://assets.flung.dev/brand/marks/mark-ws-1-dark.svg) |
| Bravo | `ws_2` | Berry into rust tiles | [SVG](https://assets.flung.dev/brand/marks/mark-ws-2-light.svg) | [SVG](https://assets.flung.dev/brand/marks/mark-ws-2-dark.svg) |
| Smoke tests | `ws_7` | Sky into lilac lines | [SVG](https://assets.flung.dev/brand/marks/mark-ws-7-light.svg) | [SVG](https://assets.flung.dev/brand/marks/mark-ws-7-dark.svg) |
| Sandbox | `ws_9` | Sand into peach ripples | [SVG](https://assets.flung.dev/brand/marks/mark-ws-9-light.svg) · [PNG 512](https://assets.flung.dev/brand/marks/mark-ws-9-light-512.png) | [SVG](https://assets.flung.dev/brand/marks/mark-ws-9-dark.svg) · [PNG 512](https://assets.flung.dev/brand/marks/mark-ws-9-dark-512.png) |
| Cloud Nine | `ws_134` | Cloud into sky ripples | [SVG](https://assets.flung.dev/brand/marks/mark-ws-134-light.svg) · [PNG 512](https://assets.flung.dev/brand/marks/mark-ws-134-light-512.png) | [SVG](https://assets.flung.dev/brand/marks/mark-ws-134-dark.svg) · [PNG 512](https://assets.flung.dev/brand/marks/mark-ws-134-dark-512.png) |
| GitHub | `org_demo` | Mint into sky tiles | [SVG](https://assets.flung.dev/brand/marks/mark-org-demo-light.svg) | [SVG](https://assets.flung.dev/brand/marks/mark-org-demo-dark.svg) |
| Flung | `flung` | Ocean into plum ripples | [SVG](https://assets.flung.dev/brand/marks/mark-flung-light.svg) | [SVG](https://assets.flung.dev/brand/marks/mark-flung-dark.svg) |
| Harbour Design | `ws_sample_f` | Butter into peach lines | [SVG](https://assets.flung.dev/brand/marks/mark-ws-sample-f-light.svg) | [SVG](https://assets.flung.dev/brand/marks/mark-ws-sample-f-dark.svg) |
| Pocket Bakery | `ws_sample_m` | Peach into coral tiles | [SVG](https://assets.flung.dev/brand/marks/mark-ws-sample-m-light.svg) | [SVG](https://assets.flung.dev/brand/marks/mark-ws-sample-m-dark.svg) |
| Orbit Ops | `ws_sample_n` | Ink into plum tiles | [SVG](https://assets.flung.dev/brand/marks/mark-ws-sample-n-light.svg) | [SVG](https://assets.flung.dev/brand/marks/mark-ws-sample-n-dark.svg) |
| Fern & Field | `ws_sample_o` | Peach into coral tiles | [SVG](https://assets.flung.dev/brand/marks/mark-ws-sample-o-light.svg) | [SVG](https://assets.flung.dev/brand/marks/mark-ws-sample-o-dark.svg) |
| Tidewater | `ws_sample_p` | Butter into peach ripples | [SVG](https://assets.flung.dev/brand/marks/mark-ws-sample-p-light.svg) | [SVG](https://assets.flung.dev/brand/marks/mark-ws-sample-p-dark.svg) |
| Moth Radio | `ws_sample_q` | Butter into peach tiles | [SVG](https://assets.flung.dev/brand/marks/mark-ws-sample-q-light.svg) | [SVG](https://assets.flung.dev/brand/marks/mark-ws-sample-q-dark.svg) |
| Copper Lane | `ws_sample_r` | Berry into rust lines | [SVG](https://assets.flung.dev/brand/marks/mark-ws-sample-r-light.svg) | [SVG](https://assets.flung.dev/brand/marks/mark-ws-sample-r-dark.svg) |
| Atlas Club | `ws_sample_s` | Lilac into rose lines | [SVG](https://assets.flung.dev/brand/marks/mark-ws-sample-s-light.svg) | [SVG](https://assets.flung.dev/brand/marks/mark-ws-sample-s-dark.svg) |
| Saffron | `ws_sample_t` | Ocean into plum lines | [SVG](https://assets.flung.dev/brand/marks/mark-ws-sample-t-light.svg) | [SVG](https://assets.flung.dev/brand/marks/mark-ws-sample-t-dark.svg) |
| Night Shift | `ws_sample_u` | Rust into butter tiles | [SVG](https://assets.flung.dev/brand/marks/mark-ws-sample-u-light.svg) | [SVG](https://assets.flung.dev/brand/marks/mark-ws-sample-u-dark.svg) |

## Motion

Animated clips of the mark, each for light and dark grounds. The transparent loaders sit on any surface; the others are drawn on the brand wash.

### Loaders and states

Transparent, so they sit on any surface. Tuned to read at 32 px.

| Clip | Timing | Use | Files |
|---|---|---|---|
| Throw | 1.4 s loop | Inline loading: buttons, table rows, the composer while a post is prepared. The bubble winds up, is thrown, and springs home as the speed lines streak. | [WebM, alpha](https://assets.flung.dev/brand/motion/flung-loader-throw-light.webm) · [MP4 on paper](https://assets.flung.dev/brand/motion/flung-loader-throw-light.mp4) |
| Ripple | 1.6 s loop | Longer waits where the loader sits alone: page loads, empty states, a post fanning out to every network. The lines draw in, the bubble pops, a ring of reach spreads. | [WebM, alpha](https://assets.flung.dev/brand/motion/flung-loader-ripple-light.webm) · [MP4 on paper](https://assets.flung.dev/brand/motion/flung-loader-ripple-light.mp4) |
| Send | 2.4 s, once per send | The success state after a post goes out. Flung off to the right with motion blur, it leaves ripples behind and sweeps back home. | [WebM, alpha](https://assets.flung.dev/brand/motion/flung-send-light.webm) · [MP4 on paper](https://assets.flung.dev/brand/motion/flung-send-light.mp4) |
| Pulse | 2 s seamless loop | A calm two-beat pulse with one soft ring per loop, on a transparent ground, for the corner of a live stream. Nothing flickers or jumps. | [WebM, alpha](https://assets.flung.dev/brand/motion/flung-extra-pulse-light.webm) · [MP4 on paper](https://assets.flung.dev/brand/motion/flung-extra-pulse-light.mp4) |

### Every network

One post out to every network: the story of Flung, in wide, square and vertical.

| Clip | Timing | Use | Files |
|---|---|---|---|
| Every network | 4.8 s seamless loop | What Flung does, in one move: the post splits into seven small posts that fly out to the edges, each landing with a ring, then they fly home and flow back into one. For explainers and pitch decks. | [MP4](https://assets.flung.dev/brand/motion/flung-extra-broadcast-light.mp4) · [WebM](https://assets.flung.dev/brand/motion/flung-extra-broadcast-light.webm) |
| Hub | 6 s seamless loop | The post at the centre of twelve networks: twice a loop a small post runs down every spoke at once, and each network lights as one lands. For product pages and explainers. | [MP4](https://assets.flung.dev/brand/motion/flung-net-hub-light.mp4) · [WebM](https://assets.flung.dev/brand/motion/flung-net-hub-light.webm) |
| Schedule | 6 s seamless loop | Posts wait on a timeline sliding toward a "now" line, and each is flung away as it reaches it. For scheduling features and queue views. | [MP4](https://assets.flung.dev/brand/motion/flung-net-schedule-light.mp4) · [WebM](https://assets.flung.dev/brand/motion/flung-net-schedule-light.webm) |
| One post, every network | 6 s at 9:16, holds from 3.9 s | "One post." The post splits into twelve that drop into a grid of networks, "Every network." rises, and the address settles at the foot. For Stories, Reels and Shorts. | [MP4](https://assets.flung.dev/brand/motion/flung-net-story-light.mp4) · [WebM](https://assets.flung.dev/brand/motion/flung-net-story-light.webm) |
| Refresh | 1.8 s loop | Reconnecting and syncing states: the two speed lines chase each other round the post as arcs, then settle back into the logo. Transparent, like the loaders. | [WebM, alpha](https://assets.flung.dev/brand/motion/flung-net-refresh-light.webm) · [MP4 on paper](https://assets.flung.dev/brand/motion/flung-net-refresh-light.mp4) |

### Film

Openers, titles, calls to action, transitions and closers, on the brand wash.

| Clip | Timing | Use | Files |
|---|---|---|---|
| Intro sting | 4.4 s, ends on a 1 s hold | Opens product films, launch videos and talks. Thrown in on an arc, it lands, the camera eases back and the wordmark rises letter by letter. The last second is still, so an editor can cut on it. | [MP4](https://assets.flung.dev/brand/motion/flung-sting-light.mp4) · [WebM](https://assets.flung.dev/brand/motion/flung-sting-light.webm) |
| End card | 3.6 s, holds on the card | Closes films and recorded demos. The lockup comes into focus over a pattern pressed into the ground and lit by a travelling light, with the address beneath. | [MP4](https://assets.flung.dev/brand/motion/flung-endcard-light.mp4) · [WebM](https://assets.flung.dev/brand/motion/flung-endcard-light.webm) |
| Ambient | 10 s seamless loop | Holding screens for streams, talks and events. The ripples drift out one ring per loop while a light circles, so it can repeat for hours without a visible seam. | [MP4](https://assets.flung.dev/brand/motion/flung-ambient-light.mp4) · [WebM](https://assets.flung.dev/brand/motion/flung-ambient-light.webm) |
| Title card | 4 s, holds from 1.4 s | A chapter or section title: the speed lines draw out as a bullet, the eyebrow fades up and the title rises through a mask. Takes eyebrow and title text. | [MP4](https://assets.flung.dev/brand/motion/flung-film-title-light.mp4) · [WebM](https://assets.flung.dev/brand/motion/flung-film-title-light.webm) |
| Call to action | 4.5 s, holds from 1.8 s | An end card that asks for one thing: the install command, the docs, the free trial, or a subscribe-style outro. Takes headline and action text. | [MP4](https://assets.flung.dev/brand/motion/flung-film-cta-light.mp4) · [WebM](https://assets.flung.dev/brand/motion/flung-film-cta-light.webm) |
| Countdown | 4 s, ends on the mark | 3, 2, 1 inside a ring that runs down with each second, then the mark lands. For live starts, launches and premieres. | [MP4](https://assets.flung.dev/brand/motion/flung-film-countdown-light.mp4) · [WebM](https://assets.flung.dev/brand/motion/flung-film-countdown-light.webm) |
| Stat | 4.5 s, holds from 2.6 s | A number rolls up like an odometer with its label beneath. Takes value and label. | [MP4](https://assets.flung.dev/brand/motion/flung-film-stat-light.mp4) · [WebM](https://assets.flung.dev/brand/motion/flung-film-stat-light.webm) |
| Vertical reveal | 4 s at 9:16, holds from 2.4 s | The logo reveal for Reels, TikTok and Shorts: thrown up from the bottom, it lands and the wordmark rises beneath it into the stacked lockup. | [MP4](https://assets.flung.dev/brand/motion/flung-film-vertical-light.mp4) · [WebM](https://assets.flung.dev/brand/motion/flung-film-vertical-light.webm) |
| Wipe | 1.2 s, covers the frame at 0.6 s | A scene transition on a transparent ground: lay it over a cut at 0.6 s. A giant post sweeps across, or the two speed lines streak through as bands. | [WebM, alpha](https://assets.flung.dev/brand/motion/flung-film-wipe-light.webm) · [MP4 on paper](https://assets.flung.dev/brand/motion/flung-film-wipe-light.mp4) |

### Social

Video headers composed like the social covers, for profiles that take video.

| Clip | Timing | Use | Files |
|---|---|---|---|
| Banner loop | 8 s seamless loop | A video header composed like the social covers: the lockup and tagline in the safe area, the ripples drifting at the right. X and LinkedIn headers, and a 16:9 channel bumper. | [MP4](https://assets.flung.dev/brand/motion/flung-banner-loop-light.mp4) · [WebM](https://assets.flung.dev/brand/motion/flung-banner-loop-light.webm) |

### Backgrounds

Seamless loops of the brand patterns pressed into the ground and lit by moving light.

| Clip | Timing | Use | Files |
|---|---|---|---|
| Wave | 8 s seamless loop | A swell crosses the pressed pattern: each tile rises out of the ground as the crest reaches it, stands proud and casts a soft shadow, then sinks back. For slides and keynote backdrops. | [MP4](https://assets.flung.dev/brand/motion/flung-bg-wave-light.mp4) · [WebM](https://assets.flung.dev/brand/motion/flung-bg-wave-light.webm) |
| Flow | 10 s seamless loop | Speed lines running across the pressed surface in two depths, the far layer slower and out of focus. Momentum without distraction behind a talking head or a product demo. | [MP4](https://assets.flung.dev/brand/motion/flung-bg-flow-light.mp4) · [WebM](https://assets.flung.dev/brand/motion/flung-bg-flow-light.webm) |
| Breathe | 10 s seamless loop | Ripples from a point right of centre, drifting outward with two slow swells of depth and a circling light. Composed like the social covers, with the left kept calm for words. | [MP4](https://assets.flung.dev/brand/motion/flung-bg-breathe-light.mp4) · [WebM](https://assets.flung.dev/brand/motion/flung-bg-breathe-light.webm) |
| Spotlight | 12 s seamless loop | A low, soft light glides over a still pattern like a cursor, and the relief appears where it rakes across. Made for website heroes, behind a headline. | [MP4](https://assets.flung.dev/brand/motion/flung-bg-spotlight-light.mp4) · [WebM](https://assets.flung.dev/brand/motion/flung-bg-spotlight-light.webm) |
| Deboss | 10 s seamless loop | The mark pressed into the ground, tone on tone, with a trace of peach and sky in its speed lines and a light circling it. For a waiting screen or the back of a stage. | [MP4](https://assets.flung.dev/brand/motion/flung-bg-deboss-light.mp4) · [WebM](https://assets.flung.dev/brand/motion/flung-bg-deboss-light.webm) |
| Dolly | 12 s seamless loop | A slow camera move low over a wide field of the pattern, sharp in the middle distance and soft near and far. The most cinematic of the set: titles over it read well. | [MP4](https://assets.flung.dev/brand/motion/flung-bg-dolly-light.mp4) · [WebM](https://assets.flung.dev/brand/motion/flung-bg-dolly-light.webm) |

### Extras

A lower third for footage, and a pulse for live streams.

| Clip | Timing | Use | Files |
|---|---|---|---|
| Lower third | 2.5 s, holds from 1.3 s | A compact lockup reveal on a transparent ground, cropped tight, to lay over footage. The bubble is tossed in, the lines draw out, the wordmark slides from behind it. | [WebM, alpha](https://assets.flung.dev/brand/motion/flung-extra-lowerthird-light.webm) · [MP4 on paper](https://assets.flung.dev/brand/motion/flung-extra-lowerthird-light.mp4) |

## Using the logo

### Do

- **Leave clear space.** Keep a margin around the logo at least as wide as the speed lines are long (a quarter of the mark's height). The files already carry it.
- **Mind the minimum size.** Show the mark at 16 px or more and the lockup at 80 px wide or more on screen. Below that, use the tile or the favicon.
- **Match the ground.** Use the on-light files on paper and light photos, the on-dark files on ink and dark photos, and black or white for one-colour print.

### Do not

- **Do not recolour.** Keep ink or paper for the post, peach for the upper line and sky for the lower one. For one colour, use the black or white file.
- **Do not stretch or squash.** Scale the logo by its width and height together. Never change its proportions.
- **Do not rotate or add effects.** The post already leans 14 degrees. Do not turn it further, outline it, or add shadows, glows or gradients.
- **Do not rebuild the wordmark.** The name is traced from Funnel Display at 750. Do not retype it in another face or weight; use the lockup files.

## Everything at once

| What | Where |
|---|---|
| Every file, to look at and download | [The brand gallery](https://assets.flung.dev/brand/) |
| Every file, for code: groups, colours, faces, patterns, clips, sizes and snippets | [`manifest.json`](https://assets.flung.dev/brand/manifest.json) |