Lexicon Slate

The interface establishes a luminous, calm environment using a crystalline off-white backdrop (#F8FAFC) paired with pure white (#FFFFFF) container cards. Hierarchy is communicated through precise typographic contrast rather than heavy borders, anchoring the view with a bold 34px page title alongside soft 12px secondary metadata. Vibrant royal blue (#2563EB) serves as the primary thematic accent for active states, CTA buttons, and reading progress bars, while a secondary palette of teal (#06B6D4), violet (#8B5CF6), and amber (#F59E0B) demarcates categories and metric streams. Structural elements embrace continuous 12px to 14px rounded card silhouettes with faint 1px borders (#E2E8F0) and negligible drop shadows. Generous white space prevents dense reading lists and analytics charts from feeling cluttered. A visitor immediately notices the delicate 2.5D vector illustration harmonised with concise, high-visibility metric counters.

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: an airy sanctuary for personal scholarship combining crisp cobalt accents with measured editorial quietude.

LAYOUT
The page implements a fixed-width left navigation rail (approx 220px) next to a scrollable two-column content grid (approx 65% left, 35% right). The primary pane leads with a banner pairing an expressive title and stylized illustration above a 5-column metric stat row. Below this, transactional reading queues, book cards, and quotes occupy the wider left flow, while fixed analytics widgets populate the narrower right rail.

PALETTE (use these exact hex values)
- #F8FAFC — Canvas Background: Global application page background behind cards and panels
- #FFFFFF — Card Surface: Primary surface for dashboard cards, sidebar, and inputs
- #2563EB — Cobalt Blue: Primary brand color for primary actions, active navigation, and dominant charts
- #EFF6FF — Cobalt Tint: Soft wash for active sidebar selection pills and pill tags
- #0F172A — Charcoal Slate: Main headings, book titles, and primary numerical readouts
- #64748B — Cool Grey: Secondary metadata, author names, inactive nav links, and captions
- #E2E8F0 — Border Subtle: Hairline 1px dividers, card boundaries, and input borders
- #06B6D4 — Progress Cyan: Science category bar and secondary metrics line chart line
- #F59E0B — Amber Gold: Self-help category bar, pro badge, and note quote icons
- #8B5CF6 — Royal Violet: History category bar and highlight callout indicators

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display, Manrope), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 20px heading, 34px display. Tracking -0.02em at display, 0 at body. Plus Jakarta Sans delivers an exacting, clean geometric presence with generous apertures that feel simultaneously literate and technological. It balances modern productivity tool clarity with quiet editorial dignity. If unlicensable, Inter or Manrope serve as precise, high-legibility free drop-in substitutes.

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

DEPTH
Depth is rendered flat-to-surface without pronounced drop shadows. Structural boundary is almost entirely articulated through 1px crisp borders (#E2E8F0) contrasting against the subtle slate base canvas (#F8FAFC). Modals or active tooltips sparingly rely on a soft, diffused 0px 4px 12px rgba(15, 23, 42, 0.05) ambient blur.

IMAGERY
Visual language combines faithful miniature representations of published book covers with flat, stylized 2.5D vector artwork. The hero banner employs soft monochrome blue and pastel purple hues illustrating stationery, open books, glasses, and botanical leaves. Photorealistic lifestyle imagery or raw uncurated photography is strictly avoided.

SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the horizontal 'Continue reading' row paired with a micro progress bar and outline action pill. It transforms passive library catalogs into an active, friction-free productivity workflow. It is commonly misused by oversaturating the track with jarring colors or wrapping multiple titles unpredictably.

MUST
- Use a hairline 1px border (#E2E8F0) rather than heavy drop shadows to define white surface boundaries.
- Limit saturated royal blue (#2563EB) strictly to active indicators, primary CTAs, and reading progression.
- Maintain generous 20px to 24px margins between disparate dashboard modules to foster an unhurried, library-like atmosphere.
- Pair book cover miniatures with strict typographic truncation to prevent multi-line grid misalignment.

AVOID
- Never introduce dark saturated backgrounds for cards; the system strictly relies on crisp white (#FFFFFF).
- Do not use dark or heavy box-shadows; keep elevation virtually flat with light 1px structural strokes.
- Avoid colored icon backdrops with high contrast; use soft hairline circular borders or faint pastel tints.
- Do not mix serif display typefaces into standard operational UI elements; retain geometric sans throughout.

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