# Frontend Design Examples

Examples of theme-integrated frontend mockups.

---

## Example 1: Login Form (Default Theme)

**Theme**: theme-default  
**Accent**: #10b981 (emerald)  
**Style**: Clean, minimal, professional

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - Default Theme</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        /* Theme: theme-default */
        :root {
            --color-primary: #0f172a;
            --color-secondary: #475569;
            --color-accent: #10b981;
            --color-neutral: #e2e8f0;
            --color-error: #ef4444;
            
            --slate-50: #f8fafc;
            --slate-100: #f1f5f9;
            --slate-200: #e2e8f0;
            --slate-300: #cbd5e1;
            --slate-400: #94a3b8;
            
            --font-heading: 'Inter', sans-serif;
            --font-body: system-ui, sans-serif;
            
            --radius-md: 8px;
            --radius-lg: 12px;
            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
        }
        
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: var(--font-body);
            background: var(--slate-50);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
        }
        
        .login-card {
            background: white;
            border-radius: var(--radius-lg);
            padding: 48px 40px;
            width: 100%;
            max-width: 400px;
            box-shadow: var(--shadow-md);
            border: 1px solid var(--slate-200);
        }
        
        .login-title {
            font-family: var(--font-heading);
            font-size: 24px;
            font-weight: 700;
            color: var(--color-primary);
            margin-bottom: 8px;
        }
        
        .login-subtitle {
            color: var(--color-secondary);
            font-size: 14px;
            margin-bottom: 32px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            font-size: 13px;
            font-weight: 500;
            color: var(--color-primary);
            margin-bottom: 6px;
        }
        
        .form-input {
            width: 100%;
            padding: 12px 16px;
            font-size: 14px;
            border: 1px solid var(--slate-200);
            border-radius: var(--radius-md);
            background: white;
            color: var(--color-primary);
            transition: all 0.2s ease;
        }
        
        .form-input:focus {
            outline: none;
            border-color: var(--color-accent);
            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
        }
        
        .form-input::placeholder {
            color: var(--slate-400);
        }
        
        .btn-primary {
            width: 100%;
            padding: 14px 24px;
            background: var(--color-accent);
            color: white;
            border: none;
            border-radius: var(--radius-md);
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .btn-primary:hover {
            background: #059669;
            transform: translateY(-1px);
        }
        
        .btn-primary:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
        }
        
        .login-footer {
            text-align: center;
            margin-top: 24px;
            font-size: 13px;
            color: var(--color-secondary);
        }
        
        .login-footer a {
            color: var(--color-accent);
            text-decoration: none;
            font-weight: 500;
        }
        
        .login-footer a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="login-card">
        <h1 class="login-title">Welcome back</h1>
        <p class="login-subtitle">Sign in to your account to continue</p>
        
        <form>
            <div class="form-group">
                <label class="form-label">Email</label>
                <input type="email" class="form-input" placeholder="you@example.com">
            </div>
            
            <div class="form-group">
                <label class="form-label">Password</label>
                <input type="password" class="form-input" placeholder="••••••••">
            </div>
            
            <button type="submit" class="btn-primary">Sign in</button>
        </form>
        
        <p class="login-footer">
            Don't have an account? <a href="#">Sign up</a>
        </p>
    </div>
</body>
</html>
```

---

## Example 2: Dashboard Card (Ocean Theme)

**Theme**: theme-ocean  
**Accent**: #0ea5e9 (sky blue)  
**Style**: Cool, calm, data-focused

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard - Ocean Theme</title>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        /* Theme: theme-ocean */
        :root {
            --color-primary: #0c4a6e;
            --color-secondary: #475569;
            --color-accent: #0ea5e9;
            --color-neutral: #e0f2fe;
            --color-success: #22c55e;
            
            --sky-50: #f0f9ff;
            --sky-100: #e0f2fe;
            --sky-200: #bae6fd;
            --sky-700: #0369a1;
            --sky-900: #0c4a6e;
            
            --font-heading: 'Plus Jakarta Sans', sans-serif;
            --font-body: system-ui, sans-serif;
            
            --radius-lg: 16px;
            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
        }
        
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: var(--font-body);
            background: linear-gradient(135deg, var(--sky-50) 0%, var(--sky-100) 100%);
            min-height: 100vh;
            padding: 48px;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 24px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .stat-card {
            background: white;
            border-radius: var(--radius-lg);
            padding: 28px;
            box-shadow: var(--shadow-lg);
            border: 1px solid var(--sky-200);
            transition: all 0.3s ease;
        }
        
        .stat-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
        }
        
        .stat-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 16px;
        }
        
        .stat-label {
            font-size: 13px;
            font-weight: 500;
            color: var(--color-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .stat-icon {
            width: 40px;
            height: 40px;
            background: var(--sky-100);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--color-accent);
        }
        
        .stat-value {
            font-family: var(--font-heading);
            font-size: 36px;
            font-weight: 700;
            color: var(--color-primary);
            line-height: 1;
            margin-bottom: 8px;
        }
        
        .stat-change {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 13px;
            font-weight: 600;
            color: var(--color-success);
            background: rgba(34, 197, 94, 0.1);
            padding: 4px 8px;
            border-radius: 6px;
        }
    </style>
</head>
<body>
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-header">
                <span class="stat-label">Total Revenue</span>
                <div class="stat-icon">
                    <svg width="20" height="20" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10.75 2.75a.75.75 0 00-1.5 0v8.614L6.295 8.235a.75.75 0 10-1.09 1.03l4.25 4.5a.75.75 0 001.09 0l4.25-4.5a.75.75 0 00-1.09-1.03l-2.955 3.129V2.75z"/>
                    </svg>
                </div>
            </div>
            <div class="stat-value">$48,294</div>
            <span class="stat-change">↑ 12.5%</span>
        </div>
        
        <div class="stat-card">
            <div class="stat-header">
                <span class="stat-label">Active Users</span>
                <div class="stat-icon">
                    <svg width="20" height="20" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 8a3 3 0 100-6 3 3 0 000 6zM3.465 14.493a1.23 1.23 0 00.41 1.412A9.957 9.957 0 0010 18c2.31 0 4.438-.784 6.131-2.1.43-.333.604-.903.408-1.41a7.002 7.002 0 00-13.074.003z"/>
                    </svg>
                </div>
            </div>
            <div class="stat-value">2,847</div>
            <span class="stat-change">↑ 8.2%</span>
        </div>
        
        <div class="stat-card">
            <div class="stat-header">
                <span class="stat-label">Conversion Rate</span>
                <div class="stat-icon">
                    <svg width="20" height="20" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M12.577 4.878a.75.75 0 01.919-.53l4.78 1.281a.75.75 0 01.531.919l-1.281 4.78a.75.75 0 01-1.449-.387l.81-3.022a19.407 19.407 0 00-5.594 5.203.75.75 0 01-1.139.093L7 10.06l-4.72 4.72a.75.75 0 01-1.06-1.06l5.25-5.25a.75.75 0 011.06 0l3.074 3.073a20.923 20.923 0 015.545-4.931l-3.042-.815a.75.75 0 01-.53-.919z" clip-rule="evenodd"/>
                    </svg>
                </div>
            </div>
            <div class="stat-value">3.24%</div>
            <span class="stat-change">↑ 2.1%</span>
        </div>
    </div>
</body>
</html>
```

---

## Example 3: Feature Card (Sunset Theme)

**Theme**: theme-sunset  
**Accent**: #f97316 (orange)  
**Style**: Warm, energetic, bold

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Features - Sunset Theme</title>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        /* Theme: theme-sunset */
        :root {
            --color-primary: #431407;
            --color-secondary: #78350f;
            --color-accent: #f97316;
            --color-neutral: #ffedd5;
            
            --orange-50: #fff7ed;
            --orange-100: #ffedd5;
            --orange-200: #fed7aa;
            --orange-500: #f97316;
            --orange-600: #ea580c;
            --orange-900: #431407;
            
            --font-heading: 'Outfit', sans-serif;
            --font-body: system-ui, sans-serif;
            
            --radius-xl: 20px;
        }
        
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: var(--font-body);
            background: linear-gradient(180deg, var(--orange-50) 0%, var(--orange-100) 50%, var(--orange-200) 100%);
            min-height: 100vh;
            padding: 64px 24px;
        }
        
        .feature-container {
            max-width: 400px;
            margin: 0 auto;
        }
        
        .feature-card {
            background: white;
            border-radius: var(--radius-xl);
            padding: 40px 32px;
            text-align: center;
            box-shadow: 
                0 25px 50px -12px rgba(249, 115, 22, 0.25),
                0 0 0 1px rgba(249, 115, 22, 0.1);
            position: relative;
            overflow: hidden;
        }
        
        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--orange-500), var(--orange-600));
        }
        
        .feature-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--orange-500), var(--orange-600));
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 24px;
            color: white;
            font-size: 32px;
            box-shadow: 0 10px 30px -5px rgba(249, 115, 22, 0.4);
        }
        
        .feature-title {
            font-family: var(--font-heading);
            font-size: 28px;
            font-weight: 800;
            color: var(--color-primary);
            margin-bottom: 12px;
            letter-spacing: -0.5px;
        }
        
        .feature-description {
            font-size: 16px;
            color: var(--color-secondary);
            line-height: 1.6;
            margin-bottom: 28px;
        }
        
        .feature-cta {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 14px 28px;
            background: var(--color-accent);
            color: white;
            border: none;
            border-radius: 12px;
            font-family: var(--font-heading);
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .feature-cta:hover {
            background: var(--orange-600);
            transform: scale(1.05);
            box-shadow: 0 10px 20px -5px rgba(249, 115, 22, 0.4);
        }
    </style>
</head>
<body>
    <div class="feature-container">
        <div class="feature-card">
            <div class="feature-icon">🚀</div>
            <h2 class="feature-title">Lightning Fast</h2>
            <p class="feature-description">
                Experience blazing performance with our optimized infrastructure. 
                Your applications load in milliseconds, not seconds.
            </p>
            <button class="feature-cta">
                Get Started
                <span>→</span>
            </button>
        </div>
    </div>
</body>
</html>
```

---

## Key Takeaways

1. **Read the theme first** - Every color, font, and radius comes from design-system.md
2. **CSS variables everywhere** - Never hardcode colors
3. **Match the theme's character** - Ocean = calm, Sunset = energetic
4. **Creative within constraints** - Theme provides tokens, you provide creativity
5. **Complete working code** - Self-contained HTML that renders immediately
