Design for AI

Cards page 2

Content, product, pricing, profile, stat and feature cards, plus the odd flip and reveal. Scaled down here, full size on the detail page.

light-dark() in one line

Each color declares both values; the browser picks based on color-scheme.

Read the spec
C 049Light dark colors
PDF

brand-guidelines-v3.pdf

4.8 MB · Updated yesterday
C 052File download
C 053Upload dropzone
24Oct

Design systems meetup

18:30 · Kreuzberg, Berlin

Save my seat
C 056Big date
19:00 to 21:30

Frontend after hours

Lightning talks, then pizza. Bring a demo or a question.

Online
C 057Time strip
Quiet HoursLo Lantern
1:243:52
C 058Music player
Monthly revenue$
48,210

+12.4% vs last month

C 060Delta pill
Weekly signups 1,204
C 061Sparkline stat

Line numbers in errors

Every stack trace links to the file and line.

C 063Icon tile feature
Engineering

What we learned migrating 400 components to container queries

Noor HaddadSep 4, 2026 · 7 min read
C 065Author meta blog
Essay · Typography

The case for one typeface

Constraints are a design tool. Here is what a single family bought us.

By Elif Aydin · 11 min
C 066Editorial essay row

Enterprise

Custom

For teams that need controls, contracts and a human on call.

  • SSO and SCIM
  • Audit logs
  • 99.99% SLA
  • Data residency
  • Custom roles
  • Dedicated CSM
Talk to sales
C 067Enterprise two column

Kenji Watanabe

Motion designer · Tokyo

After EffectsRiveCSS
C 068Gradient ring skills

Sized by the parent

Resize the wrapper below 400px and this card stacks vertically.

C 069Container query stack
C 070Tick to select
C 071Radio plan picker

Starter

For one person and a couple of side projects.

Choose

Team

Shared spaces, roles, review flows and a very long description that would normally push the button down.

Choose

Scale

Everything, plus support.

Choose
C 072Subgrid aligned row

Superellipse corners

corner-shape: squircle where supported, plain rounded corners elsewhere.

C 073Squircle corners
Admit one

Rooftop screening

Row F · Seat 12

C 074Bevel ticket
Boarding 09:40

BER to LIS

Gate B12 · Seat 14A

14AWindow
C 075Notched boarding pass
25%off

Launch week deal

Valid on annual plans until Friday.

LAUNCH25
C 076Dashed coupon code
Maya Lindqvist@mayal · 2h

Finally replaced our media queries with container queries. Removed 340 lines. Nothing broke. Still suspicious.

C 077Social post
Devon Price

Does the flip card work with keyboard focus?

Reply
Rin Sato

Yes, if you use the checkbox version and keep the input focusable.

Reply
C 078Nested comment thread

Can the card flip without JavaScript?

Yes. A checkbox and :checked does it.

Keyboard accessible?

If the input stays focusable, yes.

C 079Chat bubbles
LisbonSample data
24°

Sunny · High 27° · Low 18°

C 080Weather widget

Lemon orzo with charred broccoli

25 minVegetarianEasy
View recipe
C 081Recipe chips

Senior Product Designer

Oxide Labs · Remote (EU)

€90k+
Full-timeDesign systemsFigma
C 082Job listing
12 lessons

Modern CSS layout

Grid, subgrid, container queries and :has() in real projects.

7 of 12 complete · 58%
C 083Course progress
C 084Ticked task

Ship the cards page before the styles gallery. Keep every snippet under 45 lines.

Nik
C 085Sticky note
BANK

•••• •••• •••• 4242

Card holderA. ExampleExpires09/29
C 087Glossy payment

3 drafts

Hover to fan the pile.

C 088Fanned deck

Spotlight

A radial highlight grows from the corner on hover, no pointer tracking needed.

C 089Corner spotlight

Living gradient

Background position drifts across a 300% wide gradient.

Get started
C 090Drifting gradient

Paper grain

An inline feTurbulence SVG layered over the gradient adds film-like noise.

C 091Paper grain noise
Live

Neon edge

Layered box-shadows fake a glowing tube around the border.

C 092Neon tube edge
C 093Add new placeholder
The scale settles in half a second. Our old one took five.
Dana Ruiz, VP Product
C 094Logo mini quote
v2.3.0

Subgrid cards and :has() states

  • NewSubgrid-aligned card rows
  • FixFlip card focus ring on Safari
  • ImprovedPrompt wording for gradients
C 095Version changelog

Bundle size

Before412 KB
After96 KB

Container queries replaced 38 media-query blocks.

C 096Before after metrics