Electric Canvas SaaS

The canvas is grounded on an ultra-soft cool mist surface (#F4F6FB) populated by pure white modular containers (#FFFFFF) with delicate 1px perimeter boundaries. High-saturation color is strictly sequestered: functional workspace elements rely on a quiet slate monochrome scale (#0F172A to #94A3B8), while vibrant cobalt-to-cyan gradients (linear-gradient(135deg, #1B56FD 0%, #5B6BFF 50%, #7FE3FF 100%)) are reserved solely for creative encouragement in the hero display and key primary actions. Typography uses a clean geometric grotesque with heavy bolding on numerals (24px) and primary titles (38px) paired with compact 12px secondary labels. Spacing follows an 8px grid with generous 20px card radii and 24px layout gaps that prevent information density from feeling claustrophobic. A user immediately notices the contrast between the saturated hero banner and the stark, orderly dashboard analytics below.

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: disciplined slate administrative utility elevated by a high-chroma cobalt-to-cyan creative hero marquee.

LAYOUT
The workspace employs a rigid two-column application frame: a fixed 230px left navigation rail and a flexible content canvas. The main area cascades from a top header bar down to a full-width hero gradient banner, followed by an asymmetrical two-column lower layout: a 65% left column with template grids and recent files, and a 35% right column hosting analytics metrics and an activity stream.

PALETTE (use these exact hex values)
- #F4F6FB — Canvas Background: Outer structural page backing behind sidebar and floating content panels
- #FFFFFF — Card Surface: Primary background for dashboard widgets, template cards, and interactive containers
- linear-gradient(135deg, #1852FF 0%, #4F63FF 45%, #88E7FF 100%) — Hero Gradient: Dominant visual focal point applied strictly to the onboarding hero marquee
- #1E58FF — Primary Blue: Primary action buttons, active sidebar pill states, and key metric trends
- #E9F0FE — Active Nav Tint: Subtle background fill for the currently selected navigation item
- #0F172A — Slate Text Primary: Card headings, metric display numbers, and primary navigation text labels
- #94A3B8 — Slate Text Muted: Metadata subtitles, icon glyphs, search shortcuts, and secondary card captions
- #10B981 — Success Emerald: Positive trend indicators and published project status pill text
- #8B5CF6 — Metric Violet: Secondary draft trend sparkline and project category tagging

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Outfit), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px subheading, 20px heading, 24px heading-lg, 38px display. Tracking -0.03em on display, 0 on body labels. The typography is technical, confident, and crisp. Utilizing a geometric neo-grotesque like Plus Jakarta Sans or Inter gives the interface a silicon-valley SaaS efficiency, where condensed negative tracking on bold numbers keeps information dense without sacrificing modern clarity. Free substitutions like Inter work seamlessly provided weight 600 and 700 are leveraged for hierarchy.

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

DEPTH
Depth is created through slight tonality shifts rather than heavy drop shadows. The #F4F6FB ground lifts pure white cards (#FFFFFF) using hairline borders (#E2E8F0) paired with an ambient 0 4px 20px rgba(0, 0, 0, 0.03) shadow. The gradient hero card provides optical depth via color saturation and embedded floating vector UI panels.

IMAGERY
Features charming, stylized flat-vector 2D human illustrations interacting with scaled-down application wireframes. Graphics balance friendly approachable character art (flat skin tones, blocked hair, clean geometric limbs) with clean UI mocks. Realistic stock photography is strictly restricted to circular 32px user avatar portraits.

SIGNATURE DETAIL — the thing that makes this design itself
The dual-zone composition: an unapologetically saturated, electric cobalt-to-cyan hero card sitting directly atop ultra-restrained, calm slate dashboard metrics. Misusing it involves either bleeding the gradient across ordinary data cards—ruining focus—or toning the hero down into dull corporate gray.

MUST
- Reserve the vivid multi-stop gradient strictly for the hero card and singular primary brand accents.
- Maintain a crisp 20px border radius across all major dashboard module cards.
- Use 24px bold numbers alongside miniature single-stroke sparklines for metric blocks.
- Set the app canvas to soft tinted gray (#F4F6FB) to allow pure white cards to pop cleanly.

AVOID
- Do not apply the blue gradient background to multiple cards simultaneously; it must remain singular.
- Avoid harsh dark borders; rely on faint #E2E8F0 outlines or subtle 4% opacity drop shadows.
- Do not use sharp 0px or small 4px corners on container modules; stick to 16px-20px.
- Never display raw unformatted numbers in workspace telemetry without label and trend direction.

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