Pine & Porcelain

This layout frames high-trust enterprise B2B validation through an authoritative editorial lens. The background is an expansive off-white canvas (#F8F9FA) centered around an elevated porcelain card (#FFFFFF) with a 24px corner radius and a soft diffuse shadow. Color is used with surgical restraint: deep slate text (#111827) provides core structure, while an evocative pine green (#134E48) highlights the single operative word 'conversations' and metric anchors. The typographic hierarchy combines a high-contrast editorial serif display (approx 44px) with neutral, legible sans-serif subheads and metadata. Spanning 15 enterprise partner logos across a hairlined 5x3 grid, the presentation feels established rather than promotional. Beneath the core logo container, a trio of stat clusters anchored by soft mint icon tiles (#E6F2EE) grounds qualitative claims in operational scale.

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: quiet editorial prestige paired with structured institutional validation and emerald warmth.

LAYOUT
The composition follows a strict top-to-bottom pyramid rhythm. It begins with a focused, centered editorial text stack (eyebrow, serif heading, body explainer). This funnels into a wide 5x3 logo matrix housed in an expansive floating card, and concludes with a balanced three-column quantitative stat strip aligned precisely to the card width.

PALETTE (use these exact hex values)
- #F8F9FA — Canvas Porcelain: ambient background canvas establishing airy breathing room behind elevated cards
- #FFFFFF — Card Surface: primary container surface for the elevated social proof logo grid
- #111827 — Deep Charcoal: dominant headline typography, partner logos, and high-emphasis metric copy
- #134E48 — Editorial Pine: accent emphasis on headline keywords and key numerical data points
- #E6F2EE — Subtle Sage Tile: soft-fill background for bottom metric icon containers
- #64748B — Slate Neutral: eyebrow, descriptive body text, and secondary stat labels
- #EEF2F6 — Hairline Border: internal grid dividers separating individual client logos and metric columns

TYPOGRAPHY
Typeface Newsreader (or Editorial New,Playfair Display,EB Garamond), weights 400/500. Sizes 11px caption, 13px body-sm, 15px body, 16px subheading, 44px display. Tracking -0.015em. The typographic pairing bridges traditional editorial authority and modern software precision. Newsreader provides the intellectual weight of print journalism, while Inter supplies pragmatic, legible efficiency for utility elements. Free open-source alternatives like EB Garamond and Plus Jakarta Sans reproduce this balance accurately.

GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1040px container, airy density.

DEPTH
Depth is handled through a single expansive elevation layer. The large logo container floats above the soft grey base via a diffuse drop shadow (0 20px 45px -12px rgba(17, 24, 39, 0.06)), avoiding harsh borders or stark layering. The stat items below remain entirely flat, grounding the bottom section.

IMAGERY
The visual vocabulary relies strictly on vector abstraction and corporate identity marks rather than photography. Logos are stripped of company brand palettes and unified in uniform dark slate. Metric icons are pure 1.5px monoline glyphs sitting inside muted square pillows with gently rounded corners.

SIGNATURE DETAIL — the thing that makes this design itself
The distinctive move is the treatment of the main logo grid: combining a generous rounded porcelain container with crisp interior architectural hairlines, topped by a selective single-word pine green headline accent. When executed poorly, designers omit the inner grid lines or saturate the logos with raw brand colors, degrading the institutional prestige into a chaotic sticker sheet.

MUST
- Reserve the editorial pine green (#134E48) for high-intent keywords and metric badges.
- Ensure all 15 partner logos are normalized to visual weight rather than rigid pixel dimensions.
- Keep internal card divider rules to a single hairline stroke (#EEF2F6) without hard black borders.
- Use generous padding around the logo grid to prevent logos feeling crowded against the container edges.

AVOID
- Do not display logos in their native brand colors; enforce strict slate monochrome (#334155).
- Never substitute heavy box shadows for the airy, diffuse ambient elevation used here.
- Do not remove the internal hairline grid lines; without them the logo layout loses cohesion.
- Avoid colored backgrounds across the main logo card; keep it pure white (#FFFFFF).

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.