Design for AI

Tarjetas

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.

Designing for quiet interfaces

Why the best screens are the ones you barely notice, and how to get there.

Read more
C 001Contenido discreto
Design

Grid systems that actually help

Twelve columns is a habit, not a law. Pick the grid your content needs.

C 002Foto con etiqueta
Case study

Rebuilding a checkout in six weeks

C 003Fundido inferior

Onboarding without the tour

Show the product, not the tooltips.

5 min readProduct
C 004Pie con sombra suave

Motion that explains

Use easing to tell users where things went.

C 005Zoom de imagen
Tutorial

Container queries in practice

Stop guessing viewport widths. Size to the parent.

C 008Barra de acento oscura

Weekly digest

The five links our team argued about this week.

C 009Media a la derecha
MK

Mara Klein

Product designer, Berlin

C 010Avatar centrado

Jonas Ekberg

Builds dashboards nobody hates.

  • 128Posts
  • 4.2kFollowers
  • 310Following
C 011Perfil con banner

Priya Natarajan

Engineering lead

Xingh
C 012Fila de equipo
Team$49

Per workspace, billed yearly.

  • 10 seats
  • SSO
  • Audit log
Select
C 017Precios en línea

Business

$99 per month

  • Everything in Pro
  • Dedicated manager
  • 99.9% SLA
C 018Divisor por niveles

Ceramic pour-over set

$64

C 021Añadir deslizante
★★★★☆ (212)

Trail runner 2

$139
C 022Valoración y muestras
-30%

Studio headphones

$199$285

C 023Cinta de descuento

Oak desk lamp

Warm white, dimmable

1
$85
C 024Línea de carrito
The kettle shipped on Tuesday. The manual was two pages.
Sam RiveraHead of Design, Loop
C 025Comillas grandes
★★★★★
The thermostat learned our schedule in a week. Nobody has touched it since.
Ines DuarteFacilities lead, Parcel
C 026Cita oscura con estrellas
The label printer has one button. The warehouse team stopped asking for training.
Ana KowalczykOperations lead at Pillow
C 027Cita con barra de acento

Frosted panel

Translucent surface with a blurred backdrop and a soft white edge.

Open
C 028Cristal esmerilado
Beta

Night glass

Dark translucent surface, one bright top edge, color bleeding through from behind.

C 029Cristal nocturno

Soft surface

Extruded from the background with a light and a dark shadow.

C 030Relieve suave

No gradients allowed

Thick black lines, flat yellow, and a shadow that does not blur.

C 032Brutalista con sombra dura
Hot

Poster workshop

Sat 14:00 · Studio B

C 033Póster con pegatina

Rotating edge

A conic gradient spins around the card using a registered custom property.

C 034Borde cónico giratorio

Lift and glow

Rises on hover and casts a tinted shadow instead of a gray one.

C 036Elevación con brillo
01

Perspective tilt

Rotates in 3D on hover, with the badge floating above the surface.

C 037Inclinación en perspectiva

Hover to flip

Front side

Back side

Rotates 180deg on the Y axis.

C 038Volteo en hover
C 039Tocar para voltear

Harbor at dusk

Series 03 · 24 frames

C 040Pie deslizante
1.2Mrequests in the last 24 hours
99.9%uptime
42msp95 latency
Zero configDeploy from a git push
C 042Baldosas bento de estadísticas
Build

Rebuilds in under a second

Save a file and the page is already there. No spinner to wait for.

C 043Baldosa bento punteada
Changes savedYour draft was synced 2 seconds ago.
C 044Toast de éxito

Release history

  1. v2.0Container query support
  2. v1.4Dark mode tokens
  3. v1.0First public release
C 046Línea de tiempo de versiones
  1. 1Account
  2. 2Billing
  3. 3Review

Add a payment method

Step 2 of 3. You can skip this and add it later.

C 047Asistente por pasos
Adaptive

Follows the system theme

Same markup, swapped custom properties under prefers-color-scheme: dark.

C 048Tema del sistema