Cobalt Cirrus

The interface is anchored by an expansive cool-white workspace (#ffffff) framed against a very pale slate-tinted canvas (#f4f6fa) with delicate 1px borders (#e6edf5). Saturated royal cobalt (#2563eb) acts as the decisive primary brand anchor, reserved strictly for calls-to-action, active indicators, and focal vector elements, while secondary signals use crisp emerald (#10b981) and warm marigold (#f59e0b). Typography employs a modern geometric sans-serif that shifts from a heavyweight 44px display headline down to tight 11px uppercase metadata tags with wide letter-spacing. Spacing follows a disciplined 8px modular cadence with generous interior padding, establishing an airy and uncluttered executive layout. Rounded geometries dominate the interface, utilizing continuous 16px card radii paired with 999px full-pill buttons and category badges. Readers immediately register the harmonious interplay between dense SaaS analytics below and a friendly, editorial-style hero vignette above.

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: airy enterprise cloud console balancing executive clarity with soft, optimistic geometric vector warmth.

LAYOUT
Structured around a persistent left-hand sidebar (approx 240px) and an expansive main viewport. The content flow starts with a compact top utility header, transitions into an asymmetric hero (55% editorial text left, 45% whimsical illustration right), moves into a dense 4-column metric telemetry band, and concludes with a responsive multi-card service catalog.

PALETTE (use these exact hex values)
- #f4f6fa — Canvas Background: Outermost structural frame and backdrop behind the primary dashboard container
- #ffffff — Pure Surface: Main dashboard background, inner cards, dropdown inputs, and elevated content panels
- #2563eb — Cobalt Primary: Primary action buttons, active navigation indicators, key illustration fills, and brand logomark
- #0f172a — Deep Navy Text: High-emphasis display typography, metric numbers, and section titles
- #64748b — Slate Muted: Secondary copy, passive navigation labels, input placeholders, and metric labels
- #e6edf5 — Subtle Border: Delicate card outlines, vertical navigation divider, search bar stroke, and widget outlines
- #eff6ff — Soft Ice Tint: Active navigation item background, pill badge fill, and soft backdrop shapes
- #10b981 — Success Mint: Positive delta percentages and upward-trending sparkline graphs
- #f59e0b — Alert Amber: Illustration folder focal point, Pro plan icon, and cost trend indicators

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Outfit), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 20px heading, 26px heading-lg, 44px display. Tracking -0.02em for headings, 0.05em for micro caps. The geometric sans-serif communicates institutional reliability and progressive developer tooling. Tightly tracked display titles offer authoritative presence, while generous body line-height (1.5) ensures effortless scanning of technical service descriptions. Standardizing on Plus Jakarta Sans or Inter provides immediate web rendering consistency across platforms.

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

DEPTH
Depth is achieved through crisp 1px borders (#e6edf5) layered over soft off-white canvas (#f4f6fa) rather than intense dark dropshadows. Where elevated cards appear, an extremely soft, diffuse blur (0px 4px 16px rgba(15, 23, 42, 0.04)) creates separation without muddying the clean light aesthetic.

IMAGERY
Vector-based editorial illustration characterized by clean strokes, flat pastel fills (sky blue, periwinkle, dandelion yellow), and playful technological metaphors (clouds, folders, paper planes, gears). Photography or hyper-rendered 3D glossy assets are strictly absent and would break the design's humanized tech voice.

SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an editorial-scale, whimsical pastel vector hero immediately adjacent to crisp, technical SaaS telemetry within an ultra-clean, pill-rounded white card environment. If the friendly vector vignette or the generous pill buttons are replaced with sterile enterprise tables, the brand loses its warm, modern developer appeal.

MUST
- Use full pill (999px) border radii for all call-to-action buttons and category chips.
- Pair large bold metrics (#0f172a at 26px) directly with micro sparklines matching trend polarity.
- Enclose distinct UI blocks in white cards bounded by a single 1px stroke (#e6edf5).
- Maintain high contrast between cobalt brand accents (#2563eb) and slate text (#64748b).

AVOID
- Do not introduce sharp 0px or 4px square corners on interactive elements or cards.
- Never use dark canvas themes; the entire identity relies on cool-white airiness and soft tints.
- Do not deploy photographic imagery; stick exclusively to clean, pastel vector illustrations.
- Avoid multi-colored text headlines; maintain solid #0f172a for editorial display weight.

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