UI DESIGN · 2026

Albers

What if 'interaction of color' was taken literally?

PROBLEM_

I took 'interaction of color' literally — and built an app around it.

ALBERS is a macOS color theory tool named after Josef Albers. It isolates perceptual phenomena like simultaneous contrast and optical mixing, giving users real-time controls to manipulate each one directly.

MY ROLE_

Sole designer and developer — concept to shipped macOS app.

Sole designer and developer — concept, UI in Figma, and implementation via vibe coding with Claude Code.

SwiftUIAppKitFigmaClaude CodeVibe CodingmacOS

RESEARCH_

The brief said 'interaction of colors.' As a UX major, that's a UI problem.

The assignment asked us to explore color harmonies. Most went editorial; I kept returning to the word 'interaction.' Albers's argument — that color has no fixed identity — felt like a UI problem as much as an art one.

When the brief said 'interaction of colors,' I took the word interaction literally.

KEY INSIGHT_

CHALLENGE_

A proof of concept became a product with a real identity.

The initial submission was lean: a working prototype. Spring break became the space to push it further — adding modes, tightening the interaction model, and developing a visual identity. The amber terminal HUD aesthetic emerged from an obsession with instrument interfaces — things that measure, not create.

PROCESS_

Vibe coding collapsed the gap between design intent and working code.

Figma handled visual direction; iteration happened directly in the app using vibe coding. AI handled implementation while I focused on what the interaction should feel like — making the gap between design and build much smaller.

SOLUTION_

Nine modes. One premise: color has no fixed identity.

A nine-mode macOS application where each mode isolates one perceptual color phenomenon with real-time controls. The amber HUD frames the app as an instrument of observation, not a creative canvas. Built in SwiftUI with AppKit, targeting macOS 13+.

LIVE APP_

The shipped Albers build is embedded below.

This is the actual live app, not a mockup. You can interact with it here, then open it in a separate tab if you want the full browser context.

MOBILE LIVE VIEW_

Same live build, framed for the phone viewport.

OPEN LIVE APP ↗

OUTCOMES_

Constraint as identity — when an interface commits fully, every decision becomes easier.

Vibe coding pushed me to be more precise about design intent upfront — the AI needs clarity to move in the right direction. The HUD aesthetic taught me that constraint as identity makes every decision easier. I'd like to eventually publish ALBERS as a genuine teaching tool on the Mac App Store.

← PREV

Franklin's

Wander