Limited founding-tier pricing — $299/mo locked for life with code FOUNDING50 · Claim your spot →

Glassmorphic Design System

Beautiful Components
With Glassmorphic Style

Soft pastel gradients meet frosted glass cards. Every component includes smooth animations powered by Framer Motion.

Glass Variant

Frosted glass with backdrop blur. Hover to see the scale effect!

Solid Variant

Clean white background with strong shadows and borders.

Elevated Variant

Extra shadow elevation that increases dramatically on hover.

Mode Cards

Six Life Modes

Each mode has its own color palette and gradient style

Work Mode

💼

In The Zone ✨

Deep focus on professional tasks with smart prioritization and distraction blocking

⭐🚀 Task automation
⭐📊 Meeting prep
⭐📈 Project tracking
Productivity Boost:320%

Learn Mode

📚

Knowledge Master 🎓

Accelerated learning with AI-powered summaries and knowledge retention tools

⭐✨ Smart summaries
⭐🗺️ Concept maps
⭐📊 Progress tracking
Learning Speed:180%

Focus Mode

🎯

Deep Work 🎯

Eliminate distractions and enter flow state with context-aware focus sessions

⭐🚫 Distraction blocking
⭐⏰ Pomodoro timer
⭐⚡ Flow triggers
Success Rate:98%

Weekend Mode

☕

Recharge 🌟

Recharge and pursue passions while keeping important tasks in gentle view

⭐🎨 Hobby projects
⭐🧘 Relaxation reminders
⭐🎉 Social planning
Energy Restored:150%

Family Mode

🏠

Together Time 👨‍👩‍👧

Balance family time with gentle reminders and shared calendars

⭐📅 Shared calendars
⭐🎯 Family goals
⭐📸 Memory capture
Quality Time:+4.2h

Relationship Mode

💕

Loving & Thoughtful 💕

Nurture connections with thoughtful reminders and relationship insights

⭐💝 Date planning
⭐🎊 Anniversary alerts
⭐💬 Conversation starters
Connection Score:175%

Icon Circles

Gradient containers in multiple sizes and shapes

Circle Style

Square Style

Feature Badges

Pill-shaped badges for section headers

Purple Variant
Blue Variant
Green Variant
Orange Variant
Pink Variant
Framer Motion Animations

Smooth Animations

Every component includes scroll animations and hover effects

Scroll Reveal

Fade in + slide up on scroll

Hover Scale

Scale 1.05 on hover

Tap Feedback

Scale 0.95 on click

AI-Powered Insights

Smart Recommendations

Personalized AI suggestions to optimize productivity

Optimize Your Peak Focus Hours

high

Your productivity data shows you're most focused between 9-11 AM. Schedule your most important tasks during this window.

25% productivity increase
5 minutes to reschedule tasks
25% productivity increase
5 minutes to reschedule

Take Strategic Breaks

high

You've been working 3+ hours without breaks. Research shows 15-minute breaks every 90 minutes boost performance.

Reduce burnout risk by 40%
15 minutes per break
Reduce burnout 40%
15 min per break
Clean Modern Design

Cleaner Style Variant

Softer pastels, minimal borders, and generous whitespace. Perfect for a modern, approachable feel.

Work Mode

💼

Stay productive with distraction blockers and focus timers

⭐Deep focus sessions
⭐Email batching
⭐Meeting protection

Learn Mode

📚

Absorb knowledge with structured learning paths and note-taking

⭐Course integration
⭐Smart notes
⭐Progress tracking

Focus Mode

🎯

Achieve flow state with ambient sounds and distraction blocking

⭐Pomodoro timer
⭐White noise
⭐App blocking

Weekend Mode

☕

Relax and recharge with gentle activity suggestions

⭐Hobby time blocks
⭐Self-care reminders
⭐Creative projects

Family Mode

🏠

Balance family time with gentle reminders and shared calendars

⭐Shared calendars
⭐Family goals
⭐Memory capture

Relationship Mode

💕

Nurture connections with thoughtful reminders and relationship insights

⭐Date planning
⭐Anniversary alerts
⭐Conversation starters

This cleaner variant features softer colors, rounded square icons, and minimal borders

Pure Black Mode

Pure Black Variant

Pure black background with vibrant accents. Inspired by Builder.io and modern dev tools.

Work Mode

💼

Stay productive with distraction blockers and focus timers

•Deep focus sessions
•Email batching
•Meeting protection

Learn Mode

📚

Absorb knowledge with structured learning paths and note-taking

•Course integration
•Smart notes
•Progress tracking

Focus Mode

🎯

Achieve flow state with ambient sounds and distraction blocking

•Pomodoro timer
•White noise
•App blocking

Weekend Mode

☕

Relax and recharge with gentle activity suggestions

•Hobby time blocks
•Self-care reminders
•Creative projects

Family Mode

🏠

Balance family time with gentle reminders and shared calendars

•Shared calendars
•Family goals
•Memory capture

Relationship Mode

💕

Nurture connections with thoughtful reminders and relationship insights

•Date planning
•Anniversary alerts
•Conversation starters

Pure black (#000000) background with vibrant gradient accents and sharp contrast

Developer Reference

How to Use This Design System

Quick reference guide for implementing these components in your pages

1. Import Components

import {
  CleanModeCard,
  CleanModeGrid,
  GlassCard,
  GradientButton,
  IconCircle,
  FeatureBadge,
  AIRecommendationCard
} from '@/components/design-system'

import { cleanModeTheme } from '@/lib/design-system/clean-mode-theme'

2. Clean Mode Cards (Recommended)

Use for mode showcases with soft pastels and minimal design:

<CleanModeGrid>
  <CleanModeCard
    modeId="work"
    description="Stay productive with distraction blockers"
    features={['Deep focus', 'Email batching', 'Meeting protection']}
    Icon={Briefcase}
  />
</CleanModeGrid>

Available modes: work, learn, focus, weekend, family, relationship

3. Glass Cards

Flexible containers with frosted glass or solid variants:

<GlassCard variant="glass" padding="large" hover>
  <h3>Your Content</h3>
  <p>Frosted glass background with backdrop blur</p>
</GlassCard>

{/* Variants: glass, solid, elevated */}
{/* Padding: small, medium, large, xlarge */}

4. Gradient Buttons

<GradientButton variant="primary" size="large" icon={ArrowRight}>
  Get Started
</GradientButton>

{/* Variants: primary (orange-pink), secondary (blue), tertiary (purple-pink) */}
{/* Sizes: small, medium, large */}

5. AI Recommendation Cards

<AIRecommendationCard
  icon={Target}
  title="Optimize Your Peak Focus Hours"
  priority="high"
  description="Your productivity data shows..."
  benefits={[
    { icon: TrendingUp, text: '25% productivity increase' },
    { icon: Clock, text: '5 minutes to reschedule' }
  ]}
  stats={[
    { label: '', value: '25% productivity increase' },
    { label: '', value: '5 minutes to reschedule' }
  ]}
  onTakeAction={() => console.log('Action taken')}
/>

Updating Your Site with Clean Design

Step 1: Replace Mode Cards

Find your current ModesShowcase component and replace ModeCard with CleanModeCard:

// In /components/home/ModesShowcase.tsx
import { CleanModeCard, CleanModeGrid } from '@/components/design-system'

// Replace the grid with:
<CleanModeGrid>
  <CleanModeCard modeId="work" ... />
  <CleanModeCard modeId="learn" ... />
</CleanModeGrid>

Step 2: Update Section Backgrounds

Use clean white or subtle gradients:

// Clean white
<section className="bg-[#1A1726] py-24">

// Subtle gradient
<section className="bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 py-24">

Step 3: Add Section Headers

<div className="text-center mb-12">
  <FeatureBadge Icon={Zap} variant="purple">
    New Feature
  </FeatureBadge>

  <h2 className="text-5xl font-bold mt-8 mb-4">
    <span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
      Your Headline
    </span>
  </h2>
</div>

Step 4: Add Animations

All components include Framer Motion animations. They'll automatically animate on scroll.

// Animations are built-in, but you can customize:
<CleanModeCard delay={0.15} /> // Stagger animations

📁 File Locations

Components:/marketing/components/design-system/
Themes:/marketing/lib/design-system/
Demo:/marketing/app/design-demo/page.tsx

✅ Responsive Design Status

Good News: Your Site is Already Responsive!

All design system components and existing site components already include responsive breakpoints using Tailwind CSS.

Current Responsive Breakpoints

// Tailwind breakpoints used throughout:
sm:  640px  - Small tablets
md:  768px  - Tablets
lg:  1024px - Small desktops
xl:  1280px - Large desktops

// Example from Hero component:
text-5xl sm:text-6xl lg:text-7xl  // Responsive text
flex-col sm:flex-row              // Stack on mobile
grid md:grid-cols-3               // Responsive grid

// Example from CleanModeGrid:
grid md:grid-cols-2 lg:grid-cols-3

What's Already Responsive

✅ Navigation
  • • Mobile menu (hamburger)
  • • Desktop horizontal nav
  • • Sticky header
✅ Hero Section
  • • Responsive text sizes
  • • Stacked buttons on mobile
  • • Adaptive padding
✅ Mode Cards
  • • 1 col mobile → 2 tablet → 3 desktop
  • • Flexible padding
  • • Touch-friendly buttons
✅ Design Components
  • • CleanModeGrid auto-responsive
  • • GlassCard adapts to screen
  • • Buttons scale appropriately

How to Test Responsive Design

  1. 1.Open Chrome DevTools (F12 or Cmd+Option+I)
  2. 2.Click the device toolbar icon (Cmd+Shift+M)
  3. 3.Test these devices: iPhone 12, iPad, Desktop
  4. 4.Or manually resize browser window to see breakpoints

Adding Responsive Classes to New Components

// Pattern: mobile-first, then add breakpoints
<div className="
  text-base sm:text-lg md:text-xl     // Text size
  px-4 md:px-8 lg:px-12               // Padding
  grid grid-cols-1 md:grid-cols-2     // Layout
  gap-4 md:gap-6 lg:gap-8             // Spacing
">
  Content
</div>

// Common patterns:
hidden md:block           // Hide on mobile
flex-col md:flex-row      // Stack on mobile
w-full md:w-1/2          // Full width mobile
max-w-sm md:max-w-2xl    // Responsive max width

💡 Pro Tips

  • •Mobile-first: Design for mobile, then add larger breakpoints
  • •Touch targets: Buttons should be min 44x44px on mobile
  • •Text readability: Never go below 16px base font size
  • •Test real devices: Simulators are good but test on actual phones/tablets

View the code at /marketing/components/design-system/

Access at: http://localhost:3001/design-demo