Redesigning with Flat Glassmorphism

HTML
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">

<!-- Lucide Icons -->
<script src="https://unpkg.com/lucide@latest"></script>

CSS
:root {
  --font-sans: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --bg: #0b0d12;
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.12);
  --text-primary: #f5f6f8;
  --text-secondary: rgba(245, 246, 248, 0.6);
  --accent: #7c9dff;

  --radius: 16px;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text-primary);
}

.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: none; /* flat — no shadows, ever */
}

.mono {
  font-family: var(--font-mono);
}

JavaScript
<div className="glass p-6">
  <i data-lucide="sparkles" className="w-5 h-5 text-accent"></i>
  <h2 className="font-sans font-semibold">Dashboard</h2>
  <span className="mono text-sm text-secondary">v2.4.1</span>
</div>

Progress checklist for any redesign/creation task:

- [ ] 1. Audit current component/page (if redesigning) or gather requirements (if new)
- [ ] 2. Identify structural regions (header, nav, cards, forms, footer)
- [ ] 3. Apply design tokens (colors, radius, spacing, typography)
- [ ] 4. Replace all icons with Lucide equivalents
- [ ] 5. Apply font roles: Outfit for UI/copy, JetBrains Mono for data/code/labels
- [ ] 6. Strip all box-shadows, drop-shadows, and elevation effects
- [ ] 7. Apply glass surfaces to elevated elements (cards, modals, nav, dropdowns)
- [ ] 8. Verify contrast/readability against glass backgrounds
- [ ] 9. Add hover/focus states using border or background opacity shifts (not shadow)
- [ ] 10. Responsive pass

Step Details

1. Audit/Requirements

• Redesign: list every existing element, its purpose, and current style choices to replace.
• New page: define sections needed (hero, nav, content blocks, CTA, footer) before styling.

2. Design tokens (always define these, don't hardcode values inline)

• Background: dark or light base (#0b0d12 dark / #f4f5f7 light)
• Glass surface: rgba(255,255,255,0.05–0.08) with 1px solid rgba(255,255,255,0.1–0.15) border
• Radius: 12–20px, consistent across all surfaces
• Spacing scale: 4/8/12/16/24/32/48px
• One accent color max (used sparingly for CTAs, active states, focus rings)

3. Typography roles

• Outfit: headings, body copy, buttons, nav labels — anything conversational/UI
• JetBrains Mono: numbers, stats, timestamps, code, IDs, tags, metadata, badges
• Never mix fonts within a single text element

4. Icons

• Lucide only. Remove all other icon sets (Font Awesome, Material Icons, emoji-as-icon).
• Standard sizes: 16px (inline/labels), 20px (buttons), 24px (nav/headers)
• Stroke width 1.5–2, never filled icons (keeps it flat)

5. Flatness rule

• box-shadow: none on every element, always
• No filter: drop-shadow(...)
• Depth comes from: border opacity, background opacity, blur — never shadow
• Hover/active states: lighten border or background, do not add shadow or lift (transform: translateY) effects

Example 1: Redesigning a card component

Input:

JavaScript
<div style={{ boxShadow: '0 4px 12px rgba(0,0,0,0.2)', background: '#fff', borderRadius: 8 }}>
  <FontAwesomeIcon icon="star" />
  <h3 style={{ fontFamily: 'Arial' }}>Premium Plan</h3>
  <p>$29/month</p>
</div>

Output:

JavaScript
<div className="glass p-6 rounded-2xl">
  <i data-lucide="star" className="w-5 h-5 text-accent mb-3"></i>
  <h3 className="font-sans font-semibold text-lg">Premium Plan</h3>
  <p className="font-mono text-2xl mt-2">$29<span className="text-secondary text-sm">/month</span></p>
</div>

Example 2: New page from scratch

Input: "Create a settings page with profile, notifications, and billing sections"

Output: A page with a .glass sidebar nav (Lucide icons: user, bell, credit-card), each section in its own .glass panel with Outfit headings, JetBrains Mono for account IDs/plan details/dates, toggle switches styled flat (no shadow, border-based states), consistent 24px padding and 16px radius throughout.