Boutique Studio Light

The interface relies on a pristine #ffffff canvas accented by soft architectural photography and a saturated cobalt blue (#2b66f6) that commands interactive focus. Typography is anchored by a high-clarity geometric sans-serif, using bold display titles around 48px alongside tracked 11px uppercase eyebrows in cobalt blue to establish clear vertical rhythms. Content hierarchy alternates between asymmetrical two-column editorial layouts and structured four-column project grids, broken up by floating white cards with soft drop shadows. Visual softness is maintained across media assets through consistent 16px corner rounding on photography and 6px radii on primary buttons. Color acts strictly as an operational signpost rather than decorative filler, allowing the muted taupes, warm creams, and deep navies of the interior photography to establish the ambient mood. Readers immediately register the expansive hero image offset by floating stat overlays, communicating bespoke architectural precision.

1 张设计参考图

提示词信息
分享者	@Devault
模型	GPT Image 2.5
分类	网页设计
数据集	stretchcloud · awesome-gpt-image-prompt-2.5

完整提示词

Design a light-mode web interface screen: crisp modern scandinavian clarity anchored by tailored cobalt accents, floating architectural surfaces, and warm editorial imagery.

LAYOUT
The header maintains a clean single row with a left logo, centered text navigation, and right-aligned search icon with solid CTA. The hero deploys an asymmetrical 5:7 grid: typography and dual CTAs on the left, an expansive framed image with an overlapping floating stat card on the right. Lower sections follow structured 4-column galleries and horizontally linked step sequences.

PALETTE (use these exact hex values)
- #ffffff — Pure Canvas: primary page backdrop providing generous white space and maximum contrast
- #2b66f6 — Cobalt Primary: key call-to-action buttons, active category highlights, eyebrow typography, and brand accent points
- #0f172a — Deep Ink: primary display headlines, section headers, and high-emphasis interface text
- #64748b — Slate Neutral: body paragraph copy, image subtitles, and inactive navigation links
- #e2e8f0 — Muted Border: stroke outlines on secondary buttons, pagination arrows, and card borders
- #eff6ff — Active Tint: subtle background fill for active filter pill tags and process container panels
- #f59e0b — Star Gold: five-star rating indicators on floating social proof cards

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Outfit), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 16px body-lg, 20px subheading, 32px heading, 48px display. Tracking -0.02em on headings, +0.08em on eyebrows. The geometric neo-grotesque sans-serif brings an architectural, modern Scandinavian precision that feels warm rather than clinical. Heavy headline weights anchor airy white space, while small uppercase tracked eyebrows provide editorial discipline. Inter or Plus Jakarta Sans are optimal substitutes due to their robust geometry and legible numbers.

GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 6px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, airy density.

DEPTH
Depth is created through layered spatial overlap rather than heavy blur techniques. Floating white cards rest directly on imagery edges with wide, low-opacity shadows (0 16px 36px rgba(0, 0, 0, 0.06)). Image cards in grids sit flat on canvas level 0 without borders.

IMAGERY
Photography emphasizes serene, modern residential and boutique commercial interiors dominated by warm oak, textured linens, plaster walls, and natural daylight. Images are cropped into vertical and landscape rounded cards (16px radius). Synthetic 3D renders, high-saturation filters, and cluttered compositions are off-brand.

SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the offset floating white metric card partially overlapping the corner of a large 16px rounded architectural photograph. It bridges graphic UI with photography, transforming static hero media into proof-driven editorial storytelling. Misuse occurs when multiple badges are plastered over an image simultaneously, obscuring interior focal points.

MUST
- Use generous 96px vertical section spacing to preserve editorial pacing.
- Round all featured architectural imagery to exactly 16px border radius.
- Restrict bright cobalt blue (#2b66f6) strictly to active states and primary CTAs.
- Apply uppercase styling with +0.08em letter spacing to 11px section eyebrow headers.

AVOID
- Do not use sharp 0px corners on photography; it destroys the tailored softness.
- Do not saturate section backgrounds with heavy accent colors or dark fills.
- Do not use high-contrast drop shadows; keep elevation blurs soft and subtle.
- Do not style secondary action buttons with colored solid fills.

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.

在 DraPub 中尝试

看看同一视觉方向里的其他提示词。

返回提示词画廊

网页设计设计参考

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.

网页设计设计参考

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.

网页设计设计参考

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.

网页设计设计参考

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.