Back to timeline2022

Design Realm

When pixels started mattering

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.

Built a reusable component library instead of starting from zero.Moved visual decisions into Figma before implementation.Learned to use motion for feedback, hierarchy, 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.

Tools in the rotation. Drag the cloud to explore.

If the user has to think, I failedHierarchy beats decorationMotion timed in beats, not secondsTokens beat magic numbersAccessible or it doesn't shipClarity before decorationThe 4th iteration is always bestDefault state = real stateIf the user has to think, I failedHierarchy beats decorationMotion timed in beats, not secondsTokens beat magic numbersAccessible or it doesn't shipClarity before decorationThe 4th iteration is always bestDefault state = real stateIf the user has to think, I failedHierarchy beats decorationMotion timed in beats, not secondsTokens beat magic numbersAccessible or it doesn't shipClarity before decorationThe 4th iteration is always bestDefault state = real state

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

Systems

Figma

Open

Motion

Framer

Open

Sites

Wix Studio

Open

Assets

Adobe

Open

Figma
Framer
Wix Studio
Adobe
React

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

Pieces that pull their weight

Card

A surface a user trusts in three seconds. Hierarchy, contrast, restraint.

State
Default
Hover
Pressed

Details that carry the interface

Systems

Tokens, an 8-point grid, and components designed for reuse.

Surfaces

Layers with clear hierarchy and contrast that supports the content.

Layer
Motion

Timing and easing that explain state changes without slowing the user down.

Hover me
Type

A fluid scale and a limited set of weights that preserve hierarchy.

Fluid headline
Tokens

Semantic colors that support light and dark themes without duplicated rules.

A11y

Logical tab order, visible focus, and reduced-motion support.

Design mockup
Continue the timelineChapter 02 / 04
Previous era2020ORIGIN STORYWhen the browser broke firstNext era2024CREATION WAVEShipping for real money