PF
SE --:--:-- x 0000 y 0000
Pen · 6 anchors · 4 handles X 178 · Y 85

Based in Sweden
Working w/ your next vision

Design Engineer
& Interface Developer

Patrik Franzen

/* h1 · 600 · ls -0.055em · lh .88 */

/* lines cross the seam: col 3 → col 5 → col 7 */

I design interfaces and engineer the systems behind them. One person across the handoff, so nothing gets lost between the Figma file and the pull request.

The gap between the mockup & the merge is whereI work.

DesignEngineering
Typographyfont-display: swap
Gridgrid-template-columns
Motioncubic-bezier(.22,1,.36,1)
Color--token: oklch()
Auto layoutdisplay: flex; gap
Componentsprops & variants
Prototypegit push
Intuitioninstrumentation

Same decisions, two vocabularies.
I speak both, so nothing is lost in translation.

(02)Work

25—26

01 / 09 · Applanr Design System — Design system · 2026

Click to open

01 / 08

Volvo Cars

Design system · 2026 Tap to open

Index

(08)

Eight projects, each one designed and engineered by the same person. Open any row for the case.

    (03) Lab Six small instruments.
    Each one is the tool and the proof.     Drag · hover · tap

    /* h2 · lines offset by column · drift ±3vw on scroll */
    1. 01 — Pen / EasingDrag the handles
    2. 02 — Variable / WeightMove across the word

      wght400 axis100–900
    3. 03 — Smart animate / SpringChase it
      stiffness170 damping26 v0
    4. 04 — Color / ContrastWCAG 2.2

      0.00:1

      AA AAA
      #000000 #FFFFFF
    5. 05 — Mesh / RelaxTap to scatter
      n=48 iter0 relaxing
    6. 06 — Type / ScaleBase 16px
      Major third
      size16 × 1.250ⁿ n0–4

    Toolkit

    Two halves of one practice. Each tool is listed with the project where it does its best work.

    SidePracticeToolsSeen in
    DesignInterface & product designFigmaVolvo Cars, Applanr
    Icons, imagery & identityPhotoshop, IllustratorApplanr, Portfolio ’26
    User & task designFigma, flows, prototypesVolvo Cars, Applanr
    Design systemsTokens, Volvo design systemVolvo Cars, POCme
    3D & motionBlender, shadersPOCme, Digital art
    Illustration & generative artGLSL, signed-distance drawingDigital art
    EngineeringFront endTypeScript, JavaScript, React, Next.js, CSSVolvo Cars, POCme
    Back endGo, Node.js, GraphQL, PostgreSQLVolvo Cars, Applanr
    AI agentsMCP, AI coding agents, git worktreesdelegAItor, POCme
    Graphics & audioOpenGL, WebGL2, GLSL shaders, Web AudioDigital art, Portfolio ’26
    NumericsPython, NumPy, SciPyPDEKit

    Available for
    selected projects

    Write directly to:
    [email protected]

    Let’s make the handoff obsolete.