Workspace marks

• Personusr_8f3k2WorkspaceNorthwind Studio
• Personusr_01hzx3k9qvWorkspaceKestrel Media
• Personusr_7d1c0bWorkspaceLumen Labs
• Personusr_aWorkspaceQuill Agency
• Personusr_bWorkspaceKettle & Co
• PersonflungWorkspaceAcme

TL;DR

What a mark is

@flung.dev/flungies/marks draws workspaces. People get Flungies, which are round characters with a face. Workspaces get marks, which are squared objects, so the two never read as one another:

• A squircle with a 22% corner radius, never a circle.
• One of the brand's three patterns, embossed or debossed: tiles, lines or ripples.
• A two-tone pair from the Flungies palette, lit like the brand wash: the ground at the top left, turning toward the tone at the bottom right.
• The workspace's initials in Funnel Display at 750, in a calm zone where the pattern fades out.
• Two tiny speed lines in a corner, sometimes, from 64 px.

Try it

Type a workspace's name and see its mark at every size, with the traits its id picked. It opens on Northwind Studio.

Install

npm install @flung.dev/flungies

Use

Flungies are for people. For workspaces, teams and organisations, @flung.dev/flungies/marks draws a workspace mark: a squircle pressed with one of three patterns (tiles, lines or ripples), in a two-tone colour pair, with the workspace's initials on top. A person is round and a workspace is square, so the two never read as one another.

1import { workspaceMark, markTraits, renderMark, markInitials, plainMark } from '@flung.dev/flungies/marks'2
3workspaceMark(workspace.id, { size: 32, theme: 'dark', name: workspace.name })    // an SVG string4renderMark(markTraits(workspace.id, { pattern: 'ripples' }), { size: 256, animate: true })5markInitials('Northwind Studio')                                                    // 'NS'6plainMark(workspace.id, { size: 24, name: workspace.name })                         // initials on a tint, no pattern

Seed with the workspace's ID and pass its name for the initials, so a rename changes the letters but not the mark. Under 24 px a mark shows one letter.

Marks on a server

1import { workspaceMark } from '@flung.dev/flungies/marks'2
3export default {4  fetch(request: Request): Response {5    const url = new URL(request.url)6    const id = url.searchParams.get('id') ?? ''7    const name = url.searchParams.get('name') ?? undefined8    const size = Math.min(512, Math.max(16, Number(url.searchParams.get('size')) || 64))9    const theme = url.searchParams.get('theme') === 'dark' ? 'dark' : 'light'10    return new Response(workspaceMark(id, { size, name, theme }), {11      headers: { 'content-type': 'image/svg+xml', 'cache-control': 'public, max-age=86400' },12    })13  },14}

The initials follow the name, which can change, so cache a mark for a day rather than forever, or put the name in the URL as above.

Marks in React and as an element

1import { WorkspaceMark } from '@flung.dev/flungies/react'2
3<WorkspaceMark seed={workspace.id} name={workspace.name} size={32} />4<WorkspaceMark seed={workspace.id} name={workspace.name} size={96} theme="dark" animated />

1import { defineWorkspaceMark } from '@flung.dev/flungies/element'2defineWorkspaceMark()   // registers <flung-mark>

<flung-mark seed="ws_8f3k2" name="Northwind Studio" size="32" theme="dark"></flung-mark>

The element takes the attributes seed, name, size, theme, initials (letters, or none), salt and animated. On a page that may not assign innerHTML, append toSvgElement(workspaceMark(...)), which /marks exports too.

Also exported from /marks: MARK_TRAITS and the tables (MARK_PAIRS, MARK_PATTERNS and the rest), markCombinations() (25,200 discrete trait sets), markPalette(), markGeometry() and describeMark(), the accessible name each SVG carries.

Size tiers

A mark is drawn for its size: a small one has fewer, bolder features and one letter, a large one gains the signature, the grain and the sweep.

The sweep is a soft band, masked to the lit walls, that crosses the tile every 9 seconds in SMIL. A <style> inside the SVG hides it under prefers-reduced-motion, which leaves the still mark.

Colour

• Letters are ink or paper, whichever contrasts more with the pair's midpoint. Every pair gives at least 4:1, as a Flungie's eyes do. The mark is decorative: the name always sits beside it.
• Walls: the lit wall is the ground mixed toward white, and the shaded wall the midpoint mixed toward a deep violet. Dark pairs, with a midpoint luminance under 0.12, mix toward black instead.
• A rim: if the midpoint's contrast with the page is under 1.5, a rim is stroked round the tile, lighter on the dark page and darker on the light one. Ink gets one on dark, and Butter on light.
• The signature uses the brand pair, peach over sky, unless another line pair stands further from the tile in OKLab.
• plainMark, the fallback with no pattern, tints the pair's ground 68% toward white (light) or 72% toward ink (dark), and holds its letters at 4.5:1.

The stability promise

A workspace's mark never changes, as a person's Flungie never does: every release is checked against a fixed set of workspaces and the exact SVG each one draws, and a change that would alter one ships behind an option. Only the initials follow the name, so a rename changes the letters on the same mark.

Traits

Every trait draws from a stream of its own, seeded by the id, so overriding one never changes another. The chance is how often an id picks the option; overrides picks it outright.

Patterns

One of the brand's three patterns, pressed into the tile.

Colour pairs

A ground, a Flungies body colour, turning toward its neighbour on the wheel.

Finishes

Raised or pressed: pressed features swap the lit and shaded walls.

Scales

How large the features are, and so how many fit.

Angles

The lean of the pattern. 14 degrees is the lean of the mark.

Ripple centres

Where the rings start. Ripples only.

Line rhythms

The run of capsule lengths along each row. Lines only.

Signatures

Two tiny speed lines in a corner, from 64 px, or none.

Accessibility

A mark is an image with a name: the SVG carries role="img" and an aria-label such as "Workspace mark NS: Mint into sky lines", which describeMark() returns too. The workspace's name almost always sits beside it, so there it is decorative: hide it with aria-hidden="true" on what holds it.

The letters are ink or paper, whichever stands further from the tile, at 4:1 or more. The sweep appears from 64 px only when asked for, and a style inside the SVG hides it under prefers-reduced-motion.

See also