Design inspiration curated from X

Design tip: Color your grays and blacks - Add a grey rectangle - Ov... - Adrian

Published by Adrian on July 22, 2025.

Design tip: Color your grays and blacks - Add a grey rectangle - Ov... - Adrian - UI design by @uiuxadrian on X
Design tip: Color your grays and blacks - Add a grey rectangle - Overlay your primary color on top - Reduce opacity to 5-15% - Color pick from the overlapped shape - Repeat for your dark and light colors Now, your palet...

Design notes

Design tip: Color your grays and blacks - Add a grey rectangle - Overlay your primary color on top - Reduce opacity to 5-15% - Color pick from the overlapped shape - Repeat for your dark and light colors Now, your palette is more consistent

This entry is part of MotionVault's curated archive of interface, product, brand, website, and motion design references from public creators on X.

Image rights and licensing remain with Adrian; use the original X post for source and licensing inquiries.

Deep Clone · React 19 + Framer Motion

Interactive Sandbox & Production Code

Reverse-engineered 1:1 component with spring physics, accessible keyboard controls, and modular Tailwind CSS.

Live Sandbox Public View Code PRO View Prompt PRO
https://northlight.design/sandbox/1947737167717142549
Launch Sandbox ↗
Production React 19 TypeScript + Framer Motion source component
🔒 Unlock Source Code ($19/mo)

Reference details

Creator
Adrian
X handle
@uiuxadrian
Published
July 22, 2025
Media
1 visual reference
Views
33,125
Likes
691
Bookmarks
673

Related tags