Animate j;l — A:// Motion language
A motion spec for the A:// Design System, drawn on four artboards.
What I read into the brief
The name gives one word to work with: Animate. So I built the motion layer of the A:// Design System. A designer or an engineer opens it to find how long a move takes, which curve it uses, and where it comes from.
The brand direction is fixed by the active design system, so I did not ask about it. Ivory #FAF8F4, graphite #1F1B16, one amber accent #B08D6E, Newsreader display over a quiet sans, mono for kickers and data.
If you meant something else by "Animate j;l", say the word and I will rebuild it on the same palette.
The four artboards
| # | Artboard | Size | What is on it |
|---|---|---|---|
| 01 | Overview | 1440 x 900 | Headline, the one rule, three principles |
| 02 | Durations and curves | 1440 x 900 | The four durations, the four easing charts |
| 03 | Patterns | 1440 x 1240 | Four pattern cards, plus a six-frame entrance strip |
| 04 | Applied | 390 x 844 | A phone screen with a sheet, annotated in amber |
The tokens in it
instant 80ms press and release, checkbox, opacity under the fingerquick 160ms hover, toggle, tooltip, skeleton to contentbase 240ms enter and exit, panel, sheet, menu, toastlong 400ms route change, shared-element movesenter cubic-bezier(.22, 1, .36, 1)exit cubic-bezier(.4, 0, 1, 1)move cubic-bezier(.45, .05, .55, .95)emphasis cubic-bezier(.34, 1.2, .64, 1)These are my choices, not values taken from an existing spec. Change any of them and the artboard text changes with it.
How I checked it
I rendered the canvas twice and looked at the picture. The first pass showed four defects:
- the easing charts had stray rules instead of a plot frame
- the right footer wrapped onto two lines
- the entrance strip sat 8px under the pattern cards
- both phone cards carried the same stub text
All four are fixed in the version you have.
Two names are still stubs: [OWNER] on the phone cards. I had no real names to put there, so I left the label visible.