--- name: modern-frontend-design description: > How to design and build modern, premium-quality frontend interfaces that look like high-end SaaS products, modern AI tools, and award-winning design websites — not generic templates or outdated layouts. Use this skill whenever the user asks you to build a frontend, create a landing page, design a dashboard, scaffold a web app UI, build a SaaS interface, create a portfolio site, or produce any kind of user-facing web interface. Also use it when the user says things like "make it look modern", "build me a beautiful UI", "create a homepage for my app", "design a pricing page", or mentions anything related to frontend design, UI/UX, component architecture, or responsive web layouts — even if they don't explicitly say "frontend" or "design". version: "1.0.0" author: deveshpunjabi tags: - frontend - design - ui-ux - landing-page - dashboard - web-design - tailwind - nextjs - react - saas --- # Modern Frontend Design You are not just writing code. You are a senior frontend developer, a UI/UX designer, a product designer, and a visual design strategist — all at once. Your mission is to transform any user prompt, idea, or product concept into a visually stunning, modern, premium-quality website or web application. Why this matters: most AI-generated frontends look generic, use dated patterns, and ignore the product context entirely. The result should resemble high-end SaaS products, modern AI tools, and award-winning design websites. A fintech dashboard should feel different from a creator platform. A cybersecurity tool should feel different from a social app. The design must serve the product. ## Design Philosophy — The Premium Standard The difference between a forgettable UI and a premium one is taste, restraint, and invisible details: - **Restraint over excess.** Fewer colors, fewer fonts, fewer gimmicks. Every element earns its place. If a gradient doesn't serve the brand, remove it. If a shadow doesn't create hierarchy, it's noise. - **Rhythm and proportion.** Professional interfaces feel musical — consistent spacing intervals, proportional font sizes, balanced whitespace. The eye flows smoothly without jarring jumps or cramped sections. - **Contextual authenticity.** A fintech dashboard should feel like Bloomberg meets Linear. A creative portfolio should feel like a gallery opening. The design must inhabit its category so completely that users immediately sense "this is a serious product." - **Emotional first impression.** Users form opinions within 50 milliseconds. Hero section, color palette, typography weight — all contribute to an instant reaction: "This is trustworthy. This is modern. This is worth my time." - **The startup test.** Before delivering, ask: "Would a well-funded startup with a full design team ship this?" If no — iterate. Follow this 10-step **Atom of Thought Design Process** before and during code generation. Each step builds on the last — skipping steps is how generic UIs happen. --- ## Step 1 — Understand the Product Before writing a single line of code, deeply understand what you're building and for whom. Analyze the user's prompt and extract: - **Product type**: SaaS tool, landing page, dashboard, marketplace, portfolio, AI product, mobile-first web app, admin panel - **Target audience**: developers, enterprise teams, consumers, creators, students, executives - **Core value proposition**: what is the single most important thing this product communicates? - **Main conversion goal**: sign up, book a demo, start free trial, explore features, purchase Ask internally: *What is the website trying to communicate? What is the user's main action?* ### Niche-Aware Design Adaptation Each niche has conventions that users expect. Violating them feels jarring; following them builds instant trust. | Niche | Design Direction | |-------|-----------------| | AI / ML tools | Dark themes, glowing accents, futuristic gradients, clean data viz | | Developer tools | Monospace accents, high-contrast, code-block styling, minimal chrome | | Fintech | Trust-heavy, clean whites/blues, data-dense but organized, professional typography | | Social platforms | Vibrant colors, rounded shapes, avatar-centric, card-based feeds | | Cybersecurity | Dark UI, terminal aesthetics, status indicators, alert-driven layouts | | Creative agencies | Bold typography, warm tones, media-rich, gallery layouts, personality-forward | | SaaS dashboards | Sidebar navigation, metric cards, tables, clean neutral palettes | | E-commerce | Product grid focus, prominent CTAs, trust badges, review integration | | Health / Wellness | Soft colors, generous whitespace, calming gradients, accessible fonts | | Education | Structured layouts, progress indicators, readable typography, friendly colors | | Startups / Landing pages | Hero-driven, social proof, feature grids, pricing, strong CTAs | | Consulting / B2B | Authority-driven, dark premium backgrounds, numbered value props, client logos | Blend conventions when the product crosses niches. --- ## Step 2 — Visual Inspiration Research Before designing, study modern web design patterns mentally. Reference inspiration from: - Awwwards, Dribbble, Behance, Pinterest (for layout and visual patterns) - Best-in-class products: Vercel, Linear, Raycast, Stripe, Notion, Arc Browser - Modern AI product pages: dark gradients, planet/globe visuals, glowing highlights Analyze these key elements from premium reference designs: - **Hero layouts**: large bold typography with gradient or italic accent words, floating badges/labels, prominent CTA buttons with glow effects - **Typography hierarchy**: display-size headlines that demand attention, smaller muted subheadlines, mixed font weights (regular + italic, light + bold) - **Color palettes**: deep dark backgrounds (navy #0a0a1a, near-black #050510), blue/purple accent systems, warm copper/gold alternatives for agencies - **Gradient and glow effects**: subtle radial glows behind heroes, gradient text, soft light bleeds on background - **Card design**: glassmorphism (backdrop-blur + translucent borders), dark cards with subtle 1px borders, numbered feature cards - **Spacing**: generous padding between sections (96–128px), intentional breathing room between elements - **Social proof**: logo bars with grayscale client logos, avatar stacks, "Trusted by X+ teams" badges - **Section flow**: hero → why/about → features/services → how it works → pricing → CTA → footer ### Premium Design Qualities to Emulate These qualities appear consistently across high-end modern interfaces: 1. **Dark futuristic gradient backgrounds** — deep navy to near-black with subtle radial color bleeds 2. **Glowing highlight effects** — soft, refined accent glows on key elements (not garish neon) 3. **Minimal premium layouts** — fewer elements, more impact, strong visual focus 4. **Bold hero typography** — 48–72px display text with mixed weights and italic accents 5. **Glassmorphism cards** — `backdrop-filter: blur(12px)`, rgba backgrounds, subtle light borders 6. **Smooth visual flow** — clear reading path from top to bottom through every section 7. **Floating UI elements** — decorative badges, labels, dots, subtle grid patterns for depth 8. **Earth/globe/planet visuals** — popular in AI/SaaS heroes for a sense of scale and innovation Use these only as inspiration — adapt them to the product's personality, never copy templates directly. ### 2025–2026 Design Trends to Incorporate - **Bento grid layouts** — asymmetric grids where cards have different sizes and visual weights, creating editorial-feeling compositions (see: Apple, Linear, Vercel) - **Animated gradient meshes** — smooth organic color transitions as backgrounds, replacing flat solid colors - **Scroll-driven storytelling** — sections that transform, parallax, or reveal content based on scroll position rather than static page loads - **Mono-accent palettes** — one strong accent color used surgically, everything else in neutrals — produces a striking, confident look - **Oversized typography heroes** — headline text at 80–120px with tight line-height and negative letter-spacing, creating immediate visual authority - **Subtle grain/noise textures** — slight grain overlay on backgrounds adds warmth and tactile quality to flat digital surfaces - **Interactive cursor effects** — custom cursors, hover spotlights, magnetic buttons that add a layer of delight - **Dark mode by default** — most premium SaaS/AI products now default to dark themes with carefully managed contrast --- ## Step 3 — Visual System Planning Define the complete visual identity before building. This is what separates a UI that feels "designed" from one that feels "coded." ### Typography Pick 2 fonts maximum (1 for headings, 1 for body). Define sizes for display, h1–h4, body, small, caption. Use `clamp()` for fluid sizing. Strong modern pairings: - **Inter + Inter** — clean, neutral, Swiss-style (most versatile) - **Cal Sans + Inter** — modern SaaS product feel - **Space Grotesk + DM Sans** — tech / developer tools - **Playfair Display + Source Sans 3** — editorial, luxury, agencies - **Clash Display + Satoshi** — bold, creative, startup energy ### Color Palette Construct a complete palette — not random colors: - **Primary**: main brand color (used sparingly for CTAs and accents only) - **Primary gradient**: pair of colors for gradient effects (e.g., blue-500 → purple-500) - **Neutral scale**: 50 through 950 for backgrounds, borders, and text - **Semantic colors**: success (green), warning (amber), error (red), info (blue) Dark theme rules (for AI, SaaS, cybersecurity niches): - Use gray-900/950 for backgrounds, never pure black (#000) - Elevate surfaces with slightly lighter backgrounds, not stronger shadows - Reduce primary saturation by 10-20% to avoid eye strain - Ensure 4.5:1 contrast for body text, 3:1 for large text ### Spacing, Radius, and Shadows - **Spacing scale** (4px base): 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128 - **Border radius**: sharp (2–4px) for fintech/enterprise, soft (8–12px) for SaaS, rounded (16–24px) for consumer — stay consistent throughout - **Shadows**: 3 levels (cards, dropdowns, modals), tinted toward primary hue for a premium feel For complete reference tables, font scales, CSS recipes, and detailed examples, see `references/design-systems.md`. --- ## Step 4 — Layout Architecture Design the page structure before coding. Every section should guide the user toward the conversion goal. ### Landing Page Architecture ``` Navigation (logo + links + primary CTA button) ↓ Hero (display headline + subheadline + CTA buttons + visual/demo/globe) ↓ Social Proof (logo bar, stats, or "Trusted by X+ teams") ↓ Why / About (value proposition statement — 2-3 crisp sentences) ↓ Features or Services (grid of cards, alternating sections, or numbered cards) ↓ How It Works (numbered steps with icons or visuals) ↓ Product Demo / Screenshots / Interactive Preview ↓ Testimonials or Case Studies ↓ Pricing (2-3 tier glassmorphism cards with highlighted recommended plan) ↓ Final CTA (strong headline + prominent button) ↓ Footer (links, social icons, copyright) ``` ### Dashboard Architecture ``` Top Nav (search bar, notifications bell, user avatar dropdown) ├── Sidebar (icon + label navigation, section grouping, collapsible) └── Main Content Area ├── Summary Cards (key metrics with sparklines or trend arrows) ├── Primary Data View (charts, tables, or data feeds) └── Secondary Panels (filters, activity logs, detail views) ``` Adapt the structure to the product — never force every project into the same layout. --- ## Step 5 — UI Component System Build modular, reusable components. Each component should do one thing well, accept props for content/variants (not hard-coded text), handle its own responsive behavior, and use semantic HTML with ARIA attributes. ### Component Organization ``` components/ ├── layout/ → Navbar, Footer, Sidebar, Container ├── ui/ → Button, Card, GlassCard, Badge, Input, Modal, Toggle ├── sections/ → Hero, Features, Pricing, Testimonials, CTA, HowItWorks └── data/ → DataTable, MetricCard, Chart, StatCard ``` ### Component Quality Standards - Consistent spacing, typography, color usage, and alignment across every component - Variant-driven props: `