Emerald Scholar

This interface pairs an ultra-dense, dark navy sidebar (#061224) with an expansive, crisp white main canvas (#ffffff) to establish strong architectural separation between control and content. Primary actions and brand accents utilize a vivid emerald teal (#00897b and #00a884), contrasted with warm sunlit yellow focal photography to inject human optimism. Typography relies on a tight geometric sans-serif, using heavy weights (700) at 48px for hero headlines and muted slate (#64748b) at 14px for descriptive supporting body copy. Cards and interactive modules observe generous corner curves ranging from 12px on search inputs to 16px on course containers, softened further by pill-shaped (999px) tags and badges. A viewer's eye is immediately seized by the organic emerald background blob framing the vibrant yellow-clad subject, balanced below by a rhythmic triad of course preview cards.

1 design references

Prompt metadata
Shared by	@Devault
Model	GPT Image 2.5
Category	Web design
Dataset	stretchcloud · awesome-gpt-image-prompt-2.5

The prompt

Design a light-mode web interface screen: deep midnight navigation framing sunlit educational canvases with punchy emerald actions and playful 3d dimension.

LAYOUT
The page follows a dual-zone dashboard structure: a fixed 240px dark navy left rail coupled with a horizontally oriented, scrollable light workspace. The top workspace header contains a centered breadcrumb menu and right-aligned search/profile controls. Below, a two-column hero splits oversized typographic copy and metrics on the left against layered cutout photography on the right, preceding a three-column card grid for trending courses.

PALETTE (use these exact hex values)
- #061224 — Obsidian Navy: Structural background for the persistent vertical left-hand navigation sidebar.
- #ffffff — Canvas Bright: Dominant background for the central dashboard workspace and course content cards.
- #f8fafc — Subtle Wash: Background fill for top search input and inactive filter states.
- #00897b — Vibrant Teal: Primary interactive calls-to-action, primary buttons, and brand logo mark.
- #e6f5f3 — Mint Glaze: Soft background tint for highlighted badge indicators and selected sidebar states.
- #f59e0b — Cadmium Gold: High-visibility accent for notification badges, ratings stars, and upgrade crowns.
- #0f172a — Deep Slate: Primary headings, high-contrast labels, and card titles across the light workspace.
- #64748b — Muted Slate: Secondary descriptors, metadata labels, icon strokes, and inactive tab labels.
- #e2e8f0 — Thin Border: Subtle boundary outlines for cards, input containers, and button borders.

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 24px heading, 48px display. Tracking -0.02em at display, 0em at body. The typographic tone is crisp, authoritative, yet approachable, achieved via modern geometric sans letterforms with circular apertures and clean terminal endings. The extreme weight contrast between the 48px bold display title and the 14px relaxed body copy gives the dashboard a polished modern SaaS identity. Standardize on Plus Jakarta Sans or Inter for seamless open-source deployment.

GEOMETRY & SPACING
Corner radii — cards 16px, links 8px, inputs 999px, buttons 10px. Spacing on a 8px unit, 24px gaps, 48px between sections, 1440px container, comfortable density.

DEPTH
Depth is created sparingly via two distinct layers: an anchor layer of low-opacity diffuse drop shadows (0 10px 25px -5px rgba(0, 0, 0, 0.05)) under floating white cards, and an optical illusion of depth generated by the rich contrast between the ink-navy sidebar and the hyper-clean white canvas.

IMAGERY
Photography features authentic, high-energy students in bright apparel (such as rich mustard yellow) cleanly masked without background clutter, layered over fluid organic geometric color blobs. Course thumbnail artwork relies on stylized 3D renders, neon wireframes, or sleek developer terminal visuals on dark rounded rectangles.

SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable gesture is the vibrant yellow-clad student breaking out of an organic emerald fluid shape, suspended between floating translucent 3D badges and an ink-dark left sidebar. This creates an inviting balance of institutional SaaS utility and energetic consumer warmth.

MUST
- Ground the left navigation entirely in deep obsidian navy (#061224) to maintain strict layout polarity.
- Use energetic teal (#00897b) exclusively for primary action buttons, brand marks, and active nav states.
- Frame the human hero subject with an organic soft teal-to-mint vector shape to soften dashboard rigidity.
- Enclose input boxes and floating tags in generous pill or 16px radius containers.

AVOID
- Never use dark backgrounds for the course cards or main dashboard body area.
- Avoid square or sharp 0px border radii on buttons, search inputs, or content cards.
- Do not saturate hero section backgrounds; reserve full saturation for the student subject and primary CTA.
- Do not use high-contrast pure black text; stick to deep slate (#0f172a) for readability.

OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3312:2480. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks.

Try in DraPub

More prompts from the same visual neighborhood.

Back to prompt gallery

Web designDesign reference

Abyssal Ledger

The canvas is submerged in a rich midnight petrol slate (#0b121b), eschewing pure black in favor of deep oceanic navy undertones. Surfaces sit on elevated dark containers (#111c26) demarcated by razor-thin slate borders (#1c2a38) rather than heavy drop shadows. High-luminance electric cyan (#1de9b6) acts as the primary brand beacon and indicator of positive momentum, harmonized with electric violet (#a855f7) and amber gold (#f59e0b) for categorical multi-series data. Numerical metrics dominate the visual hierarchy through high-contrast bold white numerals (24px to 28px) paired with quiet slate captions (#64748b). Cards feature generous 16px corner radii and 20px internal padding, balancing information density with breathing room. A viewer immediately registers the four top-tier summary cards with seamless, borderless bottom sparklines before moving into the split data-visualization grid.

Web designDesign reference

Acoustic Minimal

This layout pairs a permanent dark charcoal sidebar (#121316) with an airy, pale grey-beige canvas (#F5F5F7) housing rounded structural cards (#FFFFFF). The aesthetic borrows heavily from high-end Danish and Japanese acoustic industrial design, contrasting stark architectural typography against tactile metallic renders in bronze and milled aluminium. Vibrant electric blue (#1E6BFF) serves strictly as a high-contrast functional accent for interactive triggers like primary CTA pills and cart badges, while amber (#E5A93C) indicates availability statuses. Typography is set in a neutral neo-grotesque with sharp tracking shifts between wide uppercase micro-labels and compressed display headlines (e.g., 'NB—32' at ~52px). Generous 24px internal card padding and large 20px card corner radii create soft modular islands. The primary visual tension arises from the interplay between monolithic pitch-black elements and luminous warm whites.

Web designDesign reference

Aegis Clinical

The interface operates on an ultra-clean white (#ffffff) and pale ice-blue surface hierarchy, using high-contrast slate (#0f172a) typography to project institutional authority and medical safety. Brand royal blue (#1668e3) functions strictly as a primary interaction and focal anchor, highlighting critical conversion paths and anchoring the dual-tone display headline. Secondary service departments are differentiated through soft pastel icon discs (spanning 48px to 56px in diameter) in tinted crimson, mint, lavender, and sky blue. Structural cards employ soft 16px corner rounding paired with faint, diffused ambient shadows (0 10px 30px rgba(15,23,42,0.04)). The prominent architectural hero imagery dissolves into the white canvas via a gentle gradient mask, visually uniting the physical facility with the digital portal.

Web designDesign reference

Aegis Cyber Luxe

The interface marries an ultra-dense, dark command rail (#070e1c) with a radiant, airy light canvas (#f8fafd) that houses executive-level threat intelligence. Hierarchy relies on high-contrast text sizing and surgical neon accents: vivid royal blue (#165dfc) for primary actions and safe-state telemetry, juxtaposed against alert crimson (#f04438) for imminent malware breaches. Typography is rendered in an ultra-clean geometric sans with tight headline tracking (-0.02em) and muted slate body copy (#64748b). Surface containers exhibit subtle 1px borders (#e8edf5) with a uniform 16px corner radius, floating gently above pale atmospheric radial gradients. The eye is immediately captured by the hero 3D composition, featuring a hyper-detailed dark monitor flanked by translucent glassmorphic telemetry cards and glowing threat icons.