Design for AITema del sistema
Tema del sistema: tarjeta en CSS. Copia las reglas, o el prompt que reproduce el resultado.
Follows the system theme
Same markup, swapped custom properties under prefers-color-scheme: dark.
CSS
.card-048 {
--bg: #fff;
--fg: #111827;
--muted: #6b7280;
--line: #e5e7eb;
--accent: #2563eb;
width: 290px;
padding: 22px;
background: var(--bg);
color: var(--fg);
border: 1px solid var(--line);
border-radius: 14px;
font-family: system-ui,sans-serif;
transition: background .3s,color .3s,border-color .3s
}
@media (prefers-color-scheme:dark) {
.card-048 {
--bg: #111827;
--fg: #f9fafb;
--muted: #9ca3af;
--line: #374151;
--accent: #60a5fa
}
}
.card-048__label {
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--accent)
}
.card-048 h3 {
margin: 6px 0;
font-size: 18px
}
.card-048 p {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: var(--muted)
}
.card-048:hover {
border-color: var(--accent)
}
HTML
<article class="card-048">
<span class="card-048__label">Adaptive</span>
<h3>Follows the system theme</h3>
<p>Same markup, swapped custom properties under prefers-color-scheme: dark.</p>
</article>Prompt
Construye una tarjeta de 290px gobernada por completo por custom properties: --bg #fff, --fg #111827, --muted #6b7280, --line #e5e7eb, --accent #2563eb en modo claro, y bajo @media (prefers-color-scheme: dark) cámbialas a #111827, #f9fafb, #9ca3af, #374151, #60a5fa. La tarjeta tiene padding 22px, radio 14px, borde 1px en --line que pasa a --accent en hover, una etiqueta en mayúsculas 11px en --accent, título 18px, texto 14px en --muted, y transiciones de 300ms en los cambios de color.