Boring login screens are officially dead. 🙈

(🔈Sound on for the full experience!)

Who said enterprise or SaaS auth forms have to feel robotic?

Adding a layer of emotional design turns a repetitive chore into a memorable micro-moment:

→ Tracks your email input

→ Covers its eyes when typing passwords

→ Takes a cheeky peek when you toggle password visibility

→ Pouts on wrong inputs, celebrates on success

Micro-interactions don’t just decorate the UI - they build an instant emotional bond with the user before they even enter the dashboard.

What’s your take: delightful touch or unnecessary friction?💭

Turned a static hero mock-up into a fully interactive biometric telemetry card.

What changed from v1 to v2:

1. Typography: Dropped from 3 font families down to 2 (Inter Tight + JetBrains Mono for tabular metrics).

2. Token architecture: Structured 3-tier DTCG tokens (Primitive → Semantic → Component) for instant theme/palette switching.

3. Information hierarchy: Replaced redundant metric cards with synchronized tabs to kill cognitive load.

4. Micro-interactions: Scrubbable neurometric waveforms, live protocol accordions, and tactile hardware sync states.

Dark mode + clinical tech is all about visual precision.

How does the hierarchy feel compared to static dashboard shots? 👇

Your project board isn't disorganized. It's slow to read.

That's why deadlines slip while everything "looks fine."

3 details I changed in this layout:

→ Action next to the blocker "Changes Requested" alone sends people digging for feedback. I added a "View Notes" button right beside it.

→ Relative dates "Oct 16" forces calendar math. "Due in 4d" doesn't. (Exact date on hover, red once overdue.)

→ Progress + time "In Progress" hides everything. "2/3 done · idle 3d" exposes stalled work at a glance.

Small nudges, less guesswork.

Which board detail slows your team down the most?

Most banking apps dump numbers on a screen and leave the mental math to you.

Seeing a $48k balance means very little when you're busy calculating upcoming rent, bills, and monthly savings in your head.

A few interaction details from this concept:

• Safe to spend: Deducts upcoming bills and savings targets upfront. You see the cash you can actually spend today.

• Contextual error handling: When a charge fails (like the Uber payment here), it shows why the card limit blocked it and offers a 1-tap fix.

• Calm automation: Turning on auto-pay for rent confirms the exact debit date with an instant undo button.

Good software should do the calculating for you.

I redesigned a project board hero to follow its own promise: less noise.

What changed:

→ Headline: one italic serif word ("finishing") as the only typographic surprise

→ Background: warm off-white, so the indigo CTA is the only loud thing on the page

→ Mockup: cropped and enlarged so the product is actually readable

→ Focus Mode: moved from a tiny tooltip into the header, where the promise meets the proof

A calm product page shouldn't feel busy.

Concept design. Kanvo is a fictional brand; logos and numbers are placeholders.

How do you sell a physical feeling on a 2D screen?

Most hardware landing pages make the same mistake: they show static product photos and list dry tech specs.

Instead of feeling the weight of the metal, users feel bored.

For this desktop rotary dial hero concept, I wanted to simulate tactile weight and sensory feedback before the user even buys:

→ Interactive Mode Switcher

Instead of explaining 3 features, users interact with the dial directly. Switching between Mute, Volume, and Focus rotates the knob and updates dynamic system states in real time.

→ Auditory Bridge

("Hear the haptic click") You cannot touch an aluminum dial through a screen, but you can hear the detents. Adding an audio trigger creates an immediate sensory anchor.

→ Frictionless Clarity

$129 price tag embedded directly into the primary CTA. No hidden surprises, just high-intent conversion.

Tactile hardware demands tactile web design.

Designed with an Apple × Linear aesthetic.

💬How do you approach sensory communication in digital products?

Most dev tool landing pages hide the product behind gradient blobs and passive copy.

I built a zero-config data pipeline concept with three rules instead:

→ Everything is grayscale except the part that moves. Only the moving piece gets the accent color, so your eye never has to hunt.

→ Every title is a verb plus a short object. "Scrubs dirty data." "Unifies every schema." "Absorbs traffic spikes."

→ Every card has two lines. HOW explains the mechanic. RESULT states the relief: no regex, no glue code, no dropped events.

Pure HTML, CSS and SVG. Same layout, same copy.

The video toggles between Industrial Orange and Electric Blue. Only the accent changes.

Which one would you trust with your production data? And why?