Atelier Contrast

This interface pairs an ultra-dark administrative frame with a dynamic split-canvas narrative that alternates between surgical white surfaces and obsidian exhibition vaults. The persistent sidebar sits in deep carbon (#0e1017) alongside a top app bar, framing a light hero canvas (#ffffff) that celebrates editorial production. Color functions strictly as semantic signal and accent: an electric ultramarine (#3b5bfd) highlights focus verbs and primary actions, while neutral stone and carbon swatches ground the creative artifacts. Typographic hierarchy relies on a high-grade geometric grotesque set with tight letter tracking (-0.02em) on headlines and generous line spacing on body text. Spacing is strictly regimented along an 8px rhythm, employing 12px to 16px corner radii for interactive cards and compact 8px radii on control buttons. Readers immediately notice the dramatic tonal plunge into the pitch-black 'Featured Works' gallery (#111216) before surfacing back into clean off-white process documentation.

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: architectural dual-canvas studio workspace framing high-end agency outputs through stark tonal shifts and razor-sharp typographic discipline.

LAYOUT
The screen uses a fixed 240px carbon sidebar on the left, flanked by an expansive fluid content viewport. The content flows rhythmically: a daylight administrative hero featuring an asymmetrical right-hand media stack, followed by a tight row of modular category cards. The interface then abruptly transitions into a commanding full-bleed dark showcase grid, before returning to a luminous dual-column layout covering service lists, a 4-step process timeline, and a quote row.

PALETTE (use these exact hex values)
- #0e1017 — Sidebar Carbon: Permanent navigation drawer background framing the entire left viewport.
- #ffffff — Canvas Light: Dominant background for hero, service explorations, and process review sections.
- #111216 — Vault Obsidian: Full-width exhibition container anchoring the featured project showcase grid.
- #3b5bfd — Ultramarine Primary: Primary action buttons, active navigation indicators, and editorial emphasis text.
- #111827 — Text Primary Dark: High-contrast headings and body text within light canvas sections.
- #f9fafb — Text Primary Light: High-contrast titles and metrics displayed over obsidian exhibition surfaces.
- #6b7280 — Text Muted Light: Secondary labels, timestamps, and descriptive subtitles across light surfaces.
- #9ca3af — Text Muted Dark: Supporting descriptions and case study category badges on dark surfaces.
- #e5e7eb — Border Subtle: Hairline card outlines, horizontal dividers, and icon boundaries on light canvas.
- #232630 — Border Dark: Dividers and perimeter containment strokes within the dark project showcase.

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Satoshi), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 28px heading, 44px display. Tracking -0.02em on headings, +0.06em on microcaps. The typographic tone is authoritative, Swiss-inspired, and distinctly architectural. Plus Jakarta Sans (or Inter) provides clean, clinical precision with wide apertures and disciplined geometric forms. It operates simultaneously as an enterprise software interface font and a luxury agency editorial headline system, effortlessly bridging utility and prestige.

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

DEPTH
Depth is created purely through hard tonal contrast and fine 1px borders rather than diffuse drop shadows. White and dark cards rely on perimeter strokes (#e5e7eb and #232630) to establish layer boundaries against base planes. Floating elements in the hero collage employ subtle, tight 8px-spread ambient blur to simulate physical paper stacks without feeling skeuomorphic.

IMAGERY
Imagery is high-end, tactile, and studio-lit, focusing on premium physical packaging (cosmetics, matcha tins, apparel tags) alongside clean UI screenshots and studio portraits. Visuals should always feature realistic lighting, clean matte textures, and minimal background clutter. Cartoon illustrations, saturated gradient mockups, or low-resolution lifestyle stock are strictly off-brand.

SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable hallmark is the abrupt 'light canvas to obsidian exhibition' jump paired with split-cell case study tiles (left cell: metadata + text, right cell: photorealistic product artifact). Without this dramatic sectional polarity, the interface would collapse into either a standard generic dashboard or a standard portfolio site.

MUST
- Reserve the vibrant ultramarine (#3b5bfd) exclusively for primary CTA buttons and key emphasis typography.
- Use stark 100% full-width contrast blocks to separate standard documentation from project showcases.
- Set all section category tags in uppercase tracking (+0.08em) at 11px or 12px sizes.
- Pair every case study brief directly with full-bleed product or packaging imagery.

AVOID
- Do not introduce intermediate grey midtones as canvas backgrounds; keep transitions sharp between white and obsidian.
- Do not apply heavy multi-layered drop shadows; keep elevation flat with 1px structural hairline borders.
- Do not use warm or saturated accent colors that compete with the single ultramarine highlight.
- Do not round card corners past 16px; this destroys the architectural, editorial character.

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