Verdant Counsel

The canvas is anchored by an ultra-clean warm white background (#FFFFFF) paired with a high-trust deep forest green (#0F4439) as the singular authoritative brand tone. Color is deployed with strict restraint: neutral slates handle typography and structure, while green signifies identity, primary interaction, and completed legal states. The typography leans heavily on high-contrast sizing, leading with a bold ~48px headline set with tight line-height (1.1) and wide-tracked uppercase category labels (11px, tracking 0.18em). Spacing relies on generous horizontal breathing room, separating the left-hand promotional copy from an oversized floating product window (radius 16px) that breaches the right viewport boundary. Micro-interactions in the dashboard rely on 1px borders (#E5E7EB), discrete 8px rounded metric tiles, and soft status pills.

1 张设计参考图

提示词信息
分享者	@Devault
模型	GPT Image 2.5
分类	界面组件与网格
数据集	stretchcloud · awesome-gpt-image-prompt-2.5

完整提示词

Design a light-mode website section: deliberate legal precision meets calm enterprise software in muted spruce and balanced paper-white surfaces.

LAYOUT
The section adopts an asymmetric two-column composition with an approximate 35/65 split. The left column holds promotional hierarchy: eyebrow, headline, paragraph, four-row feature accordion-style list, CTA button cluster, and security footnote. The right column accommodates a wide, edge-bleeding operational mockup featuring a navigation sidebar, top metric row, chronological case timeline, right AI copilot pane, and bottom pipeline bar.

PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Primary background for the marketing surface and inner app container panels.
- #F8FAF8 — Dashboard Ground: Subtle cool-tinted grey-green base for the embedded application mockup wrapper.
- #0F4439 — Spruce Primary: Primary button fill, brand wordmark, key accents, and primary interactive states.
- #EBF2EE — Spruce Wash: Active navigation item background and subtle tinting behind legal badges.
- #111827 — Ink Slate: Display headline, dashboard headings, and high-emphasis metric figures.
- #5A6560 — Steel Neutral: Feature descriptions, subheadings, sidebar nav icons, and secondary metadata.
- #E6EAE8 — Line Border: Delimiting rules between value props, metric card borders, and timeline dividers.
- #D97706 — Amber Alert: Stage and alert badge indication for items requiring immediate attorney triage.

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 16px subheading, 17px body-lg, 24px heading, 48px display. Tracking -0.025em for display titles, +0.18em for uppercase eyebrow. The typographic tone is authoritative, clean, and unpretentious, matching the gravity of legal jurisprudence. A modern geometric sans-serif (Plus Jakarta Sans or Inter) delivers high legibility at 11px in tables while projecting confident executive authority in the 48px display heading.

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

DEPTH
Depth is created strictly through an atmospheric ambient drop shadow beneath the large mockup frame (0 24px 64px -12px rgba(15, 68, 57, 0.08)), separating it from the primary canvas. Inside the application frame, cards rely on 1px hairline borders (#E6EAE8) rather than elevation, preserving a crisp, paper-like document aesthetic.

IMAGERY
This section eschews stock photography in favor of a pixel-perfect, hyper-detailed vector UI simulator showing live case counts, timeline updates, and chat dialogs. The imagery must represent authentic attorney workflows: case docket numbers, legal immigration forms, and realistic procedural terms.

SIGNATURE DETAIL — the thing that makes this design itself
The defining hallmark is the deep institutional spruce green (#0F4439) used sparingly to elevate an otherwise clinical white-and-slate data workspace into a prestigious legal instrument. It bridges marketing rhetoric on the left with high-density procedural micro-interfaces on the right.

MUST
- Anchor primary calls to action with deep spruce green (#0F4439) and pure white typography.
- Maintain strict 1px hairline horizontal dividers between left-hand narrative feature rows.
- Keep dashboard mockups cropped gracefully off the right edge to evoke infinite digital space.
- Use generous whitespace around large display headings to reinforce premium executive clarity.

AVOID
- Do not introduce bright saturated neon greens or generic tech blues.
- Do not use heavy, high-contrast black shadows under floating cards; keep them diffuse and soft.
- Do not round buttons into complete pill shapes; retain structured 8px rounded corners.
- Do not omit the hairline divider lines between feature items in the left value stack.

OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks.

在 DraPub 中尝试

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

返回提示词画廊

界面组件与网格设计参考

Abyssal Defense Matrix

This design orchestrates a high-contrast defense tech showcase on a pure white (#FFFFFF) ground, pairing deeply saturated underwater hero media with ultra-pale tinted ancillary panels. The primary canvas divides into an asymmetric bento layout: a dominant deep-ocean card (#0A131F) occupying roughly 58% width, counterbalanced by a stack of three subtly tinted cards in lavender (#F9F8FD), arctic blue (#F4F9FD), and peach-blush (#FFF8F4). Typography relies on a neutral grotesque sans-serif with tight tracking and heavy display weights, accented by an uppercase tracking-widened purple eyebrow label (#6355D8). Micro-metrics are structured inside frosted glass capsules (rgba(255,255,255,0.08)) with fine borders on the dark hero, while stats in the bottom banner sit cleanly bordered by hair-thin dividers (#E2E8F0). The visual hierarchy commands attention instantly through the photorealistic submarine cutting through murky cerulean water with an illuminated frontal headlight beam.

界面组件与网格设计参考

Aegis Airspace

Built on a muted light canvas of #f8fafc, this layout establishes hierarchy through an asymmetrical bento grid anchored by an ominous dark-slate spotlight card (#0c1527). Color is deployed almost entirely for information density rather than ornamentation, utilizing tactical cyan (#38bdf8) and safety alerts on the dark radar screen while keeping standard enterprise surfaces pristine white (#ffffff) with delicate #e2e8f0 borders. Typography is anchored by a high-contrast geometric sans display headline sized around 44px with tight tracking (-0.02em), flowing into disciplined 14px body and caption metrics. Cards share a consistent 20px corner radius, punctuated by pill-shaped taxonomy tags with a 999px radius and soft 12px squircle icon badges. What the viewer notices first is the high-contrast tension between the civilian enterprise white cards and the tactical military-grade radar visual inhabiting the primary card.

界面组件与网格设计参考

Aegis Clinical

The canvas is an ethereal, faintly cool-tinted white (#f8fafd) with subtle blue undertones that instantly conveys clinical sterilization and enterprise reliability. Color functions as an instrument of authority: intense cobalt blue (#1e3a8a) commands attention across prominent numerical metrics, star ratings, and links, while high-contrast charcoal (#0f172a) grounds primary typography. Subtle pastels—specifically a soft lavender-blue (#eef2ff) and muted sage green (#ecfdf5)—delineate verification and categorization without visual clutter. Typography relies on a neutral grotesque sans-serif with tight negative tracking at display scale (42px) and crisp, readable 14px body text. The entire architecture sits on a rigorous grid of rounded rectangular surfaces (16px border-radius) floating with imperceptible, soft diffuse shadows. What a reader notices first is the overwhelming density of quantifiable credibility—large blue numerals paired cleanly with verified testimonial quotes.

界面组件与网格设计参考

Aero Infra

The canvas is a sterile, clinical cool white gradient (#f4f7fc fading into #ffffff) that directly evokes refrigerated high-density server rooms. Color operates strictly as functional signal: deep navy-black (#0a0f1d) delivers typographic clarity, electric cobalt (#2f54eb) marks active infrastructure status, and eco-green (#22c55e) highlights carbon savings. Typography relies on a tight neo-grotesque sans-serif with aggressive negative tracking at display scales (-0.03em) down to crisp neutral utility at 13px. Spatial composition follows an asymmetric split layout: narrative evidence and metrics anchor the left 55%, while hardware server racks dominate the right with overlapping floating metric badges. Key observed values include generous 20px card corner radii, 12px pill badges, and razor-thin 1px dividers colored at #e2e8f0.