Design for AIBrutalista com sombra dura
Brutalista com sombra dura: um card em CSS. Copie as regras, ou o prompt que o reconstrói.
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
Construa um card neobrutalista: 280px, fundo amarelo chapado #fef08a, borda sólida preta de 3px, sem raio, sombra dura deslocada 8px 8px 0 #000 (sem blur). No hover o card se desloca 4px para a direita e para baixo enquanto a sombra encolhe para 4px 4px, parecendo pressionado. Título preto 22px peso 900, texto 14px, e um botão branco em caixa alta com borda preta de 3px e sua própria sombra dura de 4px que inverte para preto com texto amarelo no hover.