BRAND KIT® — MOTION

MOTION

Motion is a fundamental part of the brand's personality. It communicates responsiveness, intelligence, and care. All motion must feel purposeful — never decorative for its own sake.

Motion principles visualization

01 — PRINCIPLE

Motion Principles

Purposeful

Every animation communicates something — state change, hierarchy, spatial relationship. Remove any motion that does not serve the user.

Responsive

Motion reacts immediately to input. Users should never wait for an animation to complete before acting.

Grounded

Elements obey physical principles. They do not appear from nowhere — they enter from a logical origin point.

Invisible

The best motion goes unnoticed. It guides without distracting. If a user comments on the animation, it is too prominent.

02 — TYPE

Easing Curves

Click any curve to preview it. All easing values are provided as CSS cubic-bezier notation.

03 — LOGOTYPE & INTRO

Duration Scale

Duration values are fixed. Use only values from this scale. Interpolating between values is not permitted.

Instant

100ms

Micro-interactions, hover states

Fast

200ms

Button press, icon swap, toggle

Standard

300ms

Modal open/close, tooltip

Deliberate

500ms

Page transitions, hero entrance

Slow

800ms

Intro sequences, brand moments only

04 — THE SQUARE

The Square

The Square mark has one approved motion: a single, clean fade-in on load. No rotation, no bounce, no particle effects. The mark earns its moment through stillness after arrival, not animation.

opacity: 0 → 1

Animation type

340ms

Duration

cubic-bezier(0.0, 0.0, 0.2, 1)

Easing (Enter curve)

0ms

Delay

05 — LOGOTYPE

Logotype

The logotype animates in one character at a time from left to right using a staggered fade+y translation. This sequence is used only in brand intro animations. In product interfaces, the logotype does not animate.

01

PX mark fades in · 340ms · Enter curve

02

'paxeer' characters stagger in · 40ms per char · y: -8px → 0 · opacity: 0 → 1

03

Full lockup holds for 800ms

04

Transition to content · full lockup fades · 220ms · Exit curve

06 — INTRO / OUTRO

Intro / Outro

Brand intro and outro sequences for video, presentations, and product onboarding. These are the only contexts where the logo may animate beyond a simple fade.

INTRO · 1.8s

  • 0s — Black field
  • 0.2s — PX mark fades in (340ms, Enter)
  • 0.6s — Logotype stagger (40ms/char)
  • 1.1s — Full lockup at rest
  • 1.5s — Content begins to enter
  • 1.8s — Intro complete

OUTRO · 1.2s

  • 0s — Content is visible
  • 0.3s — Content fades out (Exit curve)
  • 0.7s — Full lockup fades in (Enter curve)
  • 1.0s — Lockup at rest for 200ms
  • 1.2s — Black field · End

04 — MISUSE

Motion Misuse

The following patterns are strictly prohibited in all brand and product contexts.

  • 01Never use linear easing (linear timing function) for any UI animation
  • 02Bounce easing is prohibited outside of explicit brand moments
  • 03Never animate color alone — always pair with another property
  • 04Do not use duration values outside the approved scale
  • 05Parallax effects are prohibited in product interfaces
  • 06Never loop decorative animations that the user cannot pause