Design a dark-mode web interface screen: high-contrast alpine editorial balancing stark snow-white mist against deep twilight slate surfaces.
LAYOUT
The page uses an asymmetric split layout anchored by an unbroken 240px sidebar on the left. The main content transitions vertically from an airy, high-key white editorial hero into a rich dark navy canvas (#0f131a). The lower section employs a two-column balance: narrative text, CTA, and indexed numbered anchors on the flanks of an organic, multi-column masonry photo collection.
PALETTE (use these exact hex values)
- #0f131a — Ink Slate Base: dominant dark background for sidebar navigation and portfolio gallery sections
- #ffffff — Alpine Mist White: bright canvas for hero section and floating profile detail card
- #1a1f2c — Elevated Charcoal: active pill background in the left sidebar menu items
- #2e66f6 — Cobalt Royal: primary action buttons, category tags, numbered anchors, and active indicators
- #121417 — Obsidian Deep: display headings and body text within the light hero section
- #f8fafc — Stark White: headings and body text over dark ink surfaces
- #8a94a6 — Slate Muted: secondary metadata, unselected nav links, and list divider lines
- #e04438 — Notification Crimson: counter badge on the header notification icon
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display, General Sans), weights 400/500/600/800. Sizes 11px caption, 13px body-sm, 13px subheading, 15px body, 18px body-lg, 28px heading, 64px display. Tracking -0.03em for bold lowercase display, +0.25em for uppercase subheads. The typography is cold, precise, and editorial, evocative of premium outdoor monographs and Scandinavian architectural journals. The deliberate use of uncapitalized display titles lends an understated, modern humility, while extreme uppercase tracking on secondary headers introduces structure. Plus Jakarta Sans or Inter should be loaded with tight negative tracking on display sizes to preserve this contemporary editorial authority.
GEOMETRY & SPACING
Corner radii — cards 20px, links 6px, inputs 10px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1440px container, comfortable density.
DEPTH
Depth is created through graphic plane superposition rather than heavy lighting. The white profile card sits over the misty base of the hero mountain visual with a soft, expansive ambient shadow (0 20px 40px rgba(0,0,0,0.06)), acting as a tangible stepping stone between the light upper and dark lower worlds.
IMAGERY
Photography is cinematic, high-contrast, and focused on alpine solitude: misty jagged peaks, misty fir forests, still alpine lakes, and arctic wildlife. Visuals are either desaturated monochrome or graded with moody, cool teal tones; warm vacation imagery or crowded scenes are strictly prohibited.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an all-lowercase heavy neo-grotesque title ('the mountains') with a widely-spaced uppercase subline, floating at the boundary of a snowy daylight peak and an ink-slate gallery canvas. Replicate this by enforcing tight letterspacing on lowercase headings while bridging light-to-dark transitions via floating white stat cards.
MUST
- Always render primary display section titles ('the mountains', 'travel') in lowercase heavy weight.
- Pair lowercase display headings with widely letterspaced uppercase secondary subtitles.
- Maintain the sharp polarity transition between the stark white hero and dark twilight portfolio section.
- Keep action buttons consistently shaped with an intentional 10px radius rather than full pills.
AVOID
- Do not capitalize the first letter of display titles; never write 'The Mountains'.
- Do not add heavy shadows or saturated gradients to UI cards; keep surfaces flat and architectural.
- Never replace monochrome nature photography with high-saturation or chaotic urban lifestyle imagery.
- Do not tint the sidebar in warm charcoal; maintain the deep cool navy hue (#0f131a).
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1360:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
