Design for AI

Cards

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.

Designing for quiet interfaces

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

Read more
C 001Ruhiger Inhalt
Design

Grid systems that actually help

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

C 002Foto mit Tag
Case study

Rebuilding a checkout in six weeks

C 003Bild mit Verlauf unten

Onboarding without the tour

Show the product, not the tooltips.

5 min readProduct
C 004Weicher Schatten Footer

Motion that explains

Use easing to tell users where things went.

C 005Bild-Zoom beim Hover
Tutorial

Container queries in practice

Stop guessing viewport widths. Size to the parent.

C 008Dunkle Akzentleiste

Weekly digest

The five links our team argued about this week.

C 009Medien rechts
MK

Mara Klein

Product designer, Berlin

C 010Zentrierter Avatar

Jonas Ekberg

Builds dashboards nobody hates.

  • 128Posts
  • 4.2kFollowers
  • 310Following
C 011Banner-Profil mit Stats
Team$49

Per workspace, billed yearly.

  • 10 seats
  • SSO
  • Audit log
Select
C 017Linien-Pricing

Business

$99 per month

  • Everything in Pro
  • Dedicated manager
  • 99.9% SLA
C 018Zweigeteilter Tarif
Per seatSave 20%

$8/seat/mo

  • Shared boards
  • Comments
  • Exports
Add seats
C 019Pricing pro Sitz
New

Linen weekender bag

$120 $150

C 020Badge In den Warenkorb
-30%

Studio headphones

$199$285

C 023Rabattband

Oak desk lamp

Warm white, dimmable

1
$85
C 024Warenkorb-Zeile
The kettle shipped on Tuesday. The manual was two pages.
Sam RiveraHead of Design, Loop
C 025Großes Anführungszeichen
★★★★★
The thermostat learned our schedule in a week. Nobody has touched it since.
Ines DuarteFacilities lead, Parcel
C 026Dunkles Sterne-Zitat
The label printer has one button. The warehouse team stopped asking for training.
Ana KowalczykOperations lead at Pillow
C 027Zitat mit Akzentleiste

Frosted panel

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

Open
C 028Milchglas
Beta

Night glass

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

C 029Nachtglas mit Blobs

Soft surface

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

C 030Weich geprägt

No gradients allowed

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

C 032Harter Schatten brutal
Hot

Poster workshop

Sat 14:00 · Studio B

C 033Poster mit Sticker-Tag

Rotating edge

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

C 034Rotierende Conic-Kante

Lift and glow

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

C 036Getöntes Glow-Anheben
01

Perspective tilt

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

C 037Perspektivische Neigung

Hover to flip

Front side

Back side

Rotates 180deg on the Y axis.

C 038Flip beim Hover
C 039Flip per Tipp
1.2Mrequests in the last 24 hours
99.9%uptime
42msp95 latency
Zero configDeploy from a git push
C 042Bento-Kennzahl-Kacheln
Build

Rebuilds in under a second

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

C 043Gepunktete Bento-Kachel
Changes savedYour draft was synced 2 seconds ago.
C 044Erfolgs-Toast

Release history

  1. v2.0Container query support
  2. v1.4Dark mode tokens
  3. v1.0First public release
C 046Release-Zeitleiste
  1. 1Account
  2. 2Billing
  3. 3Review

Add a payment method

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

C 047Schritt-Assistent
Adaptive

Follows the system theme

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

C 048Systemtheme-bewusst