Styledex
← Index

Gesture First Navigation System

superdesignCC0-1.0Prompt onlyMobile app · mobile-appExperimental · experimentalLight · lightMedium · mediumBlue · blueVivid · vividSerif · serifGeneral · general

A content-first navigation system that minimizes visible chrome and relies primarily on swipe gestures to move between major sections, creating an immersive and fluid experience. Best Suitable For Media apps, reading apps, gallery-style products, experimental consumer experiences. Category: Mobile Apps. Prompt author listed upstream: Shirley Lou.

NNorthwind
Product · Pricing
Specimen
Make the work feel finished

One interface, dressed in this style. Compare type, color, radius, and density.

128
Active
4.8
Score
12ms
Edge

Attribution

"Gesture First Navigation System" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/gesture-first-navigation-system @ 6c6090694520.

https://github.com/superdesigndev/superdesign-prompts · prompts/gesture-first-navigation-system · 6c6090694520 · © Superdesign

Prompt

Here is a reference implementation:
~~~html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Gesture Navigation System</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Manrope', sans-serif;
            overscroll-behavior: none;
            background-color: #f3f4f6;
        }
        /* Hide scrollbars for clean look */
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        /* Physics-based transitions */
        .snap-transition {
            transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
        }
        /* Animation for gesture hints */
        @keyframes hint-bounce-x {
            0%, 100% { transform: translateX(0); opacity: 0; }
            20% { opacity: 0.6; }
            50% { transform: translateX(-12px); opacity: 0; }
        }
        @keyframes hint-bounce-y {
            0%, 100% { transform: translateY(0); opacity: 0; }
            20% { opacity: 0.6; }
            50% { transform: translateY(12px); opacity: 0; }
        }
        .hint-x { animation: hint-bounce-x 2.5s ease-in-out infinite; }
        .hint-y { animation: hint-bounce-y 2.5s ease-in-out infinite 1s; }
        /* Glass morphism */
        .glass {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
    </style>
</head>
<body>
    <!-- Main App Container -->
    <!-- touch-action: pan-y allows vertical scroll on children but we capture horizontal -->
    <div id="app" class="w-full h-screen bg-white overflow-hidden relative text-gray-900 shadow-2xl mx-auto" style="touch-action: none; max-width: 100%;">
        <!-- TOP ACTION LAYER (Hidden initially) -->
        <div id="action-layer" class="absolute inset-0 bg-gray-900 z-50 transform -translate-y-full text-white pt-14 pb-[34px] px-6 flex flex-col justify-between shadow-2xl" style="will-change: transform;">
            <div class="opacity-0 transition-opacity duration-500 delay-100" id="action-content">
                <div class="flex items-center justify-between mb-12">
                    <h2 class="text-3xl font-light tracking-tight">Quick Actions</h2>
                    <button id="close-actions" class="w-12 h-12 flex items-center justify-center bg-white/10 rounded-full hover:bg-white/20 active:scale-95 transition-all">
                        <iconify-icon icon="lucide:x" class="text-2xl"></iconify-icon>
                    </button>
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <button class="h-32 bg-white/5 rounded-2xl flex flex-col items-center justify-center gap-3 hover:bg-white/10 active:scale-95 transition-all group">
                        <iconify-icon icon="lucide:filter" class="text-3xl text-gray-400 group-hover:text-white transition-colors"></iconify-icon>
                        <span class="font-medium text-sm text-gray-300">Filter Feed</span>
                    </button>
                    <button class="h-32 bg-white/5 rounded-2xl flex flex-col items-center justify-center gap-3 hover:bg-white/10 active:scale-95 transition-all group">
                        <iconify-icon icon="lucide:search" class="text-3xl text-gray-400 group-hover:text-white transition-colors"></iconify-icon>
                        <span class="font-medium text-sm text-gray-300">Search</span>
                    </button>
                    <button class="h-32 bg-white/5 rounded-2xl flex flex-col items-center justify-center gap-3 hover:bg-white/10 active:scale-95 transition-all group">
                        <iconify-icon icon="lucide:bell" class="text-3xl text-gray-400 group-hover:text-white transition-colors"></iconify-icon>
                        <span class="font-medium text-sm text-gray-300">Notifications</span>
                    </button>
                    <button class="h-32 bg-white/5 rounded-2xl flex flex-col items-center justify-center gap-3 hover:bg-white/10 active:scale-95 transition-all group">
                        <iconify-icon icon="lucide:settings-2" class="text-3xl text-gray-400 group-hover:text-white transition-colors"></iconify-icon>
                        <span class="font-medium text-sm text-gray-300">Preferences</span>
                    </button>
                </div>
            </div>
            <div class="flex flex-col items-center gap-2 pb-8 opacity-50">
                <iconify-icon icon="lucide:chevron-up" class="text-2xl animate-bounce"></iconify-icon>
                <span class="text-xs font-mono uppercase tracking-widest">Push up to close</span>
            </div>
        </div>
        <!-- CONTENT WRAPPER (Horizontal Slider) -->
        <div id="content-wrapper" class="flex h-full w-[300%] relative z-10" style="will-change: transform;">
            <!-- PAGE 1: FEED -->
            <div class="w-1/3 h-full pt-14 pb-[34px] px-6 flex flex-col bg-white overflow-hidden">
                <header class="shrink-0 mb-8">
                    <div class="flex justify-between items-center">
                        <span class="text-[10px] font-bold tracking-[0.2em] text-gray-400 uppercase">01 / 03</span>
                        <div class="w-2 h-2 rounded-full bg-red-500"></div>
                    </div>
                    <h1 class="text-4xl font-light mt-4 leading-tight tracking-tight">Daily<br>Insight</h1>
                </header>
                <div class="flex-1 overflow-y-auto no-scrollbar pb-10 space-y-8 scroll-container">
                    <article class="group">
                        <div class="w-full aspect-[16/10] bg-gray-100 mb-4 rounded-lg overflow-hidden relative">
                            <img src="https://images.unsplash.com/photo-1600607686527-6fb886090705?q=80&w=600&auto=format&fit=crop" class="w-full h-full object-cover opacity-90 group-hover:scale-105 transition-transform duration-700" alt="content">
                            <div class="absolute top-3 right-3 bg-white/90 backdrop-blur px-2 py-1 rounded text-[10px] font-bold uppercase tracking-wide">New</div>
                        </div>
                        <div class="flex justify-between items-start">
                            <h3 class="text-xl font-medium leading-snug w-3/4">Minimalism in the age of chaos</h3>
                            <iconify-icon icon="lucide:arrow-up-right" class="text-xl text-gray-400"></iconify-icon>
                        </div>
                        <p class="text-gray-500 text-sm mt-2 leading-relaxed line-clamp-2">How reducing visual noise can amplify digital experiences and improve user focus.</p>
                    </article>
                    <article class="group">
                        <div class="w-full aspect-[16/10] bg-gray-100 mb-4 rounded-lg overflow-hidden relative">
                            <img src="https://images.unsplash.com/photo-1506784983877-45594efa4cbe?q=80&w=600&auto=format&fit=crop" class="w-full h-full object-cover opacity-90 group-hover:scale-105 transition-transform duration-700" alt="content">
                        </div>
                        <div class="flex justify-between items-start">
                            <h3 class="text-xl font-medium leading-snug w-3/4">Natural forms</h3>
                            <iconify-icon icon="lucide:arrow-up-right" class="text-xl text-gray-400"></iconify-icon>
                        </div>
                        <p class="text-gray-500 text-sm mt-2 leading-relaxed line-clamp-2">Exploring organic shapes in rigid grid systems.</p>
                    </article>
                </div>
            </div>
            <!-- PAGE 2: EXPLORE -->
            <div class="w-1/3 h-full pt-14 pb-[34px] px-6 flex flex-col bg-gray-50 overflow-hidden">
                <header class="shrink-0 mb-8">
                    <div class="flex justify-between items-center">
                        <span class="text-[10px] font-bold tracking-[0.2em] text-gray-400 uppercase">02 / 03</span>
                    </div>
                    <h1 class="text-4xl font-light mt-4 leading-tight tracking-tight">Explore<br>Topics</h1>
                </header>
                <div class="flex-1 overflow-y-auto no-scrollbar pb-10 scroll-container">
                    <!-- Masonry-ish Grid -->
                    <div class="flex gap-4 mb-4">
                        <div class="w-1/2 aspect-[3/4] bg-white p-4 flex flex-col justify-between rounded-lg shadow-sm active:scale-95 transition-transform">
                            <iconify-icon icon="lucide:camera" class="text-2xl text-gray-300"></iconify-icon>
                            <span class="text-sm font-medium">Photography</span>
                        </div>
                        <div class="w-1/2 flex flex-col gap-4">
                             <div class="flex-1 bg-gray-900 p-4 flex flex-col justify-between rounded-lg shadow-sm text-white active:scale-95 transition-transform">
                                <iconify-icon icon="lucide:music" class="text-2xl text-gray-600"></iconify-icon>
                                <span class="text-sm font-medium">Music</span>
                            </div>
                             <div class="flex-1 bg-white p-4 flex flex-col justify-between rounded-lg shadow-sm active:scale-95 transition-transform">
                                <iconify-icon icon="lucide:pen-tool" class="text-2xl text-gray-300"></iconify-icon>
                                <span class="text-sm font-medium">Design</span>
                            </div>
                        </div>
                    </div>
                    <div class="w-full aspect-video bg-white mb-4 rounded-lg p-6 flex flex-col justify-center gap-2 shadow-sm active:scale-95 transition-transform">
                        <span class="text-xs font-bold text-blue-600 uppercase tracking-widest">Featured Collection</span>
                        <h3 class="text-2xl font-light">Interface Dynamics</h3>
                        <p class="text-sm text-gray-400">12 curated items</p>
                    </div>
                    <div class="flex gap-4">
                        <div class="w-1/2 aspect-square bg-gray-200 p-4 flex flex-col justify-between rounded-lg active:scale-95 transition-transform">
                            <iconify-icon icon="lucide:code-2" class="text-2xl text-gray-500"></iconify-icon>
                            <span class="text-sm font-medium">Dev</span>
                        </div>
                        <div class="w-1/2 aspect-square bg-white p-4 flex flex-col justify-between rounded-lg shadow-sm active:scale-95 transition-transform">
                            <iconify-icon icon="lucide:globe" class="text-2xl text-gray-300"></iconify-icon>
                            <span class="text-sm font-medium">Web</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- PAGE 3: PROFILE -->
            <div class="w-1/3 h-full pt-14 pb-[34px] px-6 flex flex-col bg-white overflow-hidden">
                <header class="shrink-0 mb-8 flex justify-between items-start">
                    <div>
                        <span class="text-[10px] font-bold tracking-[0.2em] text-gray-400 uppercase">03 / 03</span>
                        <h1 class="text-4xl font-light mt-4 leading-tight tracking-tight">User<br>Profile</h1>
                    </div>
                    <div class="w-14 h-14 rounded-full bg-gray-100 overflow-hidden ring-4 ring-gray-50">
                        <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=200&auto=format&fit=crop" class="w-full h-full object-cover grayscale" alt="profile">
                    </div>
                </header>
                <div class="flex gap-12 mb-10 shrink-0">
                    <div>
                        <div class="text-2xl font-light tabular-nums">842</div>
                        <div class="text-[10px] text-gray-400 uppercase tracking-widest mt-1">Following</div>
                    </div>
                    <div>
                        <div class="text-2xl font-light tabular-nums">12.5k</div>
                        <div class="text-[10px] text-gray-400 uppercase tracking-widest mt-1">Followers</div>
                    </div>
                </div>
                <div class="flex-1 border-t border-gray-100 pt-6 overflow-y-auto no-scrollbar scroll-container">
                    <h3 class="text-xs font-bold uppercase tracking-widest mb-6 text-gray-400">Saved Lists</h3>
                    <div class="space-y-3">
                        <div class="group flex items-center justify-between p-4 bg-gray-50 hover:bg-gray-100 transition-colors rounded-lg cursor-pointer">
                            <div class="flex items-center gap-4">
                                <div class="w-10 h-10 bg-white rounded flex items-center justify-center text-gray-400">
                                    <iconify-icon icon="lucide:bookmark"></iconify-icon>
                                </div>
                                <span class="font-medium">Reading List</span>
                            </div>
                            <span class="text-gray-400 text-xs font-mono">12</span>
                        </div>
                        <div class="group flex items-center justify-between p-4 bg-gray-50 hover:bg-gray-100 transition-colors rounded-lg cursor-pointer">
                            <div class="flex items-center gap-4">
                                <div class="w-10 h-10 bg-white rounded flex items-center justify-center text-gray-400">
                                    <iconify-icon icon="lucide:heart"></iconify-icon>
                                </div>
                                <span class="font-medium">Liked Posts</span>
                            </div>
                            <span class="text-gray-400 text-xs font-mono">148</span>
                        </div>
                         <div class="group flex items-center justify-between p-4 bg-gray-50 hover:bg-gray-100 transition-colors rounded-lg cursor-pointer">
                            <div class="flex items-center gap-4">
                                <div class="w-10 h-10 bg-white rounded flex items-center justify-center text-gray-400">
                                    <iconify-icon icon="lucide:archive"></iconify-icon>
                                </div>
                                <span class="font-medium">Archive</span>
                            </div>
                            <span class="text-gray-400 text-xs font-mono">4</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- OVERLAYS & CONTROLS -->
        <!-- Pagination Indicators -->
        <div class="absolute bottom-8 left-0 w-full flex justify-center gap-4 z-30 pointer-events-none">
            <div id="dot-0" class="h-1 rounded-full bg-gray-900 transition-all duration-300 w-8"></div>
            <div id="dot-1" class="h-1 rounded-full bg-gray-200 transition-all duration-300 w-2"></div>
            <div id="dot-2" class="h-1 rounded-full bg-gray-200 transition-all duration-300 w-2"></div>
        </div>
        <!-- Initial Gesture Hints -->
        <div id="hints" class="absolute inset-0 pointer-events-none z-40 transition-opacity duration-700">
            <div class="absolute top-1/2 right-6 -translate-y-1/2 flex flex-col items-end opacity-0 hint-x">
                <iconify-icon icon="lucide:arrow-left" class="text-3xl text-gray-400"></iconify-icon>
            </div>
            <div class="absolute top-14 left-0 w-full flex justify-center opacity-0 hint-y">
                <div class="flex flex-col items-center gap-2">
                    <div class="w-12 h-1 bg-gray-200 rounded-full"></div>
                    <span class="text-[10px] uppercase tracking-widest text-gray-400 font-medium">Pull Down</span>
                </div>
            </div>
        </div>
        <!-- Depth Shadows -->
        <div class="absolute top-0 bottom-0 left-0 w-8 bg-gradient-to-r from-black/5 to-transparent pointer-events-none z-20"></div>
        <div class="absolute top-0 bottom-0 right-0 w-8 bg-gradient-to-l from-black/5 to-transparent pointer-events-none z-20"></div>
    </div>
    <script>
        /*
           GESTURE NAVIGATION CORE
           Handles horizontal swipes for pages and vertical pull for action layer.
        */
        // State
        let state = {
            page: 0,
            isDragging: false,
            startX: 0,
            startY: 0,
            direction: null, // 'horizontal' or 'vertical'
            isActionOpen: false
        };
        // Configuration
        const config = {
            snapThreshold: window.innerWidth * 0.25,
            verticalThreshold: 120,
            dragResistance: 0.3
        };
        // DOM Elements
        const els = {
            app: document.getElementById('app'),
            content: document.getElementById('content-wrapper'),
            actions: document.getElementById('action-layer'),
            actionContent: document.getElementById('action-content'),
            closeBtn: document.getElementById('close-actions'),
            hints: document.getElementById('hints'),
            dots: [0, 1, 2].map(i => document.getElementById(`dot-${i}`))
        };
        // Lifecycle & Hints
        setTimeout(() => {
            if (els.hints) {
                els.hints.querySelectorAll('div').forEach(el => el.classList.remove('opacity-0'));
            }
        }, 500);
        const removeHints = () => {
            const hintsEl = els.hints;
            if(hintsEl) {
                hintsEl.style.opacity = '0';
                setTimeout(() => hintsEl.remove(), 700);
                els.hints = null;
            }
        };
        // UI Updates
        const updatePagination = () => {
            els.dots.forEach((dot, idx) => {
                if (idx === state.page) {
                    dot.className = 'h-1 rounded-full bg-gray-900 transition-all duration-300 w-8';
                } else {
                    dot.className = 'h-1 rounded-full bg-gray-200 transition-all duration-300 w-2';
                }
            });
        };
        const updateActionLayerOpacity = (percent) => {
            // Fade in content as we pull down
            const opacity = Math.min(Math.max(percent, 0), 1);
            els.actionContent.style.opacity = opacity;
        };
        // Input Handlers
        const onPointerDown = (e) => {
            removeHints();
            state.isDragging = true;
            state.startX = e.clientX;
            state.startY = e.clientY;
            state.direction = null;
            // Disable transitions for direct 1:1 movement
            els.content.classList.remove('snap-transition');
            els.actions.classList.remove('snap-transition');
        };
        const onPointerMove = (e) => {
            if (!state.isDragging) return;
            const dx = e.clientX - state.startX;
            const dy = e.clientY - state.startY;
            // Determine Gesture Direction (Lock)
            if (!state.direction) {
                if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 5) state.direction = 'horizontal';
                else if (Math.abs(dy) > Math.abs(dx) && Math.abs(dy) > 5) state.direction = 'vertical';
            }
            if (state.direction ===…

---
"Gesture First Navigation System" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/gesture-first-navigation-system @ 6c6090694520.
powered by Styledex — https://styledex.dev

Tokens

DTCG

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Gesture First Navigation System. \"Gesture First Navigation System\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/gesture-first-navigation-system @ 6c6090694520.",
  "$extensions": {
    "dev.styledex": {
      "id": "superdesign-gesture-first-navigation-system",
      "license": "CC0-1.0",
      "attribution": "\"Gesture First Navigation System\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/gesture-first-navigation-system @ 6c6090694520.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#f3f4f6"
    },
    "foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "card": {
      "$type": "color",
      "$value": "#f3f4f6"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "primary": {
      "$type": "color",
      "$value": "#1d4ed8"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "secondary": {
      "$type": "color",
      "$value": "#e0e0e2"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "accent": {
      "$type": "color",
      "$value": "#1d4ed8"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#e4e5e7"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#6b6a68"
    },
    "border": {
      "$type": "color",
      "$value": "#d1d2d4"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#1d4ed8"
    }
  },
  "font": {
    "sans": {
      "$type": "fontFamily",
      "$value": [
        "ui-sans-serif",
        "system-ui",
        "sans-serif"
      ]
    },
    "serif": {
      "$type": "fontFamily",
      "$value": [
        "ui-serif",
        "Georgia",
        "serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "monospace"
      ]
    }
  },
  "radius": {
    "base": {
      "$type": "dimension",
      "$value": "0.5rem"
    }
  },
  "spacing": {
    "base": {
      "$type": "dimension",
      "$value": "1rem"
    }
  },
  "shadow": {
    "base": {
      "$type": "shadow",
      "$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
    }
  }
}

CSS

/* powered by Styledex — https://styledex.dev */
/* "Gesture First Navigation System" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/gesture-first-navigation-system @ 6c6090694520. */
:root {
  --background: #f3f4f6;
  --foreground: #1c1917;
  --card: #f3f4f6;
  --card-foreground: #1c1917;
  --primary: #1d4ed8;
  --primary-foreground: #fafaf9;
  --secondary: #e0e0e2;
  --secondary-foreground: #1c1917;
  --accent: #1d4ed8;
  --accent-foreground: #fafaf9;
  --muted: #e4e5e7;
  --muted-foreground: #6b6a68;
  --border: #d1d2d4;
  --destructive: #dc2626;
  --ring: #1d4ed8;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}

Tailwind

/* powered by Styledex — https://styledex.dev */
/* "Gesture First Navigation System" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/gesture-first-navigation-system @ 6c6090694520. */
/** Tailwind theme extend for Gesture First Navigation System (superdesign-gesture-first-navigation-system) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#f3f4f6",
        "foreground": "#1c1917",
        "card": "#f3f4f6",
        "primary": "#1d4ed8",
        "primary-foreground": "#fafaf9",
        "secondary": "#e0e0e2",
        "accent": "#1d4ed8",
        "muted": "#e4e5e7",
        "border": "#d1d2d4",
        "destructive": "#dc2626",
        "ring": "#1d4ed8"
      },
      "borderRadius": {
        "lg": "0.5rem"
      },
      "fontFamily": {
        "sans": [
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ],
        "serif": [
          "ui-serif",
          "Georgia",
          "serif"
        ],
        "mono": [
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "monospace"
        ]
      },
      "boxShadow": {
        "styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
      }
    }
  }
};

shadcn

/* powered by Styledex — https://styledex.dev */
/* "Gesture First Navigation System" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/gesture-first-navigation-system @ 6c6090694520. */
@layer base {
:root {
  --background: #f3f4f6;
  --foreground: #1c1917;
  --card: #f3f4f6;
  --card-foreground: #1c1917;
  --primary: #1d4ed8;
  --primary-foreground: #fafaf9;
  --secondary: #e0e0e2;
  --secondary-foreground: #1c1917;
  --accent: #1d4ed8;
  --accent-foreground: #fafaf9;
  --muted: #e4e5e7;
  --muted-foreground: #6b6a68;
  --border: #d1d2d4;
  --destructive: #dc2626;
  --ring: #1d4ed8;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}