Creating the new @mbd website was a challenge.

Every component had to be light/dark mode responsive.

Here's how I nailed the design...

Make your app, feed or mini app feel more personal with AI powered recommendations. Incubated @a16zcrypto CSX'23 -  getembed.ai

It all began in Figma with the design system. I created color tokens and variables for both light and dark modes.

After the initial draft of the homepage and essential components began to take shape, I transferred both the Design System and Designs to Framer. (Yes, I should have started directly with Framer, but development wasn't part of the initial scope.)

The home page was ready, but the client needed graphics to explain the product better. I experimented with framer animations, ensuring every div and element used the design system for full mode responsiveness.

After delivering the first animation, I found a Safari bug. So, I redid it using fewer divs. This solved the issue.

It has been and will continue to be a wild ride! I'm happy to be part of @mbd's journey as a fractional designer.