SynBio Studio

SynBio Studio anchors a biotechnology SaaS dashboard in an immaculate laboratory aesthetic, balancing clinical clarity with modern software warmth. The canvas relies on an ultra-pale slate background (#F8FAFC) to set off elevated pure white (#FFFFFF) container cards bordered with hairline division rules (#E2E8F0). Hierarchy is established through disciplined typographic weight rather than heavy fills, using dark slate text (#0F172A) for data values and muted charcoal (#64748B) for labels. Cobalt blue (#2563EB) serves as the primary operational hue, driving focus to the hero banner callout and key action buttons. Functional semantic accents—emerald (#10B981) for completions, rose (#EF4444) for alerts, and amber (#F59E0B) for expirations—are confined to soft pill tags and micro sparklines. Generous 16px card radii soften the technical density of tables and charts, ensuring multi-panel metrics remain legible without cognitive fatigue.

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: clinical laboratory precision framed by buoyant cobalt accents, crisp modular data tiles, and airy scientific instrumentation.

LAYOUT
The workspace uses a rigid two-column application frame: a fixed 240px navigation rail on the left and a responsive fluid canvas on the right. Content scrolls under a lightweight utility header, descending from a broad welcome hero banner into a 4-column KPI telemetry row. Below the telemetry, two equal-width 50/50 split modular rows organize data tables, line graphs, donut charts, and inventory lists.

PALETTE (use these exact hex values)
- #F8FAFC — Canvas Background: Global application page background behind cards and sidebar navigation
- #FFFFFF — Surface Card: Background for data cards, hero panels, charts, and input fields
- #F1F5F9 — Surface Subdued: Inactive search bars, subtle pill chips, and secondary button backgrounds
- #2563EB — Cobalt Primary: Active navigation states, primary buttons, hero emphasis, and sparkline highlights
- #EFF6FF — Cobalt Tint: Selected sidebar menu background and metric icon container wash
- #0F172A — Text Primary: Main dashboard headings, card headers, high-impact numbers, and table cell titles
- #64748B — Text Muted: Secondary labels, timestamps, metadata IDs, and navigation link text
- #10B981 — Success Emerald: Positive week-over-week trends, completed experiment badges, and active state indicators
- #EF4444 — Danger Rose: Critical inventory alerts and low stock pill badges
- #F59E0B — Warning Amber: Expiring reagents and cautionary inventory warning tags

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Outfit), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 20px heading, 28px heading-lg, 36px display. Tracking -0.02em at display, -0.01em at body, 0 at micro. The typographic character is objective, modern, and clinical, delivered via a geometric sans-serif (Plus Jakarta Sans or Inter). Tight letter tracking (-0.02em) on numbers and headlines yields an authoritative scientific feel, while open counters on 12px and 13px labels ensure zero ambiguity in protocol and dosage readings. A system fallback stack of standard grotesques seamlessly maintains legibility.

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

DEPTH
Depth is handled with clinical restraint to mimic pristine laboratory equipment screens. Cards sit on an un-tinted 1px border (#E2E8F0) paired with an ultra-soft diffuse shadow: 0 1px 2px rgba(15, 23, 42, 0.03). Hover states gently lift components via a slightly wider shadow (0 4px 12px rgba(15, 23, 42, 0.06)), avoiding dramatic z-index layering.

IMAGERY
Vector line-and-fill technical illustrations in isometric or flat perspective depict biotech lab gear: beakers, Erlenmeyer flasks, pipettes, DNA double-helixes, and robotic automation arms. The illustration uses brand blue, lavender, and solar gold tints on crisp geometric forms. Photographic realism or generic stock photos would break the clean instrumental tone.

SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone scientific display header ('Advance science. Accelerate discovery.') positioned alongside an architectural laboratory vector illustration, anchored below by 4-column metric cards bearing soft bottom-bleed sparklines. To use it properly, retain the crisp cobalt text inflection and let the smooth wave bleed to the exact bottom border of the KPI card.

MUST
- Use 16px border radii consistently across all data cards and hero surfaces.
- Pair a 1px solid #E2E8F0 border with a faint drop shadow (0 1px 3px rgba(0,0,0,0.04)) on cards.
- Highlight primary numbers with 28px font-weight 700 in #0F172A for immediate scanning.
- Confine saturated colors (emerald, rose, amber) strictly to functional status indicators and sparklines.

AVOID
- Do not use dark backgrounds or high-contrast heavy shadows on dashboard cards.
- Do not fill large card backgrounds with heavy primary blue; restrict it to CTAs and accents.
- Avoid sharp 0px corners; all interactive cards and surfaces must maintain 8px to 16px curvature.
- Do not mix serif or decorative typefaces into this technical laboratory workspace.

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.