Inspiration
Slick buttons, micro-animations, and visual styles you can swipe straight into your pet projects.
1 Taste basics
Why AI Design Looks Generic and How to Fix It
Why AI-built sites look the same and cheap: the default gradient, a faceless font, centered text, emoji. Plus 4 principles of taste that fix it.
Color and contrast in UI: palette and dark mode
A painless UI palette: one or two accents plus neutrals, text contrast of 4.5 to 1, and why dark mode means warm gray, not a pitch-black background.
Font Pairs and the Grid: Typography for Beginners
How to pick a font, build a font pair that works, create a size scale and a heading hierarchy, and put it all on a grid with one consistent spacing step. Explained simply, for beginners.
2 Details that matter
Beautiful Buttons and the Glass Effect: How to Make an Interface Look Expensive
How to make a beautiful button and the liquid glass effect: shape, soft shadow, border, hover and active states, background blur. Plus ready-made briefs for the AI.
Microanimations and UI transitions: timing, easing, amplitude
Microanimations and transitions in UI: how timing, easing, and amplitude make an interface feel alive. We break down feedback, elements appearing, and accessibility.
Living backgrounds and gradients: how to bring a site's background to life
Living backgrounds and gradients for your site: radial glow, mesh gradient, slow motion, and grain. How to bring a background to life without overdoing the effects.