Design a dark-mode web interface screen: deep sapphire midnight canvas framing glowing travel photography and polished glass controls.
LAYOUT
The viewport is organized into a fixed-left sidebar alongside a wide scrollable main feed. The main canvas begins with an asymmetric hero containing search inputs and stacked angled photo cards, followed by repeating horizontal section blocks with right-aligned carousel controls ('View all', chevron buttons). Feature trust pillars sit in a 4-column balanced grid.
PALETTE (use these exact hex values)
- #050914 — Abyssal Void: Deepest canvas background behind the main content area
- #080D1B — Sidebar Navy: Persistent left navigation surface creating subtle separation
- #0E1526 — Card Surface: Card containers, feature blocks, and search bar backgrounds
- #1E293B — Border Subtle: Subtle borders around cards, dividers, and icon badges
- #3B82F6 — Electric Azure: Call-to-action buttons, headline text highlights, and active states
- #60A5FA — Cerulean Glow: Secondary brand accents, icons, and hero typography gradients
- #FBBF24 — Star Amber: Rating stars and review scores across destination cards
- #FFFFFF — Pure White: High-emphasis titles, selected navigation labels, and headers
- #8F9CAE — Slate Dust: Descriptions, unselected links, and input field labels
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Outfit), weights 400/700. Sizes 12px caption, 14px body-sm, 16px body, 18px subheading, 24px heading, 32px heading-lg, 56px display. Tracking -0.03em at display, -0.01em at body. The geometric modern sans-serif feels crisp, welcoming, and premium. Tightly tracked display headers (-1.5px) bring authority, while generous line heights on body copy ensure effortless legibility against the deep dark canvas. If Plus Jakarta Sans is unavailable, Inter or DM Sans will preserve the technical yet approachable tone.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 14px, buttons 10px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1440px container, comfortable density.
DEPTH
Depth is produced via tonal layering and fine luminescent strokes rather than spread drop shadows. Surfaces rise from base #050914 to card #0E1526, bounded by 1px #1E293B outlines. Hero cards use subtle z-index overlapping and faint ambient glow to emphasize primary cards.
IMAGERY
Photography focuses on saturated, breathtaking landscape vistas—Santorini sunsets, Icelandic auroras, and Balinese temples. Images are rich in contrast, color-graded to warm or ethereal tones, and framed in rounded rectangles with subtle inner shadow vignettes.
SIGNATURE DETAIL — the thing that makes this design itself
The three-dimensional floating photo stack in the hero section, encircled by delicate curved orbital lines with tiny jet silhouettes, instantly communicates luxury wanderlust within a tech-forward interface. Avoid flattening these into a standard slider; maintain the perspective offset.
MUST
- Use deep navy #050914 as the canvas rather than pure black to preserve depth.
- Highlight key verbs and brand phrases in the display headline using vibrant #3B82F6.
- Wrap visual photo cards in smooth 16px to 20px border radii.
- Keep borders hairline thin at 1px using dark slate #1E293B for quiet separation.
AVOID
- Never use pure white backgrounds or light theme panels anywhere on the canvas.
- Avoid high-contrast harsh white borders; keep borders muted in the #1A253A range.
- Do not place plain text directly onto photographic backgrounds without dark gradients.
- Do not use sharp 0px corners; all interactive cards and pills require generous curves.
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. 在 DraPub 中尝试 
