Editorial Cobalt

The design balances an ultra-clean, warm ivory canvas (#FAFAFC to #FFFFFF) with saturated electric cobalt (#2553E8) and chartreuse (#D7F372) interruptions. Editorial photography using architectural arches and circular crops provides tactile warmth, preventing the modern layout from feeling sterile. Typography pairs a crisp geometric neo-grotesque sans-serif with expressive, high-contrast serif italics in hero display lines ('that connects.'). Structural hierarchy relies on bold card containers with generous 24px-28px radii, punctuated by 8px-radii action buttons and circular badges. The eye is immediately captured by the contrast between the organic, muted beige hero arch and the monolithic cobalt blue conversion card anchored at mid-page.

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: sun-drenched editorial warmth structured by high-energy electric blue and disciplined brutalist curves.

LAYOUT
The page opens with an asymmetric hero: an architectural arch image on the left, display typography and dual action buttons centered, and an auxiliary floating preview card on the right. Below this airy intro, the rhythm tightens into a dense, monolithic cobalt banner spanning the container width. The layout resolves into a balanced 3-column offerings grid beneath a dual-aligned header with section title left and 'View all offerings' outline button right.

PALETTE (use these exact hex values)
- #FFFFFF — Pure Canvas: primary page background and crisp top-level card fill
- #F8F9FA — Off White Base: secondary card container surfaces and icon badge backgrounds
- #2553E8 — Cobalt Punch: primary callout container, primary buttons, and active tab indicators
- #D7F372 — Acid Chartreuse: high-contrast CTA button fill inside cobalt hero card and list checkmarks
- #CE6277 — Dusty Rose Eyebrow: category eyebrow labels and small decorative tags over white surfaces
- #14171F — Obsidian Body: primary headings, titles, navigation items, and high-emphasis body
- #667085 — Slate Neutral: supporting body text, metadata captions, and secondary link icons
- #E4E7EC — Border Grey: hairline borders on secondary buttons, cards, and icon badges

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, DM Sans), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 15px body, 18px subheading, 24px heading, 38px heading-lg, 58px display. Tracking -0.03em at display, 0.08em at uppercase. The voice is confident, cultured, and design-literate. By pairing Plus Jakarta Sans' crisp functional geometry with Cormorant Garamond's literary flair, the brand communicates both modern strategic discipline and bespoke aesthetic sensibility. If substitutes are needed, pair Inter with Playfair Display.

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

DEPTH
Depth is created via planar layering rather than multi-layered blurred shadows. High-contrast solid planes (like the cobalt card) sit directly atop the white canvas with zero blur, while small floating circular badges and overlapping photo cutouts rely on spatial overlap and subtle 1px translucent borders to separate planes.

IMAGERY
Photography focuses on tactile minimalism, warm natural light, soft linens, ceramics, and thoughtful editorial portraits with dramatic sunlight and shadow play. Stock business imagery, harsh flash studio shots, or cold corporate tech hardware would entirely disrupt the bespoke studio tone.

SIGNATURE DETAIL — the thing that makes this design itself
The arch-shaped hero photo contrasted immediately against the electric cobalt campaign block containing intersecting dashed circular orbit lines and an acid-chartreuse CTA button. To reproduce it, balance architectural, muted editorial photography with an unapologetic burst of saturated royal blue and chartreuse typography.

MUST
- Use uppercase rose (#CE6277) eyebrows with 0.08em letter spacing to introduce all major section headers.
- Restrict the electric cobalt (#2553E8) to primary structural anchors and interactive controls.
- Combine strict geometric arch masks with circular cutout badges for imagery to evoke boutique architecture.
- Pair geometric sans display headers with one phrase of fluid serif italics for bespoke tension.

AVOID
- Do not place chartreuse buttons onto the white canvas; it destroys contrast and visual hierarchy.
- Do not use sharp 0px rectangular image containers; every visual asset has an intentional curve or arch.
- Never make all display headline words italic; italics are reserved exclusively for the trailing emotional punchline.
- Do not introduce heavy drop shadows; depth is established purely via planar card overlaps and color contrast.

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.