Creative engineering studio

Animation, designed — not just added

We turn scroll, transitions and micro-interactions into a calm, coherent system — the difference between a site that works and a site that feels crafted.

Section 01 · Hero
1 sourcedesign-system.md
2 propstransform · opacity
600msmax entrance
3 testsphone · reduced · scroll
The method

System first.
Every section after it.

01

Lock the system

Palette with hex, type scale, spacing, radius, motion tier — written to a file before a single component exists.

02

Enforce it

The exact values go into every generation. If something doesn't fit, we change the system — never make an exception.

03

Section by section

Each piece is built against the previous one. Coherence is engineered, not hoped for.

04

Animate the right things

Only transform & opacity. Under 600ms. Reduced-motion branches on every effect.

# design-system.md
palette: #16181D / #FAF7F2 / #D9472B / #1F3A5F
display: Playfair Display 900 · body: Inter
space: 4·8·16·32·64·96 · radius: 3px
motion: measured · 360–720ms · cubic(.22,.61,.21,1)
# rule — every animation
animate: transform, opacity
respect: prefers-reduced-motion
teardown: on unmount · no double-run
# verdict — nothing outside the system ships.
  • 01
    Palette & its job

    Every hex has a stated role — ink for type, paper for ground, one accent for the action.

  • 02
    Type pairing

    A serif display for voice, a sans for UI — locked, not improvised per screen.

  • 03
    Motion tier

    How fast, how far, what easing. One setting, applied everywhere.

  • 04
    Reduced-motion branch

    Calmer, never broken — every effect has a static fallback.

What you get

Three checks before it ships

Test 01
A real phone

Loaded on cellular — not a laptop preview. Motion dies here first, so this is where we look.

Test 02
Reduced motion

OS setting on, full reload. Still intentional and complete — just calmer.

Test 03
Scroll audit

Fast scroll, then back up. No element animates twice; nothing ever fails to appear.

Audit
Every value traced

Final pass: every color, size and radius on the page appears in design-system.md.

Start here

One brief. A system.
A site that feels built.

Product, audience, and the one action that matters most — that's all we need to start.

Book a discovery call See live work