Crescent Mindful

The interface operates on an expansive, pure white (#ffffff) canvas with extreme spatial generosity and breathing room. Hierarchy is strictly orchestrated through a deep ink-navy (#1a2538) headline font balanced by muted slate (#6b7280) body typography, punctuated by an electric cobalt blue (#2d62ed) for primary actions and an energetic berry crimson (#d93d6e) reserved solely for the primary conversion header trigger. Spacing is exceptionally airy, utilizing 64px to 100px section margins, rounded card radii of 16px to 20px, and subtle drop shadows (0 12px 32px rgba(0,0,0,0.06)). What catches the eye first is the large organic arch mask on the hero image alongside subtle linear divider tags, grounding high-end lifestyle photography within a structured, modern editorial grid.

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: serene wellness editorial with soft arch framing and deliberate cobalt accent triggers.

LAYOUT
The page flows vertically through wide horizontal bands interspersed with two-column asymmetrical splits. It opens with an asymmetric hero pairing a bold typographic stack on the left with a massive arched portrait on the right. A symmetrical 3-column card deck follows, leading into alternating 50/50 editorial splits featuring rounded image panels and offset text groups with horizontal rule accents.

PALETTE (use these exact hex values)
- #ffffff — Canvas White: Global background canvas giving ample negative space across all sections
- #ffffff — Card Surface White: Elevated card surface with soft outer drop shadow
- #1a2538 — Ink Navy: Primary headings, brand logo title, and strong emphasis text
- #6b7280 — Muted Slate: Secondary copy, paragraph descriptions, micro-captions, and navigation links
- #2d62ed — Cobalt Blue: Primary button fill, link arrows, text links, and section decorative bar
- #d93d6e — Berry Crimson: High-priority conversion button in the global navbar
- #e5e7eb — Border Fog: Outlined buttons, subtle card borders, and feature item borders

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Outfit, Inter, DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 34px heading, 52px display. Tracking -0.03em at display, 0.04em at kicker caps. Plus Jakarta Sans delivers a sophisticated balance between geometric clarity and warm, welcoming personality. Its open counters and geometric forms create clean, readable headings that avoid corporate sterility, while the regular weight renders effortlessly at 15px with relaxed 1.6 line height. Substitutes like Outfit or DM Sans preserve this grounded yet uplifting aesthetic.

GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 28px gaps, 96px between sections, 1200px container, airy density.

DEPTH
Depth is handled with extreme restraint to support a weightless, calm atmosphere. Cards utilize an ultra-subtle diffuse elevation (0 10px 30px rgba(0,0,0,0.04)) bordered by a soft 1px hairline (#f3f4f6). Interactive circular triggers like the video play button pop slightly forward with a slightly stronger shadow (0 12px 28px rgba(0,0,0,0.12)).

IMAGERY
Photography is warm, natural, and candid with luminous daylight, earthy neutrals (terracotta, beige, cream), and organic textures (wood, rugs, canyon rock). Cropping uses intentional architectural forms, prominently an arch-top hero frame and gentle rounded card viewports. Artificial studio lighting, high-contrast neon palettes, and staged corporate gym aesthetics are strictly off-brand.

SIGNATURE DETAIL — the thing that makes this design itself
The standout signature is the architectural arch-masked hero visual paired with tiny cobalt-accented rule kickers. This combination immediately telegraphs a physical sanctuary/studio space while preserving razor-sharp digital precision. Misusing it involves placing busy photography or sharp geometric shapes into the arch, which destroys the tranquil sense of arrival.

MUST
- Keep ample negative space around typography; headings need at least 48px vertical clearance.
- Use geometric sans with humanist curves (e.g., Plus Jakarta Sans) for both display and UI copy.
- Confine the berry crimson (#d93d6e) strictly to the primary navigation conversion button.
- Frame hero photography inside soft architectural shapes like rounded arches or pill containers.

AVOID
- Do not introduce sharp 0px corners; maintain gentle 8px to 20px radii everywhere.
- Do not saturate entire backgrounds with color; the canvas must remain pure white (#ffffff).
- Avoid heavy dark borders; boundary separation relies on soft drop shadows and thin #e5e7eb lines.
- Never replace clean line iconography with filled, multicoloured, or heavy flat icons.

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