Scholastic Vivid

The interface is set on an airy pure white and pale ice-blue canvas (#FFFFFF and #F8FAFC) that provides extreme breathing room for high-contrast slate navy headings (#182238). Rich chromatic royal blue (#2563EB) acts as both the brand anchor and an expansive organic background contour framing a dimensional 3D illustration. Secondary accents emerge systematically across metric markers and card headers in mint emerald (#10B981), warm amber (#F59E0B), and soft lavender (#8B5CF6). Spacing adheres strictly to an 8px grid system, featuring expansive 24px card paddings and generous 80px section spacing. Prominent squircle cards boast a softened 20px corner radius with delicate 1px borders (#EEF2F6), creating clean tactile partitions without visual weight. Readers immediately register the energetic juxtaposition between the monumental 56px display title 'Back to School !' and the dynamic asymmetrical blue backdrop.

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: bright collegiate ambition anchored by playful claymorphic depth and disciplined architectural typography.

LAYOUT
The top tier presents a balanced three-part header with logo, centered nav, and right-aligned CTA. Below, the hero section splits 50/50: a disciplined left stack (pill tag, 56px headline, body copy, dual buttons, trust checklist) and an unconstrained right canvas featuring the organic blue splash and 3D figure. Beneath the hero sits a full-width 4-column metric bar, leading immediately into a bottom split featuring a 1-column section heading alongside a 3-column service card layout.

PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: primary page background and high-elevation surface layer
- #FAFCFF — Card Surface Soft: background fill for lower section cards and metric bar
- #2563EB — Primary Royal Blue: primary interactive CTA fill, brand logos, and large organic hero splash
- #EBF2FE — Primary Tint Pale: badge surface fill and primary icon circular backing
- #182238 — Deep Slate Navy: display headlines, card titles, and bold stat figures
- #64748B — Muted Slate Gray: body copy, subtitle narrative, and secondary micro-labels
- #EEF2F6 — Subtle Border Stroke: delicate 1px boundary lines for stat bars and feature cards
- #10B981 — Mint Emerald: project metrics and delivery indicators
- #F59E0B — Honey Amber: client satisfaction icon and warm accent detail
- #8B5CF6 — Royal Purple: support rating and expert service icon indicator

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700/800. Sizes 12px caption, 14px body-sm, 15px body, 16px body-lg, 20px subheading, 24px heading, 32px heading-lg, 56px display. Tracking -0.03em at display, -0.01em at body. Plus Jakarta Sans delivers an immaculate, crisp geometric cadence that balances institutional authority with collegiate friendliness. Large display weights (-0.03em tracking, heavy ink traps) communicate modern execution and optimism. For open-source implementation, Inter or DM Sans serve as drop-in alternates while preserving metric proportions.

GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 12px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.

DEPTH
Depth is rendered natively through dimensional claymorphic 3D rendering rather than stacked box-shadows. Flat UI surfaces rely almost entirely on micro-borders (#EEF2F6) and high-contrast color bounding. When subtle elevation is applied to floating metric bars, it uses an extremely diffused, light ambient shadow (0 12px 32px -8px rgba(37, 99, 235, 0.05)).

IMAGERY
The imagery features clean, whimsical 3D clay-render characters paired with scholastic artifacts (backpacks, spiral notebooks, pencils, paper airplanes) rendered with soft tactile specular highlights. Assets sit atop an asymmetrical, organic royal blue splash shape (#2563EB) that bleeds into the right canvas margin. Photorealistic human photography or flat editorial line art would completely contradict the aesthetic.

SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric organic royal-blue canvas splash (#2563EB) anchoring a 3D claymorphic student running forward into the layout. It serves as both background architecture and narrative motion, breaking rigid UI grids. Misuse occurs when replacing the flowing vector shape with a standard rectangular photo container or reducing its scale so it detaches from the right edge.

MUST
- Use generous whitespace around the headline; display typography requires breathing room against the right hero art.
- Round cards and interactive panels consistently to 20px with faint 1px border strokes (#EEF2F6).
- Keep icon backdrops circular and color-coded to their metric category in pale 10% opacity tints.
- Maintain strict optical alignment between the left text column and the lower floating metric bar.

AVOID
- Never use sharp 0px or 4px corners on UI cards; it violates the approachable academic tone.
- Avoid heavy dark drop shadows; depth is created via soft tints, fine outlines, and 3D artwork.
- Do not saturate card surfaces; keep card backdrops white or near-white (#FAFCFF).
- Never crowd the display headline; allow at least 24px gap between text and button groups.

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.