Redesigning with Flat Glassmorphism

1. Scan the project for existing design tokens (CSS variables, Tailwind config, theme files).
2. Map those tokens to flat glassmorphism equivalents (translucent surfaces, soft blur, flat edges, no heavy skeuomorphic shadows).
3. Apply the mapped tokens to the target component/page, reusing the project's existing utility classes or CSS-in-JS patterns — don't introduce a new styling system.

CSS
/* Example: generated from discovered tokens --bg, --primary, --radius-md */
.card--glass {
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
  border-radius: var(--radius-md);
  box-shadow: none; /* flat: no drop shadow, border does the separation */
}

Progress:

• Step 1: Detect token source (Tailwind config, CSS custom properties, theme.ts/json, styled-components theme, SCSS vars)
• Step 2: Extract core tokens: colors (background/surface/primary/accent), spacing scale, border-radius scale, font stack, existing breakpoints
• Step 3: Detect styling method in use (Tailwind classes, CSS Modules, styled-components, plain CSS/SCSS) and match it — never mix in a new one
• Step 4: Define glassmorphism primitives using discovered tokens only (no hardcoded hex/px)
• Step 5: Apply primitives to target component(s), preserving existing layout/structure/markup
• Step 6: Verify contrast/readability over blurred backgrounds (text color vs. surface opacity)
• Step 7: Add fallback for browsers without backdrop-filter support (solid translucent background)

Token discovery priority:

1. tailwind.config.js/ts → theme.extend.colors, borderRadius, spacing
2. CSS custom properties in :root or globals.css
3. Theme objects (theme.ts, theme.json, styled-components ThemeProvider)
4. If none found, inspect existing component class names for inferred scale, then propose minimal new tokens matching that scale

Flat glassmorphism rules (non-negotiable):

• Flat = no heavy drop shadows, no gradients for depth, no bevels. Separation comes from border + blur + opacity only.
• Background: 40–70% opacity of a surface token, never pure white/black unless that's the project's actual token value.
• Blur: 8–20px depending on existing spacing scale density (tighter UI = less blur).
• Border: 1px, low-opacity version of a primary/border token — this is what keeps it "flat" rather than floaty.
• Border-radius: reuse existing project radius tokens exactly; don't invent new roundness.
• No skeuomorphic highlights, no inner glow, no faux reflections.

Example 1: Input: Project uses Tailwind with bg-slate-900, text-slate-100, rounded-xl, no CSS variables for color. Output:

JavaScript
<div className="bg-slate-800/50 backdrop-blur-md border border-slate-100/10 rounded-xl text-slate-100">
  ...
</div>

(Derived /50 opacity and /10 border directly from existing slate palette already in the project — no new colors introduced.)

Example 2: Input: Project defines CSS variables --surface: #1a1b1e; --accent: #7c5cff; --radius: 12px; in globals.css. Output:

CSS
.panel--glass {
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: var(--radius);
}

Example 3: Input: Project has no design tokens at all, plain inline styles throughout. Output: Propose a minimal :root token block first (background, accent, radius pulled from the most frequently repeated existing values in the codebase), then apply glass styles referencing those new tokens — flagging this as a new addition rather than silently injecting magic numbers.