Asif Ali

Our buttons looked perfect in Figma. Then they hit code and every screen had a slightly different one. Padding off by a few px. A one-off colour here. A missing disabled state there. Here's the system that fixed it for good 👇

Day 20/45 · Rating The stars fill in one sweep, left to right, and a partial star stops exactly where the number says. Most rating components can only draw halves, so 4.3 and 4.7 both become 4.5 and the picture quietly stops matching the number. One component a day, from an AI-native design system.

Day 19/45 · Quick filter The two or three filters people actually use, one tap each, above the grid. Selected takes the maroon fill with a drawn check; the greyed pill means no matches, disabled but never hidden. One component a day, from an AI-native design system.

Day 18/45 · Gold rate ticker New component for the system. The rate rolls like an odometer, digit by digit, in the direction it moved. Green or red follows the movement, the sparkline draws the week. One component a day, from an AI-native design system.

Day 17/45 · Filter chips Every applied filter stays visible above the grid as a removable chip. Pull one off and the row closes the gap, no jump, and the listing answers immediately. One component a day, from an AI-native design system.

Day 16/45 · Sort dropdown On desktop it is a panel. On mobile the same options rise as a bottom sheet in the thumb zone. Pick one and the real grid reorders, cards glide to their new places. One component a day, from an AI-native design system.

Day 15/45 · Search autocomplete Type and the list answers: your exact letters marked in every suggestion, products with prices once the query gets specific, arrow keys the whole way. Search is the front door, it should feel like one. One component a day, from an AI-native design system.

@n___vc @MaxStalker true. but i meant effortless from the users perspective to notice the depth.

@as_if_so @MaxStalker lol, it’s not about effort, it’s about design skill 🧏🏽

💡design tip: if you are building a new dark mode, and you are using subtle shadows throughout the app, you might see, that inverting the shadow is not going to work. ➡️instead, use a 0.5px/1px inset shadow for the elements that still need some depth on the app.

@MaxStalker @n___vc this feels more effortless, i feel.

@n___vc Or you could, I don't know, not use pure black background and have some leeway with shadows 🤷‍♂️

@rsStats_ @expo this simple delightful animations heals a part of me.

Pull-to-refresh, but the loader drips out of the Dynamic Island 💧 Built with @expo 57 + reanimated + skia. source code : rselmi.com/lab/island

@sahariarsajibux since it's a sorting and will be scrollable, A. easier for the eyes to scan.

A/B testing.... Which is the better...???

@nilseller love it! this will be a smooth interaction for apps. also, like adding products to cart!!

Let's make software fun again.

Day 14/45 · Tabs Watch the underline: it stretches toward the tab you picked, then settles under it. Position and width run on different curves, that is the whole trick. One component a day, from an AI-native design system.

@Distroux thanks, max!!

@as_if_so the squash on hold is a tiny detail, but it changes the control from visual feedback into something you almost feel. smart to reserve maroon for the on-state too

Day 13/45 · Toggle Small control, rebuilt properly: the knob rides a spring and squashes while you hold it, so the press has weight. Maroon is the system's one on-colour, nothing else gets it. One component a day, from an AI-native design system.

@TheKartikBansal the noise over those gradients feels so soothing.

Footer Design

@david_visuals_ love the glowing effect. remind me of the tron movie. :)

Charts - Dark mode

@AdityaSur11 super clean! i would also, give a icon/cta for the user to go and complete the remaining tasks. just to make it more intuitive.

Clean Checklist UI

Day 12/45 · The form, assembled Days 7 to 11 were the parts. This is them composed: name, number, state, OTP, save, toast. One real checkout form, zero one-off styles. This is why you build a system. One component a day, from an AI-native design system.

Day 11/45 · Select field Same anatomy as the input, so the form reads as one family. The label floats, the list opens on brand, not the browser default. One component a day, from an AI-native design system.