Design for AI

Cards página 2

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.

light-dark() in one line

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

Read the spec
C 049Cores light-dark
PDF

brand-guidelines-v3.pdf

4.8 MB · Updated yesterday
C 052Download de arquivo
C 053Área de upload
24Oct

Design systems meetup

18:30 · Kreuzberg, Berlin

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

Frontend after hours

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

Online
C 057Faixa de horário
Quiet HoursLo Lantern
1:243:52
C 058Player de música
Monthly revenue$
48,210

+12.4% vs last month

C 060Pílula de variação

Line numbers in errors

Every stack trace links to the file and line.

C 063Recurso com ícone em bloco
Engineering

What we learned migrating 400 components to container queries

Noor HaddadSep 4, 2026 · 7 min read
C 065Blog com 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 066Linha de ensaio 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 em duas colunas

Sized by the parent

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

C 069Pilha com container query
C 070Marcar para selecionar

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 072Linha alinhada com subgrid

Superellipse corners

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

C 073Cantos squircle
Admit one

Rooftop screening

Row F · Seat 12

C 074Ingresso chanfrado
25%off

Launch week deal

Valid on annual plans until Friday.

LAUNCH25
C 076Cupom com código tracejado
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 078Thread de comentários

Can the card flip without JavaScript?

Yes. A checkbox and :checked does it.

Keyboard accessible?

If the input stays focusable, yes.

C 079Balões de chat
LisbonSample data
24°

Sunny · High 27° · Low 18°

C 080Widget de clima

Senior Product Designer

Oxide Labs · Remote (EU)

€90k+
Full-timeDesign systemsFigma
C 082Vaga de emprego
12 lessons

Modern CSS layout

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

7 of 12 complete · 58%
C 083Progresso do curso
C 084Tarefa marcada

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

Nik
C 085Nota adesiva
BANK

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

Card holderA. ExampleExpires09/29
C 087Cartão de pagamento brilhante

3 drafts

Hover to fan the pile.

C 088Baralho em leque

Spotlight

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

C 089Holofote no canto

Paper grain

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

C 091Granulação de papel
Live

Neon edge

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

C 092Borda de tubo neon
The scale settles in half a second. Our old one took five.
Dana Ruiz, VP Product
C 094Mini citação com logo
v2.3.0

Subgrid cards and :has() states

  • NewSubgrid-aligned card rows
  • FixFlip card focus ring on Safari
  • ImprovedPrompt wording for gradients
C 095Changelog de versão

Bundle size

Before412 KB
After96 KB

Container queries replaced 38 media-query blocks.

C 096Métricas antes e depois