🌐 System Overview

Joy Layer (Light Mode)

Vibrant, playful design with organic shapes and bold colors. Perfect for creative portfolios and marketing sites.

View Demo →

Pulse Layer (Dark Mode)

Electric, high-contrast interface with neon accents. Ideal for developer tools and modern SaaS products.

View Demo →

🎨 Color System

Light Mode Palette

Aa

Background

#FFFBF7

Aa

Text Primary

#000000

Aa

Highlight Red

#FF453A

●

Accent Blue

#2F80ED

●

Accent Yellow

#F2C94C

●

Accent Orange

#EB5757

Dark Mode Palette

Aa

Background Dark

#0A0A0A

Aa

Text Light

#FFFFFF

Aa

Highlight Pink

#FF94EF

Aa

Neon Yellow

#E7FF2F

●

Electric Cyan

#6CFCEB

✍️ Typography

Headline • Inter 900 • 56-72px • -0.03em tracking

Build creative interfaces

Subtext • Inter 400 • 16-18px • 1.6 line-height

NeonMesh brings bold visual language to your digital products. Click to explore or tap to start.

Button • Inter 500 • 14-16px • Sentence case

Start Building →

🧩 Components

Buttons - Light Mode

Buttons - Dark Mode

Tags & Badges

⚡ Active Live

Visual Elements

📱 Native Mobile Adaptation

🚀 iOS/Android Ready

NeonMesh adapts beautifully to native mobile with platform-specific considerations.

Light Mode

⚡ Fast 🎨 Custom

Dark Mode

Progress 87%

SwiftUI Implementation

// Colors
extension Color {
    static let nmBackground = Color(hex: "FFFBF7")
    static let nmBackgroundDark = Color(hex: "0A0A0A")
    static let nmHighlightRed = Color(hex: "FF453A")
    static let nmHighlightPink = Color(hex: "FF94EF")
    static let nmNeonYellow = Color(hex: "E7FF2F")
    static let nmElectricCyan = Color(hex: "6CFCEB")
}

// Button Component
struct NMButton: View {
    let title: String
    let isDark: Bool
    let action: () -> Void
    
    var body: some View {
        Button(action: action) {
            Text(title)
                .font(.system(size: 16, weight: .semibold))
                .foregroundColor(isDark ? .nmBackgroundDark : .white)
                .frame(maxWidth: .infinity)
                .padding(.vertical, 18)
                .background(isDark ? Color.nmNeonYellow : Color.black)
                .cornerRadius(16)
                .shadow(color: isDark ? Color.nmNeonYellow.opacity(0.3) : .clear,
                       radius: isDark ? 20 : 0)
        }
    }
}

📋 Usage Guidelines

When to use Light Mode (Joy Layer)

Creative portfolios and agency websites
Marketing and landing pages
Educational platforms
Daytime-focused applications

When to use Dark Mode (Pulse Layer)

Developer tools and code editors
Dashboard and analytics products
Entertainment and media apps
Night-time or focus-intensive applications

🔖 Design Tokens

:root {
  /* Light Mode */
  --bg-light: #FFFBF7;
  --text-primary: #000;
  --highlight-red: #FF453A;
  --accent-blue: #2F80ED;
  --accent-yellow: #F2C94C;
  --accent-orange: #EB5757;
  
  /* Dark Mode */
  --bg-dark: #0A0A0A;
  --text-light: #FFF;
  --highlight-pink: #FF94EF;
  --neon-yellow: #E7FF2F;
  --electric-cyan: #6CFCEB;
  
  /* Typography */
  --font-main: 'Inter', sans-serif;
  
  /* Spacing */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 64px;
  --space-xl: 96px;
  
  /* Border Radius */
  --radius-pill: 16px;
  --radius-md: 12px;
}

NeonMesh