Fluent Slate

The interface is set on an ultra-clean, faintly tinted off-white canvas (#F8FAFC transitioning to pure #FFFFFF) optimized for cognitive ease and high trust. Deep slate (#0F172A) is used for assertive headlines, while an energetic primary blue (#2563EB) accents key interactive CTAs, keyword emphasis, and active pill states. Subtle pastel tinted squares (#EFF6FF, #FEF2F2, #F0FDF4, #FFFBEB) provide a soft thematic backdrop for iconography across features and programs. Card surfaces feature generous corner radii (~16px to 20px) with hairline border strokes (#F1F5F9) and extremely soft ambient drop shadows (blur ~20px with <= 0.05 opacity). Layout geometry leans heavily on centered typographic anchors, pill badges (radius 999px), and structured 3-to-4 column grid sections.

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: clean, approachable modern edtech draped in soothing cerulean blue, soft pastels, and generous rounded cards.

LAYOUT
The page adheres to a classical conversion-funnel hierarchy. A sticky transparent navigation bar introduces the brand, immediately followed by an asymmetrical split hero (typographic hook left, photographic cutout right). A 4-column metric strip grounds the hero, transitioning into a centered 6-item feature grid, an interactive 4-card program catalog with pill filters, and finally a boxed horizontal assessment CTA banner.

PALETTE (use these exact hex values)
- #FAFCFF — Canvas Background: Root page background providing an airy, luminous canvas across all sections
- #FFFFFF — Card Surface White: Container surface for stat blocks, benefit cards, program modules, and floating hero chips
- #0F172A — Slate Foreground: Primary typography for hero display, section headings, and program titles
- #64748B — Muted Slate: Secondary text for subtitles, feature descriptions, list items, and inactive tabs
- #2563EB — Electric Blue: Primary action buttons, active tab pills, keyword emphasis, and key brand marks
- #EFF6FF — Blue Soft Tint: Background for blue icon squares, rating pill background, and subtle decorative dots
- #FFF1F2 — Coral Rose Tint: Background badge tint for satisfaction rate and exam prep icon chips
- #F0FDFA — Teal Tint: Background badge tint for certified teachers and business English cards
- #FFFBEB — Amber Tint: Background badge tint for lessons completed and kids programs
- #E2E8F0 — Border Subtle: Hairline strokes on inactive buttons, card boundaries, and progress bar tracks

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Manrope, DM Sans), weights 400/500/600/700/800. Sizes 12px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 32px heading, 48px display. Tracking -0.03em display, -0.01em body. Plus Jakarta Sans conveys youthful optimism, academic rigor, and tech-forward simplicity. Its open apertures and clean geometric proportions ensure readability across dense course lists and compact badges alike. Inter or Manrope serve as direct drop-in open-source substitutes without altering horizontal rhythm.

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

DEPTH
Depth is delivered via ultra-subtle, wide-diffusion drop shadows (0 10px 25px -5px rgba(15, 23, 42, 0.05)) set on white cards against the off-white canvas. Interactive floating badges around the hero image leverage slightly deeper elevation (0 14px 35px rgba(37, 99, 235, 0.08)) to appear physically layered in 2.5D space.

IMAGERY
Photography centers on a high-resolution, candid cutout of a smiling young adult student engaging directly with a silver laptop, expressing friendliness and approachable competence. Subtle floating UI widgets and avatar clusters overlap the photography edges, reinforcing an interactive digital learning environment. Grainy or corporate stock imagery with sterile office backdrops is strictly off-brand.

SIGNATURE DETAIL — the thing that makes this design itself
The floating proficiency level badge with circular progress gauge, juxtaposed right beside the cutout photography of a student. It immediately contextualizes the platform as measurable, personalized, and achievement-oriented. Misusing it involves detaching it from human context or overloading it with multi-paragraph text.

MUST
- Highlight key headline words in vibrant brand blue (#2563EB) to establish visual cadence.
- Pair every numerical stat with a uniquely tinted squircle icon (blue, rose, teal, amber).
- Use generous vertical breathing room (80-90px) between homepage sections.
- Wrap interactive filters in smooth pill capsules with radius 999px.

AVOID
- Do not use harsh black borders or pure black text; stick strictly to deep slate #0F172A.
- Avoid high-contrast saturated drop shadows; use diffuse multi-stop shadows <= 6% opacity.
- Do not crowd hero imagery with dense text; allow the student portrait to breathe organically.
- Avoid sharp right-angled rectangles; cards must preserve an 18-20px rounded corner.

OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1280:3840. 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.