Brand
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.
Lockup
The mark and the name on one line: the logo to use first.
Stacked lockup
The mark over the name, for square spaces.
App icons
The tile, the favicon and the icons a browser or phone asks for.
In a page, the icons go in the head:
<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.
- Ink
#16141CRGB 22, 20, 28Text, the post on light grounds, and the dark ground. - Paper
#F7F6F3RGB 247, 246, 243The light ground, and the post on dark grounds. - Peach
#FFA584RGB 255, 165, 132The upper speed line, the tile, highlights and glows. - Peach 800
#8F4325RGB 143, 67, 37Peach for text and links on light grounds, where peach itself is too faint. - Sky
#86C0FFRGB 134, 192, 255The lower speed line and the cool glow. - Sky 300
#A9D3FFRGB 169, 211, 255A softer sky for washes and light fills. - Sky 700
#2F6FB3RGB 47, 111, 179Sky 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.
The social media API for apps and agents
One API to publish, schedule and read posts across every network, for apps and for agents.
await flung.posts.create({ text: "Hello" })
To use them in a page:
<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.
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 (opens in a new tab) has every banner on every pattern.
Flungies
Flung's generated avatars: a plush speech bubble for each person, drawn from their id by @flung.dev/flungies. Flungies 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.
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 shows how to draw them.
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.
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.
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.
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.
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.
Every network
One post out to every network: the story of Flung, in wide, square and vertical.
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.
Film
Openers, titles, calls to action, transitions and closers, on the brand wash.
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.
Social
Video headers composed like the social covers, for profiles that take video.
Backgrounds
Seamless loops of the brand patterns pressed into the ground and lit by moving light.
Extras
A lower third for footage, and a pulse for live streams.
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.
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 (opens in a new tab) |
| Every file, for code: groups, colours, faces, patterns, clips, sizes and snippets | manifest.json (opens in a new tab) |