Executive Cadence

The interface operates on an ultra-pale cool grey canvas (#F8FAFC) populated by pure white (#FFFFFF) modular cards defined by faint 1px hairline borders (#E2E8F0) and minimal elevation. Color is strictly utilitarian: electric ultramarine (#1D61F2) guides focus to primary CTAs, active route states, line telemetry, and donut chart segments, while muted semantic pastels handle status hygiene (emerald #10B981, amber #F59E0B, crimson #EF4444). Typography is executed in a rationalist neo-grotesque sans-serif with heavy 700-weight numeric values (up to 32px) juxtaposed against low-contrast 12px metadata in slate grey (#64748B). Spacing adheres to an 8px grid with generous 20px card padding and consistent 16px gutters between data modules. The eye is pulled first to the high-contrast greeting banner and the primary 32px metric cards before sweeping down through the smooth telemetry curve.

1 张设计参考图

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

完整提示词

Design a light-mode web interface screen: crisp executive command center balancing porcelain white surfaces with precise hairline structure and saturated royal blue telemetry.

LAYOUT
The viewport is organized into a fixed 240px vertical sidebar on the left and an expansive multi-column dashboard workspace on the right. The main canvas begins with a top utility header, followed by a personalized welcome row and a horizontal 4-card metric strip. Below, the body splits into a flexible 2:1 and 3-column asymmetric card grid hosting charts, activity logs, task lists, and tabular ledgers.

PALETTE (use these exact hex values)
- #F8FAFC — Canvas Ground: page body background framing the elevated dashboard panels and main workspace
- #FFFFFF — Panel Surface: card container fills, navigation rail background, and active content canvas
- #E2E8F0 — Structure Border: subtle 1px outlines on cards, table dividers, inputs, and perimeter boundaries
- #1D61F2 — Electric Royal: primary interactive buttons, active navigation pills, trend lines, and focus indicators
- #EFF6FF — Active Tint: background tint for active sidebar menu items and soft blue highlights
- #0F172A — Graphite Primary: primary headings, bold numeric metrics, and dominant interactive iconography
- #64748B — Slate Secondary: table column titles, metric labels, inactive navigation links, and timestamps
- #10B981 — Positive Emerald: positive delta percentages, paid invoice badges, and telemetry bars
- #F59E0B — Warning Amber: pending status pills, medium-priority tags, and warning metrics
- #EF4444 — Critical Coral: overdue notices, high-urgency task badges, and negative delta tags

TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 20px heading, 24px heading-lg, 32px display. Tracking -0.02em for headings, 0 for body and tables. The typographic tone is authoritative, analytical, and uncluttered, driven by a neutral neo-grotesque sans-serif. Bold display metrics provide high-contrast scanning while tabular zero-tracking figures ensure numerical consistency. Inter or Plus Jakarta Sans are the ideal web font counterparts due to their crisp tall x-heights and deep numeral alternates.

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

DEPTH
Depth is nearly flat, defined primarily through surface boundary contracts rather than projection. Cards sit on the #F8FAFC canvas using crisp 1px borders (#E2E8F0) paired with an imperceptible shadow: 0 1px 3px rgba(0, 0, 0, 0.04). Modals or floating flyouts utilize a slightly elevated 0 10px 15px -3px rgba(0, 0, 0, 0.08) drop.

IMAGERY
The visual system avoids pictorial photography, relying exclusively on geometric vector iconography, data graphs, and a 32px circular user profile avatar. All inline icons are thin-line strokes (1.5px to 2px weight) conforming to a strict 20x20px grid box. Realistic illustrations, gradients, or stock photography would severely disrupt the enterprise aesthetic.

SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the combination of porcelain-white rounded cards with razor-thin #E2E8F0 borders, populated by punchy bold numeric metrics and electric #1D61F2 telemetry paths. To apply it properly, let the data breathe inside 20px padding and never crowd cards without hairline delineation. Misusing it involves adding thick borders, colored card backgrounds, or aggressive drop shadows.

MUST
- Enclose all dashboard widgets in white cards with 1px solid #E2E8F0 borders and 12px radius.
- Reserve vibrant electric blue (#1D61F2) strictly for interactive primaries, active indicators, and chart telemetry.
- Use 700-weight tabular figures for all metric readouts to guarantee visual authority.
- Ensure status pills use subtle pastel backgrounds matched to their corresponding foreground color token.

AVOID
- Never apply heavy black dropshadows; depth must rely on 1px borders and soft 2px blurred ambient tints.
- Do not use saturated yellow or raw green as full card background fills.
- Avoid mixed card corner radii; keep all dashboard modules strictly at 12px.
- Do not make inactive navigation links dark black; they must stay muted in #64748B.

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