Design for AI

Cards Seite 2

Content-, Produkt-, Pricing-, Profil-, Stat- und Feature-Cards, dazu ab und zu ein Flip oder Reveal. Hier verkleinert, in voller Größe auf der Detailseite.

light-dark() in one line

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

Read the spec
C 049Light-Dark-Farben
PDF

brand-guidelines-v3.pdf

4.8 MB · Updated yesterday
C 052Datei-Download
C 053Upload-Dropzone
24Oct

Design systems meetup

18:30 · Kreuzberg, Berlin

Save my seat
C 056Großes Datum
19:00 to 21:30

Frontend after hours

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

Online
C 057Zeitstreifen
Quiet HoursLo Lantern
1:243:52
C 058Musikplayer
Monthly revenue$
48,210

+12.4% vs last month

C 060Delta-Pille

Line numbers in errors

Every stack trace links to the file and line.

C 063Feature mit Icon-Kachel
Engineering

What we learned migrating 400 components to container queries

Noor HaddadSep 4, 2026 · 7 min read
C 065Blog mit Autor-Meta
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 066Redaktionelle Essay-Zeile

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 zweispaltig

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-Stapel
C 070Abhaken zum Auswählen
C 071Radio-Tarifwahl

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-ausgerichtete Zeile

Superellipse corners

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

C 073Squircle-Ecken
Admit one

Rooftop screening

Row F · Seat 12

C 074Abgeschrägtes Ticket
Boarding 09:40

BER to LIS

Gate B12 · Seat 14A

14AWindow
C 075Bordkarte mit Kerben
25%off

Launch week deal

Valid on annual plans until Friday.

LAUNCH25
C 076Gestrichelter Gutscheincode
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 078Verschachtelter Kommentar-Thread

Can the card flip without JavaScript?

Yes. A checkbox and :checked does it.

Keyboard accessible?

If the input stays focusable, yes.

C 079Chat-Blasen
LisbonSample data
24°

Sunny · High 27° · Low 18°

C 080Wetter-Widget

Lemon orzo with charred broccoli

25 minVegetarianEasy
View recipe
C 081Rezept-Chips

Senior Product Designer

Oxide Labs · Remote (EU)

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

Modern CSS layout

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

7 of 12 complete · 58%
C 083Kursfortschritt
C 084Abgehakte Aufgabe

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

Nik
C 085Haftnotiz
Lisbon, March
C 086Polaroid-Rahmen
BANK

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

Card holderA. ExampleExpires09/29
C 087Glänzende Bezahlkarte

3 drafts

Hover to fan the pile.

C 088Aufgefächertes Deck

Spotlight

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

C 089Eck-Spotlight

Living gradient

Background position drifts across a 300% wide gradient.

Get started
C 090Driftender Gradient

Paper grain

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

C 091Papierkorn-Rauschen
Live

Neon edge

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

C 092Neonröhren-Kante
The scale settles in half a second. Our old one took five.
Dana Ruiz, VP Product
C 094Mini-Zitat mit Logo
v2.3.0

Subgrid cards and :has() states

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

Bundle size

Before412 KB
After96 KB

Container queries replaced 38 media-query blocks.

C 096Vorher-Nachher-Kennzahlen