Atelier Everyday

A clean, tactile e-commerce editorial layout set on an ultra-soft porcelain canvas (#ffffff and #f9f9fa). Spatial hierarchy relies on generous white space and rhythmic card grouping rather than harsh lines or shadows. A single high-voltage saturated royal cobalt blue (#2663eb) serves as the primary visual hook, reserved strictly for calls-to-action and conversion micro-badges, while deep charcoal (#181a1c) handles headline weight. Cards feature generous 16px corner rounding, framing natural light lifestyle imagery and clean studio product cutouts. Editorial typography utilizes a contemporary geometric sans with open counters and single-story vernacular, anchored by 48px display weights and tight, balanced line heights.

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 architectural minimalism meeting modern mercantile clarity through vibrant cobalt focal points and warm domestic textures.

LAYOUT
The page flows in an intentional top-down narrative: global utility header, followed by an expansive split hero block that combines lifestyle storytelling with immediate transactional CTAs. Beneath lies an icon-led assurance strip, transitioning into room-based visual discovery, a horizontal new-arrivals carousel, and finishing with a framed community inspiration module. The grid maintains a rigorous 1280px max-width boundary with comfortable 20px column gutters.

PALETTE (use these exact hex values)
- #ffffff — Canvas White: Primary screen canvas and card container background providing crisp contrast
- #f6f6f4 — Porcelain Tint: Background for product display tiles and subtle utility inputs
- #edf3fc — Sky Veil: Tinted container background for secondary lifestyle spotlight callout
- #2663eb — Cobalt Primary: Core interactive CTA buttons and new-item badges
- #181a1c — Charcoal Body: Dominant text color for display headings, product names, and primary icons
- #63676c — Pebble Slate: Subtitles, descriptive body copy, item counts, and metadata labels
- #e5e5e3 — Hairline Rule: Minimal borders on icon badges, quick-add buttons, and dividers

TYPOGRAPHY
Typeface Satoshi (or Plus Jakarta Sans,Albert Sans,General Sans), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 15px body, 17px body-lg, 20px subheading, 24px heading, 32px heading-lg, 48px display. Tracking -0.025em on headings, 0 on body. The typographic voice is calm, architectural, and confident. A geometric sans-serif with geometric roundness (similar to Satoshi or Plus Jakarta Sans) communicates utility and contemporary taste. Its uniform strokes and open apertures feel sophisticated without the traditional pretension of high-luxury serifs.

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

DEPTH
Depth is created almost entirely without shadows. Contrast is established by layering tonal surfaces—such as #f6f6f4 product trays over #ffffff backgrounds—and using natural photographic cast shadows within imagery. Occasional subtle semi-transparent overlays (such as dark gradients over room cards) are applied only to guarantee text legibility.

IMAGERY
Photography is editorial, tactile, and bathed in warm directional natural sunlight with long soft shadows. Studio product imagery isolates well-designed ceramic, linen, and glass home goods against warm cream and off-white backdrops. Flashy digital renders or sterile cold e-commerce packshots are strictly off-brand.

SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the stark juxtaposition of sun-drenched, earthy domestic still-life photography against pure cobalt blue (#2663eb) action elements. The electric blue cuts through warm neutrals, instantly directing user intent without overwhelming the organic warmth of the goods. Overusing the blue for headings or decorative borders destroys this intentional tension.

MUST
- Reserve the cobalt blue (#2663eb) strictly for interactive primary CTAs and critical badges.
- Use warm natural sunlight, architectural shadows, and tactile textures in all photographic assets.
- Keep card corner radii consistent at 14px to 16px to maintain soft, human geometry.
- Pair dark charcoal (#181a1c) text directly against neutral white without harsh pure black.

AVOID
- Do not introduce secondary saturated accent colors like red, green, or bright yellow.
- Never apply harsh drop shadows; rely on surface tone differentiation and clean outlines.
- Avoid sharp 0px card borders or brutalist raw styling anywhere in the design.
- Do not center-align body copy; maintain a structured, left-aligned architectural reading rhythm.

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