Skip to content
Werklist Brand Guidelines

Motion.

Purposeful. Responsive. Restrained. Most interactions complete in 150–300ms. No framer-motion. No scroll-linked parallax. Every transition respects prefers-reduced-motion.

07.1

Principles

  1. 01

    Purposeful

    Motion communicates state. It never decorates.

  2. 02

    Responsive

    Most interactions complete in 150–300ms.

  3. 03

    Restrained

    Obey prefers-reduced-motion. Transforms collapse to 0.

07.2

Duration

  • 100 msToggles, fades on fast elements--duration-instant
  • 150 msDefault on most interactive elements--duration-fast
  • 200 msJobCard hover, CTA hover with transform--duration-default
  • 300 msHeader scroll-morph, modal transitions--duration-slow

07.3

Easing

Two curves. The third is deprecated.

Standard

cubic-bezier(0.4, 0, 0.2, 1)

Default. Tailwind default, jobs canon.

Entrance

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

Entrance animations.

Deprecated

cubic-bezier(0.165, 0.84, 0.44, 1). retained only for legacy corporate site migration.

07.4

Patterns in use

  • Color transitiontransition-colors (default 150ms)
  • Hover lift on cardstransition-all duration-200 + -translate-y-[1px] + shadow-lift
  • Header morph on scrolltransition-all duration-300 (threshold 12px)
  • Arrow nudge on CTAstransition-transform group-hover:translate-x-0.5
  • Loading spinneranimate-spin (Tailwind default)
  • Live-status pulseanimate-pulse (Tailwind default)
  • Smooth scrollingscroll-behavior: smooth globally

07.5

What's deprecated

  • The word-by-word sliding-headline animation (Pixfort era). Reads as theme-shop. Stillness is more confident.
  • No framer-motion.
  • No custom @keyframes beyond Tailwind’s two built-in.
  • No scroll-linked parallax.