Cobalt Editorial Proof

The canvas is rendered in pristine white (#FFFFFF) with faint atmospheric cooling from soft ice-slate tints (#F4F8FC). Primary hierarchy relies on dramatic type contrast: large, elegant transitional serif display headings grounded by an electric cobalt accent (#1D63ED) for pivotal phrase emphasis. Below the header, a two-column grid contains six FAQ accordion cards with smooth 12px rounded corners, elevated by featherweight diffuse box shadows rather than harsh borders. Inside each accordion, square-rounded 44px icon wells in pale azure (#EAF2FE) anchor crisp sans-serif questions and slate body copy (#64748B). Anchoring the composition is a full-width stat ribbon (#F4F8FC) bounded by vertical hairline dividers, pairing serif numerals with miniature mint-emerald metric glyphs.

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 precision softened by literary serif titles and airy porcelain cards.

LAYOUT
The layout follows a centered vertical column format bound to a maximum width of approximately 1160px. It sequences from an informative pill badge down to a dramatic centered display lockup, followed by an airy 2x3 card grid for questions. The flow culminates in a stabilizing, grounded horizontal metric bar that spans the entire grid footprint.

PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Main canvas background and background fill for all interactive FAQ accordion cards
- #F4F8FC — Ice Foundation: Background fill for the stats callout container and secondary section wrapper
- #EAF2FE — Cobalt Wash: Tint fill for category pills and square icon badge containers
- #1D63ED — Electric Cobalt: Heading accent color, pill label text, section tracking kicker, and icon strokes
- #0F172A — Ink Navy: Primary headline text, accordion titles, and large stat metric values
- #64748B — Muted Slate: Descriptive body copy, subheadlines, chevron icons, and metric micro-labels
- #E8F8F2 — Mint Glaze: Circular pill fill behind stat metric icons in the social proof bar
- #059669 — Emerald Icon: Stroke color for trend and positive indicator icons inside stats blocks
- #E2E8F0 — Border Frost: Vertical dividing rules separating metric columns inside the stats block

TYPOGRAPHY
Typeface Newsreader (or EB Garamond, Cormorant Garamond, Tiempos Headline), weights 400/500. Sizes 11px caption, 12px body-sm, 14px body, 15px body-lg, 16px subheading, 32px heading, 46px display. Tracking -0.02em. The typographic tone balances academic credibility with Silicon Valley SaaS precision. The display serif feels literary, thoughtful, and analytical, perfectly suited for high-consideration CPG market research. The neutral grotesque companion (Inter) provides clean legibility for dense technical explanations and complex data points.

GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 10px, buttons 9999px. Spacing on a 8px unit, 16px gaps, 80px between sections, 1200px container, comfortable density.

DEPTH
Depth is strictly non-skeuomorphic and relies on micro-elevation. Interactive FAQ cards hover upon the white canvas via a high-diffusion, ultra-low-opacity shadow (0 4px 24px rgba(15, 23, 42, 0.035)). Contrast between the cards and the recessed social proof tray is established purely through surface value shift from #FFFFFF to #F4F8FC.

IMAGERY
No photographic imagery is present in this viewport. Visual interest is driven exclusively by custom 1.5px to 2px stroke line iconography within tailored rounded bounding boxes. Any imagery introduced into this system must be minimalist, clinical product UI captures or monochromatic diagrams, never stock photography.

SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone editorial headline lockup paired directly with tinted icon-well FAQ cards. The sudden transition of the title's final phrase from Ink Navy into Electric Cobalt gives an unmistakable signature cadence, reinforced immediately below by the repetition of cobalt within the soft-square icon wells.

MUST
- Retain the chromatic shift in headlines where the concluding line is tinted Electric Cobalt (#1D63ED).
- Preserve the two-column accordion layout on desktop with an exact 16px horizontal and vertical gap.
- House FAQ outline icons within dedicated 44px soft squircle wells of pale cobalt (#EAF2FE).
- Pair serif display figures with modern geometric sans-serif body copy for intellectual authority.

AVOID
- Do not use dark backgrounds; the identity is strictly calibrated for bright, luminous white space.
- Do not omit the circular icon accessories next to the statistical numbers in the proof ribbon.
- Never make the FAQ questions bold serif; titles must remain in clean, mid-weight sans-serif.
- Avoid solid heavy borders around cards which disrupt the airy, weightless card appearance.

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.