Nordic Monolith

This interface pairs an immersive twilight-charcoal hero (#0e1115) with an airy gallery-white lower canvas (#f8f9fa) to communicate architectural precision. Colour operates with strict utilitarian discipline: structural surfaces hold neutral greys, while a singular warm ochre (#c29b63) highlights active pagination, badges, and primary calls-to-action. Typography leans on a geometric neo-grotesque with tight leading and confident weight contrast, structuring information like technical blueprints. Cards feature crisp 8px rounded corners, hairline dividers (#e5e8ed), and structured 24px internal padding. A reader immediately notices the dramatic atmospheric lighting of the 3D architectural renders anchored by monolithic typographic headlines and stark numbering.

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: scandinavian architectural rigor balancing deep twilight charcoal surfaces against clean gallery-lit white editorial planes.

LAYOUT
The interface is structured by a permanent dark vertical navigation column on the far left that anchors viewport height. The main canvas flows from a dramatic, dark-themed hero visual into a bright gallery-style two-column editorial spread, followed by a continuous 4-unit horizontal stat bar and a 4-column responsive project catalog grid.

PALETTE (use these exact hex values)
- #0e1115 — Twilight Slate: Primary background for the persistent sidebar navigation and immersive hero section
- #f8f9fa — Gallery White: Main canvas background for content sections below the hero fold
- #ffffff — Pure White: Background for statistic cards, project cards, and high-contrast text on dark surfaces
- #c29b63 — Nordic Ochre: Primary interactive button fill, project index tags, and category section labels
- #12151a — Charcoal Black: Primary headline and title text color across light section surfaces
- #6b7280 — Architect Grey: Supporting body copy, secondary metadata, and phone contact information
- #e5e8ed — Hairline Border: Structural outlines for the metrics strip and project card containers

TYPOGRAPHY
Typeface Manrope (or Golos Text, Montserrat, Inter), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 22px heading, 32px heading-lg, 48px display. Tracking -0.02em for headings, 0.04em for uppercase metadata. The typographic tone is authoritative, Scandinavian, and engineered. Using a clean geometric sans-serif like Manrope or Golos Text, it balances cold functional architectural notation (metrics, specs, square meters) with dense, confident headlines. Headlines remain tight, heavy, and unembellished.

GEOMETRY & SPACING
Corner radii — cards 8px, links 2px, inputs 6px, buttons 6px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1360px container, comfortable density.

DEPTH
Depth is created entirely through planar layering and lighting contrast rather than blur shadows. Cards sit flat against the canvas with hairline 1px strokes (#e5e8ed), while dark hero sections use internal gradient scrims over photography to lift crisp white typography cleanly into the foreground.

IMAGERY
Photography focuses exclusively on premium Scandinavian timber and glass architecture captured during twilight or overcast conditions. Warm tungsten interior illumination spills onto cool outdoor granite, pine needles, and minimalist concrete patios. Bright, over-saturated daylight lifestyle shots with people smiling directly at the camera are strictly off-brand.

SIGNATURE DETAIL — the thing that makes this design itself
The dual-zone split canvas: a dark twilight architectural hero anchored by a fixed left navigation rail that seamlessly drops into an airy, gallery-white catalog floor. This structure instantly communicates the shift from emotional architectural aspiration to pragmatic construction specs. A common error is softening this contrast with muddy grey mid-tones instead of embracing the absolute dark-to-light boundary.

MUST
- Ground all interactive highlights and section numbering in the signature warm ochre (#c29b63).
- Keep card corners tightly controlled between 6px and 8px to preserve geometric architectural discipline.
- Use uppercase tracking (0.04em to 0.08em) on category tags, project titles, and navigation labels.
- Maintain high-contrast pairing between twilight-dark hero photography and the stark white lower section cards.

AVOID
- Do not introduce soft saturated primary colors like cobalt blue, crimson, or emerald green.
- Avoid pill-shaped round buttons for text CTA actions; maintain architectural 6px rectangular geometry.
- Do not use heavy drop shadows; rely entirely on hairline borders (#e5e8ed) and surface changes for separation.
- Never mix serif typefaces into technical spec lists or property details.

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