A Growing Design Gallery
CardCraft is an evolving collection of UX/UI content cards — the same kind of information, re-imagined through a different visual design language in every section. Scroll in to see the first style.
Style 01 · Glassmorphism
Translucent, frosted surfaces that refract the colour behind them — soft blur, thin light borders and gentle depth instead of hard shadows. Here it wraps four core UX/UI principles every product team leans on.
Every flow starts with real user research, not assumptions — decisions are validated against actual needs and behaviour.
Explore the principleSize, contrast and spacing direct the eye to what matters first, second and last — before a single word is read.
Explore the principleA button ripple, a toggle glide, a subtle haptic cue — small animated moments that turn functional UI into felt UI.
Explore the principleColor contrast, visible focus states and screen-reader labels aren't optional polish — they're core requirements.
Explore the principleStyle 02 · Claymorphism
Soft, puffy shapes that look pressed from matte clay — bold pastel fills, oversized rounded corners and a gentle two-tone shadow instead of flat edges. Four more UX/UI fundamentals, sculpted in clay.
Content is grouped and labelled the way users actually think about it, so finding anything feels obvious, not like a search.
See the practiceReusable components and tokens keep every screen consistent, so teams ship faster without reinventing the button twice.
See the practiceWatching five real people try a flow surfaces more friction than a week of internal debate ever will.
See the practiceLow-fidelity mockups test an idea in hours, not weeks — cheap to throw away, fast to iterate on.
See the practiceStyle 03 · Realistic Glassmorphism
A more refined take on frosted glass — true depth, soft daylight bokeh behind the panels, crisp hairline edge highlights and calm, production-ready polish instead of neon colour. Four more UX/UI fundamentals, viewed through perfect glass.
Follow platform and product conventions so people apply what they already know, instead of relearning it screen by screen.
View the patternLoading states, progress bars and confirmations keep people oriented, so they always know what's happening and what happens next.
View the patternGood UI stops mistakes before they happen — confirmations, smart defaults and disabled states instead of post-hoc apologies.
View the patternShow only what's needed now, and reveal advanced options on demand — simple by default, powerful when it matters.
View the patternStyle 04 · Bento Grid
A mosaic of differently sized tiles instead of a uniform row of equal cards — big ideas get a big tile, quick facts get a small one. Seven more UX/UI fundamentals, organised by how much room they actually need.
One layout that reflows gracefully from a watch face to a wall display, instead of a phone version and a desktop version shipped separately.
See the patternA true second theme, tuned for contrast and elevation — not just an inverted stylesheet.
The first 60 seconds — and the first empty screen — decide if someone comes back tomorrow.
A chart should answer a question at a glance, before anyone reads an axis label.
Skeleton screens and optimistic UI make an app feel instant while real data is still loading.
Easing and timing carry meaning — where something comes from, where it's going, and why it moved.
See the patternThe best default is the one tailored to this person's data, without ever feeling like surveillance.
See the patternStyle 05 · Neo-Brutalism
Thick black borders, flat poster colour and hard offset shadows instead of soft blur — honest, unapologetic shapes that look sketched straight from a zine. Four closing UX/UI fundamentals, printed loud.
Words are UI too — the right microcopy turns confusion into confidence without adding a single pixel.
Read the ruleOpinions lose to data — ship two versions, measure the difference, keep the one that actually wins.
Read the ruleFewer fields, smarter defaults, inline validation — every form is a negotiation, so make it a short one.
Read the ruleUsers should always know where they are, where they came from, and where they can go next.
Read the rule