Prompt Optimizer - Light Neumorphism
A light-mode neumorphic (Soft UI) design system for productivity tools and AI interfaces. Featuring a tactile, 'skeuomorphic-lite' aesthetic with extruded and inset shadows, it utilizes a neutral gray base (#ebecf0) with vibrant emerald and amber accents. Ideal for SaaS dashboards, prompt engineering tools, and data-entry platforms where focus and visual softness are required. Includes bento-style grids and high-radius rounded corners.
Summary
A clean, modern neumorphic interface designed for clarity and depth. It uses soft shadows and light-source positioning to create a physical, tactile surface feel. The layout is structured as a two-column grid with generous white space and high-contrast typography for readability.
Style
The style is defined by 'Neumorphism' using #ebecf0 as the background. Typography pairs 'Plus Jakarta Sans' for bold, structural headings and 'DM Sans' for legible body text. Visual depth is achieved through specific shadow offsets (6px) and blurs (12px) using #babecc (dark shadow) and #ffffff (light highlight).
Layout & Structure
A responsive two-column layout. The main column (8/12 width) houses the primary interaction areas, while the sidebar (4/12 width) contains supporting information and statistics.
Header
Primary Interaction Area
Information Grid
Sidebar Widgets
Components
Accent Glow Primary Button
A neumorphic button with an emerald glow effect and active state.
Progress Score Tracker
A statistical component combining neumorphic depth with flat color indicators.
Special Notes
MUST DO: Maintain strict background-color consistency (#ebecf0) across the entire page for the neumorphic shadows to work. MUST NOT: Use borders or flat solid shadows. MUST NOT: Mix high-contrast dark modes; this is strictly a light-source-dependent design. Use subtle color shifts like #f8fafc for inset backgrounds to differentiate them from the main surface.