Vesper Isometric

The interface organizes an enterprise collaboration platform through an enclosed dual-tone canvas: an obsidian sidebar at #0B1325 anchoring the navigation on the left, enclosing a luminous pure white (#FFFFFF) central stage with a generous 28px outer radius. Color operates with strict semantic discipline, using dark slate (#0F172A) for authoritative typography while channeling visual focus through a cyan-to-indigo gradient (linear-gradient(135deg, #18B5B5 0%, #4E65E9 100%)) on interactive drivers and key title words. Spacing employs a rigorous 8px grid with expansive 32px to 48px interior padding that gives breathing room to both technical data and three-dimensional art. The layout transitions seamlessly from an executive-level hero pitch down to an analytical four-column KPI metrics rack. A reader immediately notices the striking 3D isometric diorama depicting an interactive war-room surrounded by neon-rimmed telemetry screens.

1 张设计参考图

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

完整提示词

Design a light-mode web interface screen: executive telemetry meets isometric precision on a dual-tone command stage.

LAYOUT
The macro structure consists of a persistent 180px dark navigation rail on the left, flanked by an expansive rounded white content canvas occupying the rest of the viewport. Within this canvas, the top bar spans search and global text links; the middle section divides cleanly into a 45% textual hero stack on the left and a 55% isometric illustration on the right. Anchoring the bottom of the canvas is a balanced four-column horizontal telemetry row providing operational KPIs.

PALETTE (use these exact hex values)
- #0B1325 — Sidebar Obsidian: Deep navy base for left navigation rail and outer chassis background
- #FFFFFF — Stage White: Primary surface for content stage, search input, and metric cards
- #13223D — Active Tile Blue: Subtle elevated dark blue highlight behind active sidebar menu items
- #4E65E9 — Electric Indigo: Title gradient accent, primary CTA gradient endpoint, and icon accents
- #18B5B5 — Cyan Spark: Primary CTA gradient start, active status dots, and telemetry chart accents
- #0F172A — Ink Slate: Primary headings, KPI headline values, and high-emphasis body text
- #64748B — Cool Muted: Secondary descriptors, navigation link labels, subheaders, and input placeholders
- #EDF2F7 — Card Outline: Ultra-light divider border framing search input, cards, and bottom telemetry tiles
- #10B981 — Success Emerald: Positive delta indicators and compliance badge icons

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter,DM Sans,Outfit), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 26px heading, 44px display. Tracking -0.02em at display, -0.01em at body, 0.02em at labels. Plus Jakarta Sans delivers a crisp, geometric, neo-grotesque authority that balances executive polish with modern software friendliness. Its open counters and clean geometry ensure excellent legibility across micro-labels (11px) and large KPI metrics (26px) alike. For teams unable to license Jakarta, Inter serves as a drop-in technical substitute, while DM Sans offers a slightly softer alternate.

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

DEPTH
Depth is created primarily through layering large high-contrast surfaces rather than intense drop shadows. The deep navy background sits underneath a pristine white floating stage, while interior metric cards and isometric dioramas cast soft, wide ambient shadows (0 12px 32px rgba(15, 23, 42, 0.05)). Key UI elements in the 3D diorama leverage emissive cyan and indigo blooms to imply self-illuminated display screens.

IMAGERY
The imagery is exclusively an isometric 3D miniature vector scene depicting an ultra-modern collaborative workspace. Stylized low-poly corporate figurines gather around conference tables furnished with glowing monitors, floating HUD analytics boards, and white geometric pedestals. Stock photography or flat corporate Memphis illustrations would completely shatter the sophisticated, high-tech tone.

SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the 'stage within a frame' composition: a rich obsidian command chassis wrapping a curved, luminous white dashboard stage, immediately coupled with a 3D isometric diorama containing floating luminescent data screens. To execute it correctly, ensure the outer frame maintains its deep slate identity (#0B1325) while the interior stage uses a generous 24px to 28px border radius. A common failure is applying dark mode universally, which destroys the high-contrast executive presentation.

MUST
- Nest the bright white application canvas within the deep obsidian navigation shell using a 24px corner radius.
- Limit gradient fills strictly to hero CTAs and primary branding focal points to preserve enterprise clarity.
- Use soft circular pastel badges (36px to 40px) behind icons in both value bullets and KPI metrics.
- Reserve #0F172A for high-hierarchy figures like 26px KPI metrics and the 44px hero title.

AVOID
- Do not invert the sidebar to light mode; the dark-to-light boundary establishes the core hierarchy.
- Do not use sharp 0px corners anywhere; buttons, inputs, and stage frames all mandate rounded geometry.
- Do not introduce photorealistic human imagery; stick strictly to isometric vector dioramas with neon-screen accents.
- Do not apply heavy, dark drop shadows; use soft ambient elevation (#000000 at 4% to 8% opacity).

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