Pl. I etourneau · brand and design system GitHub

The amethyst starling

Sturnus etourneaui · one bird, four parts, one package · npm i etourneau

i. La silhouette

`etourneau/logo`

The bird drawn once and kept as files: the logo in six variants, the illustrations (the shot, the flight, the family on the wire), 29 icons, avatars and favicons. Ready for an <img>; their colours follow the tokens.

uses: nothing
also: /icons, /illustrations, /avatars, /favicon

ii. Le plumage

`etourneau/tokens.css`

The values the bird is made of, and everything around it: type, spacing, motion. One source, tokens.json, read everywhere as --fe-* variables, in light and in dark.

--fe-logo-body
--fe-logo-wing
--fe-logo-belly
--fe-logo-beak

and the rest of the palette

--fe-primary
--fe-focus
--fe-night
--fe-ink
--fe-breast
--fe-accent
--fe-sand-100
--fe-sand-300
--fe-sand-500
--fe-sheen-400
--fe-success
--fe-warning
--fe-danger

uses: nothing
also: /tokens.json, the source

The colours in the guidelines

iii. Le mouvement

`etourneau/starling`

Everything the bird does: it raises its wing, turns its head, walks, shoots, flaps and glides, takes off and lands. The same drawing, cut into parts that turn around their pivots (the wing around the shoulder, the head, the legs), with no second drawing: geometry and a little maths, the wing beat in an SVG, one animation loop. No dependency.

uses: nothing

Every gesture, in slow motion

iv. La nuée

`etourneau/murmuration`

Hundreds of small starlings that land on points and draw shapes: here, the bird itself. Point at it: they take off, then land on their place again. The engine is open source, @flogeez/murmuration (MIT, a plain bird); this layer gives it the starling, the purple and the brand's shapes.

uses: etourneau/starling, @flogeez/murmuration

Where the starling lives

Website florian-etourneau.dev florian-etourneau.dev Florian's site, where everything is used: the shot, the flight, the family on the wire, the flock along the read.

Open source · MIT github.com/FloGeez/murmuration @flogeez/murmuration The engine of the flock, outside the brand: a plain bird, or any glyph. Its demo writes a word, draws a line, copies the code. The demo · The source

In this repository

Guidelines · in FrenchThe brand guidelinesColours, type, icons, illustrations, components, the animation script: everything, in one page.

Demo · etourneau/starlingThe articulated starlingEvery gesture, with slow motion.

Demo · etourneau/murmurationThe flock in the brandThe starling and the brand's shapes; ?debug shows the places.