Verdant Clarity

The interface operates on an ultra-clean #FFFFFF surface where information hierarchy is established via quiet card containment rather than aggressive depth. Dominating the viewport is an authoritative, high-contrast serif display title in near-black #0F172A, contrasted by a friendly sans-serif subhead in muted slate #64748B. Cards share a consistent 16px corner radius, a subtle 1px border (#E6ECE8), and pure white fills that float seamlessly over the canvas. Color is strictly functional: botanical mint tints (#E8F5EE) house icon glyphs and tag badges, deep forest green (#166534) anchors action affordances, and miniature terracotta amber dots (#E76F51) punctuate metric milestones. The dual-column FAQ grid transitions naturally into a unified social proof metric ribbon at the bottom, communicating calm, enterprise-grade reliability.

1 design references

Prompt metadata
Shared by	@Devault
Model	GPT Image 2.5
Category	UI components & grids
Dataset	stretchcloud · awesome-gpt-image-prompt-2.5

The prompt

Design a light-mode website section: clinical data governance rendered approachable through airy mint enclosures, warm amber counters, and authoritative editorial serif headings.

LAYOUT
Structured around a strict central vertical axis spanning 1040px max-width. The sequence begins with a compact category capsule, flows into a centered editorial lockup, expands into a 2-column by 3-row grid of FAQ cards (16px gaps), and concludes with a full-span horizontal metrics bar.

PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Primary background for the page canvas and card surfaces.
- #E6ECE8 — Card Stroke: Hairline perimeter stroke defining FAQ cards and the metrics container.
- #E8F5EE — Mint Glaze: Background tint for pill badges and iconography housing boxes.
- #166534 — Forest Slate: Accents, category pill typography, icon line art, and plus disclosure indicators.
- #0F172A — Charcoal Black: Display title, question titles, and metric percentage numerals.
- #64748B — Muted Slate: Secondary explainer copy, answers inside cards, and metric label copy.
- #09241B — Deep Forest: High-contrast dark badge surface backing the verification shield.
- #E76F51 — Amber Dot: Separation pip between horizontal metric items in the social proof bar.

TYPOGRAPHY
Typeface Newsreader (or Playfair Display, Instrument Serif, Georgia), weights 400/500. Sizes 12px caption, 13px body-sm, 15px body, 17px subheading, 32px heading, 44px display. Tracking -0.02em. The voice is composed, scholarly, and technically disciplined. The editorial serif display typeface projects traditional prestige and trustworthiness, while the clean geometric sans ensures immediate, frictionless scannability for operational answers and quantitative metrics.

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

DEPTH
This design completely avoids drop shadows or artificial elevation. Depth is communicated strictly through surface layering: hair-thin 1px borders (#E6ECE8) demarcate panels on pure #FFFFFF, while color-blocked icon plates (#E8F5EE) create tactile micro-depth.

IMAGERY
The interface relies on clean, custom 24px stroke iconography rather than photographic assets. Icons feature rounded terminal caps, consistent 1.5px stroke weight, and are centered inside light botanical rounded squares. Expressive illustrations or stock imagery would break the clinical rigor.

SIGNATURE DETAIL — the thing that makes this design itself
The dual-column card array pairing soft mint squircle icon enclosures with an integrated multi-metric proof bar directly beneath. The design's hallmark is the disciplined 16px radius white card framed by #E6ECE8 borders and highlighted with single-pixel terracotta separator dots.

MUST
- Use a refined transitional serif exclusively for the top section title to preserve editorial warmth.
- Enclose each FAQ item in its own discrete rounded card rather than standard underline dividers.
- Render all FAQ iconography with uniform 1.5px outline weights within soft mint #E8F5EE squircle badges.
- Keep card stroke borders extremely light (#E6ECE8) with zero box-shadow for a flat, clean aesthetic.

AVOID
- Never add drop shadows or heavy blur effects to the white FAQ cards.
- Do not render FAQ accordion headers in serif type; reserve serif strictly for the primary section title.
- Avoid harsh primary greens; stick to desaturated mint #E8F5EE and deep forest green #166534.
- Never replace the subtle border cards with a single unified grey container.

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.

Try in DraPub

More prompts from the same visual neighborhood.

Back to prompt gallery

UI components & gridsDesign reference

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.

UI components & gridsDesign reference

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.

UI components & gridsDesign reference

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.

UI components & gridsDesign reference

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.