Design for AI

Tarjetas página 2

Tarjetas de contenido, producto, precios, perfil, estadísticas y funcionalidades, más algún flip y reveal. Aquí a escala reducida, a tamaño completo en la página de detalle.

light-dark() in one line

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

Read the spec
C 049Colores light-dark
PDF

brand-guidelines-v3.pdf

4.8 MB · Updated yesterday
C 052Descarga de archivo
C 053Zona de subida
24Oct

Design systems meetup

18:30 · Kreuzberg, Berlin

Save my seat
C 056Fecha grande
19:00 to 21:30

Frontend after hours

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

Online
C 057Franja horaria
Quiet HoursLo Lantern
1:243:52
C 058Reproductor de música
Monthly revenue$
48,210

+12.4% vs last month

C 060Píldora de variación

Line numbers in errors

Every stack trace links to the file and line.

C 063Característica con baldosa
Engineering

What we learned migrating 400 components to container queries

Noor HaddadSep 4, 2026 · 7 min read
C 065Blog con autor
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 066Fila de ensayo editorial

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 a dos columnas

Sized by the parent

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

C 069Pila con container query
C 070Marcar para seleccionar

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 072Fila alineada con subgrid

Superellipse corners

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

C 073Esquinas squircle
Admit one

Rooftop screening

Row F · Seat 12

C 074Ticket biselado
Boarding 09:40

BER to LIS

Gate B12 · Seat 14A

14AWindow
C 075Tarjeta de embarque
25%off

Launch week deal

Valid on annual plans until Friday.

LAUNCH25
C 076Cupón con código
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 078Hilo de comentarios anidado

Can the card flip without JavaScript?

Yes. A checkbox and :checked does it.

Keyboard accessible?

If the input stays focusable, yes.

C 079Burbujas de chat
LisbonSample data
24°

Sunny · High 27° · Low 18°

C 080Widget del tiempo

Senior Product Designer

Oxide Labs · Remote (EU)

€90k+
Full-timeDesign systemsFigma
C 082Oferta de empleo
12 lessons

Modern CSS layout

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

7 of 12 complete · 58%
C 083Progreso de curso
C 084Tarea marcada

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

Nik
C 085Nota adhesiva
Lisbon, March
C 086Marco polaroid
BANK

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

Card holderA. ExampleExpires09/29
C 087Tarjeta de pago brillante

3 drafts

Hover to fan the pile.

C 088Baraja en abanico

Spotlight

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

C 089Foco en la esquina

Paper grain

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

C 091Grano de papel
Live

Neon edge

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

C 092Borde de tubo de neón
The scale settles in half a second. Our old one took five.
Dana Ruiz, VP Product
C 094Mini cita con logo
v2.3.0

Subgrid cards and :has() states

  • NewSubgrid-aligned card rows
  • FixFlip card focus ring on Safari
  • ImprovedPrompt wording for gradients
C 095Registro de cambios

Bundle size

Before412 KB
After96 KB

Container queries replaced 38 media-query blocks.

C 096Métricas antes y después