The Subtle Art of Nested Radii

Ever notice when a button inside a card just feels off, even if you can’t say why? It’s probably the border-radius. When inner and outer curves don’t play nice, the whole design loses its rhythm. It’s a tiny detail that can quietly throw everything out of balance.

Never Forget With a Calculator

Turns out, there’s a super simple formula to fix this: Inner Radius = Outer Radius - Padding. But I kept forgetting it and breaking my flow mid-design to look it up. So I built a little calculator to do it for me. No more guesswork, just clean, satisfying curves every time.

Text Selection

A few quick explorations on ways to enhance default ::selection. I wanted to find a way to pull more focus to a selected word or phrase without fully removing the surrounding context. The first option in the carousel feels like the right direction, it dims everything else just enough to reduce distraction while keeping the rest of the text readable.

Focus States

This one’s about bringing more intention to selected elements. I kept coming back to the idea of a soft, warm glow. It naturally draws the eye and adds a calming energy. I also tested a subtle pulse animation, but it got distracting when multiple items were selected at once. Likely sticking with the glow on its own for now.

Drag to Select

I was excited to explore drag-to-select as a way to bring a familiar desktop behavior into the browser. Incorporating something we use constantly in operating systems and design tools but rarely see on the web. Multi-select could unlock faster, more intuitive interactions especially for tasks like organizing, comparing, or taking action on multiple items at once.

Worked on a few loading state concepts for al-the-ai to improve the feel of perceived performance. Was exploring options that were flexible enough to work in different situations and engaging, but not obnoxious. I ended up designing two types: one text-based, one shape-based.

Text Animations

A text based animation was more fitting for the chat experience. Text messaging lended itself well in creating a more conversational feeling. The challenge was to make something that seemed smart but not contrived. I think I’ll also explore a time based message change for responses that have longer wait times.

Object Animations

Object-based loading became important when I started building the context tooltip. I needed something with fixed dimensions to avoid weird resizing when the response loaded in. This version gave me more control over the layout while still keeping things visually interesting.