Design for AI

Cards

Cards de conteúdo, produto, preço, perfil, estatística e recurso, mais um ou outro flip e reveal. Reduzidos aqui, em tamanho real na página de detalhe.

Designing for quiet interfaces

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

Read more
C 001Conteúdo discreto
Design

Grid systems that actually help

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

C 002Foto com tag

Onboarding without the tour

Show the product, not the tooltips.

5 min readProduct
C 004Rodapé com sombra suave

Motion that explains

Use easing to tell users where things went.

C 005Zoom na imagem
Tutorial

Container queries in practice

Stop guessing viewport widths. Size to the parent.

C 008Barra de destaque escura

Weekly digest

The five links our team argued about this week.

C 009Mídia à direita
MK

Mara Klein

Product designer, Berlin

C 010Avatar centralizado

Jonas Ekberg

Builds dashboards nobody hates.

  • 128Posts
  • 4.2kFollowers
  • 310Following
C 011Perfil com banner e stats
Team$49

Per workspace, billed yearly.

  • 10 seats
  • SSO
  • Audit log
Select
C 017Preço em linhas

Business

$99 per month

  • Everything in Pro
  • Dedicated manager
  • 99.9% SLA
C 018Divisor em camadas

Ceramic pour-over set

$64

C 021Adicionar deslizando
-30%

Studio headphones

$199$285

C 023Fita de desconto

Oak desk lamp

Warm white, dimmable

1
$85
C 024Linha de carrinho
The kettle shipped on Tuesday. The manual was two pages.
Sam RiveraHead of Design, Loop
C 025Aspas grandes
★★★★★
The thermostat learned our schedule in a week. Nobody has touched it since.
Ines DuarteFacilities lead, Parcel
C 026Citação escura com estrelas
The label printer has one button. The warehouse team stopped asking for training.
Ana KowalczykOperations lead at Pillow
C 027Citação com barra de destaque

Frosted panel

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

Open
C 028Vidro fosco
Beta

Night glass

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

C 029Vidro noturno com bolhas

Soft surface

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

C 030Relevo suave

No gradients allowed

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

C 032Brutalista com sombra dura
Hot

Poster workshop

Sat 14:00 · Studio B

C 033Pôster com etiqueta

Rotating edge

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

C 034Borda cônica giratória

Lift and glow

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

C 036Elevação com brilho colorido
01

Perspective tilt

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

C 037Inclinação em perspectiva

Hover to flip

Front side

Back side

Rotates 180deg on the Y axis.

C 038Virar no hover
C 039Toque para virar

Harbor at dusk

Series 03 · 24 frames

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

Rebuilds in under a second

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

C 043Bloco bento pontilhado
Changes savedYour draft was synced 2 seconds ago.
C 044Toast de sucesso

Release history

  1. v2.0Container query support
  2. v1.4Dark mode tokens
  3. v1.0First public release
C 046Linha do tempo de releases
  1. 1Account
  2. 2Billing
  3. 3Review

Add a payment method

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

C 047Assistente em etapas
Adaptive

Follows the system theme

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

C 048Tema do sistema