The motionhub brand

The site is quiet so the motions can be loud. motionhub's own look is paper and ink, one ordinary type family, and one vermilion that belongs to the logo and to the one action a page asks for. Everything here is the source the site and the logo files are made from.

#Files

#Colour

• The interface is ink on paper. Buttons, links and focus are text, not a colour (accent aside): colour on the page is the motions' posters and samples.
• Vermilion is three tokens with three jobs. mark is the logo; like is a like the viewer has given; accent is the one thing a page most wants a visitor to do, at most once a page. None is a link colour or a warning.
• Every text colour reads on every ground at WCAG AA (4.5:1), mark, like and accent at 3:1, and on-accent on accent at 4.5:1. tests/brand.test.mjs holds the tokens to it, so a colour that fails does not merge.
• Dark follows the system unless a page sets data-theme="light"; data-theme="dark" forces it. The footer's theme switch sets it, and remembers the choice in the browser.
• Remotion's and HyperFrames' logos appear beside their names where a motion works in them, as each project draws them (site/src/assets/engines/). They are their owners' marks, never recoloured or used for anything else.

#Type

• Inter for Latin and figures, at 400, 500 and 600. Chinese is set in Noto Sans SC where it is installed and otherwise in the system's own: PingFang SC on Apple devices, Microsoft YaHei on Windows, Noto Sans CJK on Android. The site does not download a Chinese font: its pieces would be most of a page's weight, and every system has a good one.
• JetBrains Mono for commands, file names, versions and hex values.
• Sizes are few: 12, 13, 14 (body), 16, 20, 26 and 30 px. The interface is compact; a motion's name is the largest thing on its page.
• Instrument Serif is the wordmark's typeface and appears nowhere else. It ships as outlines in the logo files, never as a font on a page.

All four are under the SIL Open Font License 1.1. The site serves Inter and JetBrains Mono itself, not from a font service.

#The logo

The mark is a ball in flight with its in-betweens, four circles rising up and to the right, the earlier ones fainter. It reads as movement in one direction, which is what a motion gives a film.

• The mark always leans up and to the right. Do not mirror, rotate or reorder it.
• The wordmark is motion in roman and hub in italic, lower case, one word.
• In the lockup the mark is a little shorter than the wordmark's ink and sits centred on it, a quarter of the font size apart. Keep clear space of at least the height of the h around it.
• On paper or white use logo.svg; on ink use logo-dark.svg; on anything else use wordmark.svg in one colour that reads on it, without the mark.
• Below 24 px use an icon, not the lockup; at 16 px use icon-16.svg.
• Do not recolour the mark, add effects, set the wordmark in another typeface, or put the logo on a poster.

#Changing it

• A colour, size or font: edit brand.tokens.json, then node tools/brand.mjs (or npm run brand) to write tokens.css. node tools/brand.mjs --check and npm test fail while it is out of date.

• The logo, icons or share card: they are drawn from the mark's geometry in source/build-logo.py and the tokens' colours. Download Instrument Serif's two styles (github.com/google/fonts, ofl/instrumentserif), then

  pip install fonttools          # and librsvg for rsvg-convert
  python3 brand/source/build-logo.py InstrumentSerif-Regular.ttf InstrumentSerif-Italic.ttf
  

  Commit what it writes. The tests check that every SVG uses the brand's colours only and needs no font or script.