Design for AIQuiet content
Quiet content: a CSS card. Copy the rules, or the prompt that rebuilds it.
Designing for quiet interfaces
Why the best screens are the ones you barely notice, and how to get there.
Read moreCSS
.card-001 {
width: 320px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 14px;
overflow: hidden;
font-family: system-ui,sans-serif;
color: #111827;
transition: transform .25s,box-shadow .25s
}
.card-001:hover {
transform: translateY(-4px);
box-shadow: 0 14px 30px rgba(17,24,39,.12)
}
.card-001__img {
height: 170px;
background: linear-gradient(135deg,#dbeafe,#a5b4fc)
}
.card-001__body {
padding: 18px 20px 20px
}
.card-001 h3 {
margin: 0 0 8px;
font-size: 18px;
line-height: 1.3
}
.card-001 p {
margin: 0 0 14px;
font-size: 14px;
line-height: 1.55;
color: #4b5563
}
.card-001 a {
font-size: 14px;
font-weight: 600;
color: #2563eb;
text-decoration: none
}
.card-001 a:hover {
text-decoration: underline
}
.card-001 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
HTML
<article class="card-001">
<div class="card-001__img"></div>
<div class="card-001__body">
<h3>Designing for quiet interfaces</h3>
<p>Why the best screens are the ones you barely notice, and how to get there.</p>
<a href="#">Read more</a>
</div>
</article>Prompt
Build a 320px wide content card with white background #fff, 1px border #e5e7eb, 14px radius, overflow hidden. Top area 170px tall filled with a 135deg gradient from #dbeafe to #a5b4fc as image placeholder. Body padding 18px 20px 20px: 18px title in #111827, 14px body text in #4b5563 with 1.55 line-height, then a 14px semibold link in #2563eb. On hover lift the card 4px up and add shadow 0 14px 30px rgba(17,24,39,.12), transition 250ms.