Design a dark-mode web interface screen: dark sculpted earthenware framed by luminous cyan accents and architectural arch geometries.
LAYOUT
The page follows an asymmetric luxury grid anchored inside a 1240px frame. The hero pairs an off-center left-aligned headline cluster with a soaring vertical arch photograph on the right. Below, sections alternate between narrative multi-column split layouts and disciplined horizontal carousels with top-right control clusters.
PALETTE (use these exact hex values)
- #0c1217 — Obsidian Deep: Primary background canvas across all sections, establishing the deep nocturnal gallery atmosphere.
- #121b23 — Card Slate: Slightly elevated dark surface for feature highlights and subtle card backgrounds.
- #22c7d2 — Vibrant Cyan: High-visibility focal accent used for primary CTA, section eyebrows, italicised emphasis, and active pagination.
- #1e2b36 — Midnight Border: Subtle 1px outline for secondary CTA buttons, icon capsules, and carousel controls.
- #ffffff — Pure White: Display headings, numeric counters, and prominent navigational labels.
- #8a9aa8 — Muted Slate: Descriptive body copy, subheadings, and secondary metadata.
- #15202a — Charcoal Line: Extremely low-contrast organic topographical contour vectors layered in dark section backgrounds.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Satoshi,General Sans,Inter), weights 300/400/500/600. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 32px heading, 40px heading-lg, 52px display. Tracking -0.02em at display, 0.08em at uppercase captions. The typographic personality is whisper-quiet yet authoritative. Light geometric sans (Plus Jakarta Sans) suggests modern Scandinavian architectural discipline, while spontaneous insertions of delicate serif italics (Instrument Serif) echo the personal touch of a craftsman's hand. If substituting, use Cormorant Garamond alongside Satoshi or Inter.
GEOMETRY & SPACING
Corner radii — cards 16px, links 2px, inputs 4px, buttons 4px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1240px container, airy density.
DEPTH
Depth is created entirely without standard drop shadows. The design relies on luminous layering: an obsidian ground (#0c1217) overlaid with faint topographical contour lines, 1px midnight-slate borders (#1e2b36), and warm photographic lighting that acts as a natural lightbox.
IMAGERY
Photography embraces artisanal, tactile stoneware, linen fabrics, dried botanicals, and studio process shots. Lighting is diffuse, side-lit, and warm, emphasizing natural textures, neutral clay tones, and unglazed ceramic surfaces. Clinical white-background catalog cuts or oversaturated lifestyle photography would break the quiet atelier mood.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric architectural arch image frame (240px top radius, 0px bottom) set against midnight slate and punctuated by an electric cyan headline highlight. It merges brutalist monastic architecture with tactile ceramic warmth. Misusing it by applying the arch radius to every card or rounding all four corners erodes its cathedral-like presence.
MUST
- Use the signature arch radius (240px top, 0px bottom) exclusively for prime visual focal photography.
- Pair clean sans-serif display headings with serif italic phrases to inject craft and warmth.
- Reserve #22c7d2 cyan strictly for interactive triggers, eyebrows, and typographic focal words.
- Maintain strict 96px vertical rhythm between major thematic page sections.
AVOID
- Do not apply heavy multi-stop drop shadows; depth must come from tonal contrast and hairline borders.
- Never fill large background sections with cyan #22c7d2; it must remain a pinpoint luminous accent.
- Avoid thick bold weights on display headlines; heavy weights destroy the delicate studio aesthetic.
- Do not round all four corners of the hero showcase image; the architectural flat bottom is crucial.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1392:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
