Design Technologist · AI-Assisted CSS Engineering
This showcase documents the complete assignment from raw semantic HTML through prompt engineering, human auditing, and a verified Product Feature Card whose appearance changes by editing only the parent theme class.
Production components need different visual personalities without duplicating the HTML or repeating layout rules.
A card can be copied into light, dark, and specialized environments, but repeated theme-specific component blocks quickly drift. Padding, borders, typography, and interaction rules become harder to audit when every visual variant restates the structure.
Cascade Layers declare where theme variables and component rules belong. Scoped custom properties make the parent wrapper the visual switch, and native nesting keeps each child rule close to the component that owns it.
Six coordinated ideas let one Product Feature Card become light, dark, or cyberpunk through parent-owned variables.
Layer order separates reset, base, theme-variable, and component responsibilities before specificity is considered.
Child selectors, hover states, and focus states stay grouped inside the component scope they modify.
Theme wrappers own local card values, so one unchanged component can inherit different visual instructions.
Backgrounds, borders, text colors, accents, and hover states all resolve through the active wrapper variables.
A single parent class selects the active theme without changing the repeated Product Feature Card markup.
Button and card feedback still comes from the active theme variables instead of hardcoded state colors.
The HTML already proves that all three cards share the same structure; the browser just has not received the theme system yet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Week 05 Lab: Multi-Theme Components</title>
</head>
<body>
<div class="theme-playground">
<!-- THEME A: LIGHT (Default Elegant) -->
<div class="theme-container theme--light">
<article class="themed-card">
<header class="themed-card__header">
<span class="themed-card__badge">New Release</span>
<h3 class="themed-card__title">Minimalist Workspace</h3>
</header>
<div class="themed-card__body">
<p>An elegant, distraction-free environment curated specifically for remote software engineers and designers looking for spatial clarity.</p>
</div>
<footer class="themed-card__footer">
<button class="themed-card__btn">Explore Space</button>
</footer>
</article>
</div>
<!-- THEME B: DARK (Terminal Sleek) -->
<div class="theme-container theme--dark">
<article class="themed-card">
<header class="themed-card__header">
<span class="themed-card__badge">New Release</span>
<h3 class="themed-card__title">Minimalist Workspace</h3>
</header>
<div class="themed-card__body">
<p>An elegant, distraction-free environment curated specifically for remote software engineers and designers looking for spatial clarity.</p>
</div>
<footer class="themed-card__footer">
<button class="themed-card__btn">Explore Space</button>
</footer>
</article>
</div>
<!-- THEME C: CYBERPUNK (High-Contrast Neon) -->
<div class="theme-container theme--cyberpunk">
<article class="themed-card">
<header class="themed-card__header">
<span class="themed-card__badge">New Release</span>
<h3 class="themed-card__title">Minimalist Workspace</h3>
</header>
<div class="themed-card__body">
<p>An elegant, distraction-free environment curated specifically for remote software engineers and designers looking for spatial clarity.</p>
</div>
<footer class="themed-card__footer">
<button class="themed-card__btn">Explore Space</button>
</footer>
</article>
</div>
</div>
</body>
</html>Browser defaults only
theme--light
An elegant, distraction-free environment curated specifically for remote software engineers and designers looking for spatial clarity.
theme--dark
The same Product Feature Card still appears in browser-default flow.
theme--cyberpunk
The class name is present, but no visual theme has been mapped yet.
Each layer describes a testable styling responsibility rather than asking the model to create three unrelated card designs.
Preserve the three identical Product Feature Card instances and their parent theme classes.
Require reset, base, themes, and components layers before any rule is written.
Place only local custom-property overrides inside the three theme wrapper classes.
Keep the card, badge, title, body, footer, button, and states nested under the component scope.
Require one structural card system and prohibit repeated padding, layout, and typography inside every theme.
Make the final audit inspect the single-class swap, cascade layer order, redundancy, focus, zoom, and overflow behavior.
Act as a senior CSS systems engineer. Generate a production-ready stylesheet for the supplied multi-theme Product Feature Card HTML without replacing its structural class system.
Architecture requirements:
1. Establish the cascade layer sequence at the very top of the stylesheet as @layer reset, base, themes, components;.
2. Keep reset behavior in the reset layer and foundational document or playground rules in the base layer so structural responsibilities stay predictable.
3. In the themes layer, declare only scoped custom property overrides for .theme--light, .theme--dark, and .theme--cyberpunk. Do not place layout, spacing, typography, or component declarations in the themes layer.
4. Each theme wrapper must define local variables for --card-bg, --card-text, --card-border, and --card-accent. Add supporting theme variables only when they remain local to the themed component system.
5. In the components layer, style .themed-card and all of its children using native CSS nesting. Keep the header, badge, title, body, footer, button, hover, active, and focus states nested under the parent component scope.
6. All card colors, borders, badge colors, button colors, and button hover states must reference the scoped theme variables rather than hardcoded values inside repeated theme-specific component blocks.
7. Preserve the exact repeated card markup pattern. The only visual switch should come from changing the parent wrapper class from .theme--light to .theme--dark or .theme--cyberpunk.
8. Do not duplicate structural declarations such as padding, grid, gap, border radius, typography scale, or button sizing inside every theme class.
9. Keep the component responsive with logical properties, safe wrapping, readable contrast, visible keyboard focus, reduced-motion handling, and no horizontal overflow at narrow viewport widths.
10. Add concise comments only where they clarify the layer order, scoped variables, native nesting, or the single-class theme-switching audit.
Return only the complete CSS stylesheet.The draft only becomes trustworthy after the layer order, scoped variables, native nesting, and single-class swap are inspected.
@layer reset, base, themes, components;
@layer themes {
.theme--light {
--card-bg: oklch(0.99 0.004 255);
--card-text: oklch(0.23 0.03 255);
--card-border: oklch(0.86 0.025 255);
--card-accent: oklch(0.55 0.16 250);
}
.theme--dark {
--card-bg: oklch(0.18 0.025 255);
--card-text: oklch(0.95 0.012 255);
--card-border: oklch(0.35 0.035 255);
--card-accent: oklch(0.76 0.13 185);
}
.theme--cyberpunk {
--card-bg: oklch(0.16 0.055 300);
--card-text: oklch(0.96 0.025 315);
--card-border: oklch(0.78 0.22 330);
--card-accent: oklch(0.88 0.24 145);
}
}
@layer components {
.themed-card {
background-color: var(--card-bg);
color: var(--card-text);
border: 1px solid var(--card-border);
& .themed-card__badge {
background: var(--card-accent);
}
& .themed-card__btn:hover {
border-color: var(--card-accent);
box-shadow: 0 0 0.75rem var(--card-accent);
}
}
}/* Avoid: duplicated structure inside every theme */
.theme--light .themed-card { padding: 2rem; display: grid; }
.theme--dark .themed-card { padding: 2rem; display: grid; }
.theme--cyberpunk .themed-card { padding: 2rem; display: grid; }
/* Prefer: one structure, swapped variables */
.theme--light { --card-bg: white; --card-text: black; }
.theme--dark { --card-bg: black; --card-text: white; }
.themed-card {
padding: 2rem;
display: grid;
background: var(--card-bg);
color: var(--card-text);
}The generated stylesheet begins with @layer reset, base, themes, components;.
The themes layer contains custom-property declarations rather than repeated layout rules.
Each wrapper owns --card-bg, --card-text, --card-border, and --card-accent.
Card child selectors and states are grouped under .themed-card with native nesting.
Padding, grid, radius, and button sizing appear once in the component layer.
Interactive states resolve through scoped variables so each parent theme controls its own feedback.
Renaming a parent wrapper class changes the theme while the card markup remains untouched.
Keyboard focus, hover, active states, readable contrast, and narrow-viewport wrapping remain inspectable.
All three cards keep the same internal structure, while each parent wrapper swaps the local visual system.
An elegant, distraction-free environment curated specifically for remote software engineers and designers looking for spatial clarity.
An elegant, distraction-free environment curated specifically for remote software engineers and designers looking for spatial clarity.
An elegant, distraction-free environment curated specifically for remote software engineers and designers looking for spatial clarity.
The Light, Dark, and Cyberpunk examples keep the same .themed-card child structure.
The wrapper classes swap variables, and the card consumes those variables through var().
Changing .theme--light to .theme--cyberpunk in DevTools should transform the first card instantly.
The final component is accepted only after the variable-swap architecture survives direct inspection.
@layer reset, base, themes, components;.themes layer contains only custom-property overrides for the theme wrappers..theme--light, .theme--dark, and .theme--cyberpunk each define --card-bg, --card-text, --card-border, and --card-accent..themed-card component and its children are styled in the components layer.theme--light to theme--cyberpunk, and confirm the card visually changes.Explore Space button.AI drafted the scoped theme CSS. Human auditing verified layer boundaries, local variables, native nesting, accessibility, and standards compliance.