Design for AI

Cards

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

Designing for quiet interfaces

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

Read more
C 001Quiet content
Design

Grid systems that actually help

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

C 002Tagged photo
Case study

Rebuilding a checkout in six weeks

C 003Bottom fade image

Onboarding without the tour

Show the product, not the tooltips.

5 min readProduct
C 004Soft shadow footer

Motion that explains

Use easing to tell users where things went.

C 005Hover zoom image

Typography audit checklist

Twelve checks before you ship a type scale.

Open checklist
C 006Media left row
Tutorial

Container queries in practice

Stop guessing viewport widths. Size to the parent.

C 008Dark accent bar

Weekly digest

The five links our team argued about this week.

C 009Media right
MK

Mara Klein

Product designer, Berlin

C 010Centered avatar

Jonas Ekberg

Builds dashboards nobody hates.

  • 128Posts
  • 4.2kFollowers
  • 310Following
C 011Banner stats profile
Name
Theo Baptiste
Role
Staff engineer
ID
#04211
C 014Square avatar ID
Team$49

Per workspace, billed yearly.

  • 10 seats
  • SSO
  • Audit log
Select
C 017Line pricing

Business

$99 per month

  • Everything in Pro
  • Dedicated manager
  • 99.9% SLA
C 018Tiered divider
New

Linen weekender bag

$120 $150

C 020Badge add to cart

Ceramic pour-over set

$64

C 021Slide-up add
★★★★☆ (212)

Trail runner 2

$139
C 022Rating swatches
-30%

Studio headphones

$199$285

C 023Discount ribbon

Oak desk lamp

Warm white, dimmable

1
$85
C 024Cart line
The kettle shipped on Tuesday. The manual was two pages.
Sam RiveraHead of Design, Loop
C 025Big quote mark
★★★★★
The thermostat learned our schedule in a week. Nobody has touched it since.
Ines DuarteFacilities lead, Parcel
C 026Dark stars quote
The label printer has one button. The warehouse team stopped asking for training.
Ana KowalczykOperations lead at Pillow
C 027Accent bar quote

Frosted panel

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

Open
C 028Frosted glass
Beta

Night glass

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

C 029Night glass blobs

Soft surface

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

C 030Soft embossed

No gradients allowed

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

C 032Hard shadow brutal
Hot

Poster workshop

Sat 14:00 · Studio B

C 033Sticker tag poster

Rotating edge

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

C 034Spinning conic edge

Lift and glow

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

C 036Tinted glow lift
01

Perspective tilt

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

C 037Perspective tilt

Hover to flip

Front side

Back side

Rotates 180deg on the Y axis.

C 038Hover flip
C 039Tap to flip

Harbor at dusk

Series 03 · 24 frames

C 040Sliding caption
1.2Mrequests in the last 24 hours
99.9%uptime
42msp95 latency
Zero configDeploy from a git push
C 042Bento stat tiles
Build

Rebuilds in under a second

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

C 043Dotted bento tile
Changes savedYour draft was synced 2 seconds ago.
C 044Success toast

Release history

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

Add a payment method

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

C 047Step wizard
Adaptive

Follows the system theme

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

C 048System theme aware