Design for AI
Case study
Dark cards
Cards for dark interfaces: raised surfaces, hairline borders and glows on near-black.
Tutorial
Container queries in practice
Stop guessing viewport widths. Size to the parent.
Lena Ortiz
Available for freelance
Send messagePro
$29/mo
- Unlimited projects
- Custom domains
- Priority support
- Team seats
-30%
Studio headphones
$199$285
★★★★★
The thermostat learned our schedule in a week. Nobody has touched it since.
Night glass
Dark translucent surface, one bright top edge, color bleeding through from behind.
Rotating edge
A conic gradient spins around the card using a registered custom property.
Perspective tilt
Rotates in 3D on hover, with the badge floating above the surface.
Upload failedThe file is larger than 25 MB.
Retry
Frontend after hours
Lightning talks, then pizza. Bring a demo or a question.
Quiet HoursLo Lantern
1:243:52
Rooftop screening
Row F · Seat 12
Can the card flip without JavaScript?
Yes. A checkbox and :checked does it.
Keyboard accessible?
If the input stays focusable, yes.
BANK
•••• •••• •••• 4242
Card holderA. ExampleExpires09/29
Spotlight
A radial highlight grows from the corner on hover, no pointer tracking needed.
Neon edge
Layered box-shadows fake a glowing tube around the border.
Nothing matches.
Whole-site look: the Midnight SaaS prompt. Nearby shelves: pricing cards, profile cards, image cards.