Design for AIBento stat tiles
Bento stat tiles: a CSS card. Copy the rules, or the prompt that rebuilds it.
1.2Mrequests in the last 24 hours
99.9%uptime
42msp95 latency
Zero configDeploy from a git push
CSS
.card-042 {
display: grid;
grid-template-columns: repeat(2,160px);
gap: 12px;
font-family: system-ui,sans-serif
}
.card-042__tile {
padding: 18px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 16px;
color: #111827;
transition: transform .2s,box-shadow .2s
}
.card-042__tile:hover {
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(0,0,0,.08)
}
.card-042__tile--wide {
grid-column: span 2
}
.card-042__tile--accent {
background: linear-gradient(135deg,#111827,#1f2937);
color: #fff;
border-color: #111827
}
.card-042 b {
display: block;
font-size: 24px;
font-weight: 800;
letter-spacing: -.02em
}
.card-042 span {
font-size: 13px;
color: #6b7280
}
.card-042__tile--accent span {
color: #9ca3af
}
HTML
<div class="card-042">
<div class="card-042__tile card-042__tile--wide"><b>1.2M</b><span>requests in the last 24 hours</span></div>
<div class="card-042__tile"><b>99.9%</b><span>uptime</span></div>
<div class="card-042__tile"><b>42ms</b><span>p95 latency</span></div>
<div class="card-042__tile card-042__tile--wide card-042__tile--accent"><b>Zero config</b><span>Deploy from a git push</span></div>
</div>Prompt
Build a bento grid of four tiles: two columns of 160px with 12px gap. Tiles are white with 1px #e5e7eb border, 16px radius, 18px padding, lifting 3px with a soft shadow on hover. Tile 1 spans both columns ("1.2M / requests in the last 24 hours"), tiles 2 and 3 are single ("99.9% uptime", "42ms p95 latency"), tile 4 spans both columns and is dark (135deg gradient #111827 to #1f2937, white text, gray #9ca3af caption). Numbers are 24px extra-bold, captions 13px #6b7280.