Syntax & Form

The canvas is built on a luminous #ffffff background framed by delicate 1px borders in #f1f5f9 and airy negative space. Color is applied with surgical discipline: deep slate #0f172a commands primary typographic hierarchy, while an energetic royal blue #2563eb designates interactive states, progress fills, and call-to-action anchors. Brand identity from external developer ecosystems (Flutter cyan, Swift coral, Node green) provides localized chromatic focal points without destabilizing the neutral base. Card containers utilize a uniform 16px radius with subtle inset or soft boundary outlines, completely avoiding heavy skeuomorphic drop shadows. Spacing adheres to a rhythm of 24px and 32px gutters across standard 5-column grids. Readers immediately notice the floating dashboard mock-up with layered elevation and the tactile 10-card curriculum matrix.

1 design references

Prompt metadata
Shared by	@Devault
Model	GPT Image 2.5
Category	Web design
Dataset	stretchcloud · awesome-gpt-image-prompt-2.5

The prompt

Design a light-mode web interface screen: crisp modular edtech surface blending precision typography, micro-progress metrics, and luminous developer brand accents.

LAYOUT
The page opens with a top bar navigation spanning 1280px containing logo, core links, and right-aligned user actions. Below, the hero section splits into an asymmetric 50/50 two-column grid with typography on the left and a layered product dashboard mockup on the right. Following the hero, category filters introduce a structured 5-column, 2-row catalog matrix of uniform course cards. Lower sections transition into a 2-column editorial handbook layout and two-column benefit blocks.

PALETTE (use these exact hex values)
- #ffffff — Canvas White: Global application background and solid card surface fill
- #f1f5f9 — Subtle Slate Border: Delicate 1px borders defining card perimeters, input controls, and tab rows
- #f8fafc — Card Wash: Secondary surface for nested mockup panels and subtle hover backdrops
- #0f172a — Deep Slate Text: Primary headings, dominant typography, and active navigation items
- #64748b — Muted Slate Text: Subtitles, course metadata (lessons, hours), and inactive link labels
- #2563eb — Electric Royal Blue: Hero action button, active category pill, link accents, and progress indicators
- #fee2e2 — Soft Red Badge Tint: Background for alert badge tags like the 'NEW' changelog capsule
- #ef4444 — Accent Scarlet: Text and icon accent for alert tags and streak indicators

TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 30px heading, 48px display. Tracking -0.03em at display, -0.01em at body, 0.08em at eyebrow. The typographical tone is clean, technical, and approachable, perfectly balanced by Inter's neutral proportions and precise numerals. Tight negative letter-spacing (-0.025em to -0.03em) on large display headlines gives the edtech product an engineered, modern SaaS character. For zero-cost implementations, Inter or Plus Jakarta Sans are pixel-perfect open-source matches.

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

DEPTH
Depth is created through clean atmospheric layering rather than harsh shadows. Base cards sit flush on the white ground outlined by light 1px borders (#f1f5f9). Floating dashboard previews and streak widgets achieve elevation through expansive, low-opacity ambient shadows (blur: 32px, y-offset: 12px, opacity: 5%).

IMAGERY
Imagery strictly consists of crisp vector brand logos (React, Flutter, SwiftUI, Figma, Next.js) and stylized miniature UI application screenshots. Mockups feature simplified charts, flat vectors, and pastel accent blocks. Photography of people is relegated strictly to tiny circular avatar chips in navigation and headers.

SIGNATURE DETAIL — the thing that makes this design itself
The layout's signature is the 5-column micro-card grid with authentic tech logos positioned above explicit progress tracks. Each card acts as an independent mini-dashboard conveying topic, commitment, and completion progress in under 200 vertical pixels. Misusing it by over-decorating card backgrounds with gradients or removing the bottom progress tracking ruins the disciplined software feel.

MUST
- Maintain strict 16px border radii on all standard modular cards and containers.
- Use uppercase, widely tracked (0.08em) 11px typography for section eyebrows.
- Rely primarily on crisp 1px borders (#f1f5f9) rather than heavy drop shadows for separation.
- Keep brand blue (#2563eb) reserved strictly for key interactive elements and active states.

AVOID
- Never apply colored background tints to entire section blocks; maintain pure #ffffff ground.
- Avoid pill-shaped (999px) border radii on primary buttons; strictly use 8px corners.
- Do not allow tech logos to stretch or dominate; contain them strictly to 48px optical height.
- Never use pitch black (#000000) for body copy; use refined slate (#0f172a / #64748b).

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

Web designDesign reference

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.

Web designDesign reference

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.

Web designDesign reference

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.

Web designDesign reference

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.