Back to timeline2022

Design Realm

Making the interface feel intentional

Two years in, I realized working code was only half the job. I moved into Figma to understand why some interfaces feel clear and trustworthy while others do not. Spacing, type, contrast, and motion became part of the engineering, not decoration added at the end.

Reusable component systemsFigma-first visual decisionsMotion for feedback and continuity
Figma

Lived in it. Designed there first, brought it back to code.

Systems

Tokens. 8pt grid. Components that scale past the demo.

Motion

Timed in beats. Eases that feel native, not bolted on.

A11y

Tab order. Focus rings. Reduced motion respected.

The interface stack, in motion

Drag the cloud to explore the design and engineering tools that shape the finished interface.

FOUR DETAILS I CHECK

CLARITY

Show what matters. Hide what doesn't. The user's eye should never have to hunt for the next move.

Noise
Signal
Clutter

RHYTHM

8pt grid. Type that scales. Motion timed in beats. Cohesion the user feels but can't name.

AFFORDANCE

Buttons that look pressable. Inputs that look fillable. State that updates the second a finger lifts.

TASTE

Spacing, weight, contrast, and timing working together without calling attention to themselves.

BeforeAfter

Tools behind the design work

Each tool has a specific role, from building systems and motion to preparing production assets.

Systems

Figma

Open

Motion

Framer

Open

Sites

Wix Studio

Open

Assets

Adobe

Open

Mix a palette. Watch it land.

Tap a base, tap an accent. The tokens update live, the way they should.

Surface
Text on base
Tokens
--color-bg: #0f172a
--color-surface: #0b1220
--color-text: #e2e8f0
--color-accent: #10b981
Continue the timelineChapter 02 / 04
Previous era2020ORIGIN STORYLearning by breaking the browserNext era2024CREATION WAVEShipping under real constraints