Design for AIHard shadow brutal
Hard shadow brutal: a CSS card. Copy the rules, or the prompt that rebuilds it.
No gradients allowed
Thick black lines, flat yellow, and a shadow that does not blur.
CSS
.card-032 {
width: 280px;
padding: 22px;
background: #fef08a;
border: 3px solid #000;
border-radius: 0;
box-shadow: 8px 8px 0 #000;
font-family: system-ui,sans-serif;
color: #000;
transition: transform .12s,box-shadow .12s
}
.card-032:hover {
transform: translate(4px,4px);
box-shadow: 4px 4px 0 #000
}
.card-032 h3 {
margin: 0 0 8px;
font-size: 22px;
font-weight: 900;
letter-spacing: -.01em
}
.card-032 p {
margin: 0 0 16px;
font-size: 14px;
line-height: 1.5
}
.card-032 button {
padding: 10px 18px;
border: 3px solid #000;
background: #fff;
font-weight: 800;
font-size: 13px;
text-transform: uppercase;
cursor: pointer;
box-shadow: 4px 4px 0 #000;
transition: background .12s,color .12s,box-shadow .12s
}
.card-032 button:hover {
background: #000;
color: #fef08a;
box-shadow: 2px 2px 0 #000
}
.card-032 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
HTML
<article class="card-032">
<h3>No gradients allowed</h3>
<p>Thick black lines, flat yellow, and a shadow that does not blur.</p>
<button>Read it</button>
</article>Prompt
Build a neo-brutalist card: 280px, flat yellow #fef08a background, 3px solid black border, no radius, hard offset shadow 8px 8px 0 #000 (no blur). On hover the card shifts 4px right and down while the shadow shrinks to 4px 4px, so it looks pressed. 22px black 900-weight title, 14px body text, and an uppercase white button with 3px black border and its own 4px hard shadow that inverts to black with yellow text on hover.